Out putting time and date using JavaScript. [Archive]

Click to See Complete Forum and Search --> : Out putting time and date using JavaScript.

szms

08-09-2004, 10:24 AM

I am using the following code for printing the date and time in the web site. But I would like to keep this code in a exterenal file and call it in side the html code for showing date and time. How to do that?

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

DaveSW

08-09-2004, 10:33 AM

http://www.w3schools.com/js/js_whereto.asp and scroll down to external. That should help you.

MstrBob

08-09-2004, 10:34 AM

save the code you gave (minus the two script tags) into a file, and name it datetime.js Wherever you want it to go in your html page, put this:

<script type="text/javascript" src="datetime.js"></script>

*edit* oops, Dave beat me to it...

DaveSW

08-09-2004, 10:42 AM

well maybe it is best to have the solutions on the thread just in case the external links move...

szms

08-09-2004, 12:49 PM

So now I kept the following code in a file named date_time.js

function datetime()
{
Stamp = new Date();

document.write('<b>Date: </b>' + (Stamp.getDate()) +"/"+(Stamp.getMonth() + 1)+ "/"+Stamp.getYear() + ' <br> ');

var Hours;
var Mins;
var Time;
Hours = Stamp.getHours();
if (Hours >= 12) {
Time = " P.M.";
}
else {
Time = " A.M.";
}

if (Hours > 12) {
Hours -= 12;
}

if (Hours == 0) {
Hours = 12;
}

Mins = Stamp.getMinutes();

if (Mins < 10) {
Mins = "0" + Mins;
}

document.write('<b>Time:</b> ' + Hours + ":" + Mins + Time + '');
}

And in the BODY of html code I call the function as follows:

<script language="Javascript" type="text/javascript" src="date_time.js">
datetime();
</script>

it's not showing the date and time in the web site so could you please let me know what's wrong with my code.

MstrBob

08-09-2004, 01:27 PM

Don't put the function name bewteen the script tags, that does nothing. You have to call the function in your page, like:

<body onload="datetime()">

or something similar.

szms

08-09-2004, 01:37 PM

Well I would like have an automatic updating option in my website so that time will be updated without refresinging the web site. Do you have any suggestion.

MstrBob

08-09-2004, 02:42 PM

Perhaps something like:

document.write("<form id=\"timeform\" action=\"\"><input type=\"text\" size=\"20\" name=\"date\"><br><input type=\"text\" size=\"20\" name=\"time\"></form>");
function datetime()
{
Stamp = new Date();

var Hours;
var Mins;
var Time;
Hours = Stamp.getHours();
if (Hours >= 12) {
Time = " P.M.";
}
else {
Time = " A.M.";
}

if (Hours > 12) {
Hours -= 12;
}

if (Hours == 0) {
Hours = 12;
}

Mins = Stamp.getMinutes();

if (Mins < 10) {
Mins = "0" + Mins;
}

Secs = Stamp.getSeconds();

if (Secs < 10) {
Secs = "0" + Secs;
}

document.getElementById('timeform').date.value='Date: ' + (Stamp.getDate()) +"/"+(Stamp.getMonth() + 1)+ "/"+Stamp.getYear();
document.getElementById('timeform').time.value='Time: ' + Hours + ":" + Mins + ":" + Secs + Time;
setTimeout("datetime()", 1000);
}

Charles

08-09-2004, 03:01 PM

In a separate file:

Date.prototype.toDateString = function () {return [this.getDate(), this.getMonth() + 1, this.getFullYear().toString().match(/\d{2}$/)].join ('/')}

Date.prototype.toTimeString = function () {return [[this.getHours() >= 12 ? this.getHours() - 12 : this.getHours(), this.getMinutes()].join (':'), this.getHours() >= 12 ? 'PM' : 'AM'].join (' ')}

document.write('<dl><dt>Date:</dt><dd id="date">', new Date().toDateString(), '</dd><dt>Time:</dt><dd id="time">', new Date().toTimeString(), '</dd></dl>')

setInterval ("document.getElementById('date').firstChild.data = new Date().toDateString(); document.getElementById('time').firstChild.data = new Date().toTimeString()", 100)

And then call it, from where you want the date & time to appear in the document, with something like

<script src="dateTime.js" type="text/javascript"></script>

szms

08-10-2004, 08:51 AM

Now working with a new code for showing date and time. It works perfectly when JS code in under the html tag. But I would like to keep the JS code in an external file and call the file inside the html. I tired to do so but it's giving me error and the blinker is not blinking when I tried. Any suggestion. Thank you.

<HTML>
<HEAD>
<title>DCScript© Digital Clock</title>
<style>
.clock {
background-color: #A6A98D;
color: black;
font-family: verdana;
float: center;
border: 1px solid black;
border-collapse: collapse;
}
.time {
font-size: 100;
}
.clock TD {
border: 1px solid black;
border-collapse: collapse;
}
B {color:black}
BODY {font-family: arial; font-size: 10pt}
</style>
<SCRIPT LANGUAGE="JavaScript">
function time() {
var today = new Date();
var hrs = today.getHours();
var min = today.getMinutes();
var secs = today.getSeconds();
var alsohrs = today.getHours();
var dayNumber = today.getDate();
var year = today.getFullYear();
var ampm="";
var zero="0";
var month = today.getMonth() +1;
var weekday = today.getDay();
var wdn = new Array(7)
wdn[0] = "SUN";
wdn[1] = "MON";
wdn[2] = "TUE";
wdn[3] = "WED";
wdn[4] = "THU";
wdn[5] = "FRI";
wdn[6] = "SAT";
//Statement that puts '0's in front of single minutes or seconds.
if (min<10)
{
min=zero+min;
}
if (secs<10)
{
secs=zero+secs;
}
//Statement that eliminates Metric Time
if (hrs>12)
{
hrs=eval(hrs - 12);
}
if (hrs>=0 && hrs<1)
{
hrs=12
}
//P.M. Statement
if (alsohrs>=12 && alsohrs<24)
{
ampm="P.M.";
}
//A.M. Statement
if (alsohrs<12 && alsohrs>=0)
{
ampm="A.M.";
}
tmp='<table width="60%" class="clock"><tr><td class="time" colspan="4">';
tmp+=hrs+'<span id="blinker">:</span>'+min;
tmp+='<font size="20"> '+ampm+'</font>';
tmp+='<tr><td><font size="-1">Month</font><br><b>'+month+'</b></td>';
tmp+='<td><font size="-1">Date</font><br><b>'+dayNumber+'</b></td>';
tmp+='<td><font size="-1">Day</font><br><b>'+wdn[weekday]+'</b></td>';
tmp+='<td><font size="-1">Year</font><br><b>'+year+'</b></td></tr></table>';
document.getElementById("clockgoeshere").innerHTML=tmp;
clocktime=setTimeout("time()","1000");
}
function blink() {
var obj = document.getElementById("blinker");
if (obj.style.visibility == "visible") {
obj.style.visibility="hidden";
}
else {
obj.style.visibility="visible";
}
eachsecond=setTimeout("blink()","500");
}
</SCRIPT>
</head>
<body onLoad="time(); blink();"> <center>
<div id="clockgoeshere"></div><p>
</center>
</body>
</body>
</html>

Charles

08-10-2004, 10:25 AM

Originally posted by szms
Any suggestion.

1) Start with valid HTML.

2) Don't use TABLEs for lay out.

3) Don't do any blinking.

4) Don't use the "eval()" function.

5) Don't use so many variables.

6) Don't use the MSIE corruption of JavaScript "element.innerHTML".

7) Do keep in mind that not everybody has JavaScript and not everybody's browser supports dynamic content. You'll want to "write()" all of the HTML relating to the date and time and then update the information. That way JavaScript free folks will not know that there is something wrong and think less of you. And browsers that do support JavaScript but not dynamic information will at least display the date and time the page was loaded.

8) You're better off using the native "Date.toDateString()" and "Date.toTimeString()" methods.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<style type="text/css">

</style>

</head>
<body>
<script type="text/javascript">

</script>
</body>
</html>

And then, if you want, you can overwrite those methods with your external script.