Out putting time and date using JavaScript.

@szmsAug 09.2004

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”>
<!–
Stamp = new Date();
document.write(‘<B>Todays date:</b> ‘ ” + (Stamp.getMonth() + 1) +”/”+Stamp.getDate()+ “/”+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>Todays Time:</b> ‘ + Hours + “:” + Mins + Time + ”);

//–>
</SCRIPT>

to post a comment

HTML

10 Comments(s) _↴

@DaveSWAug 09.2004 — #http://www.w3schools.com/js/js_whereto.asp and scroll down to external. That should help you.

@MstrBobAug 09.2004 — #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:

<i>
 </i>&lt;script type="text/javascript" src="datetime.js"&gt;&lt;/script&gt;

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

@DaveSWAug 09.2004 — #well maybe it is best to have the solutions on the thread just in case the external links move...

@szmsauthorAug 09.2004 — #So now I kept the following code in a file named date_time.js

<i>
 </i>function datetime()
 {
 Stamp = new Date();
 
 document.write('&lt;b&gt;Date: &lt;/b&gt;' + (Stamp.getDate()) +"/"+(Stamp.getMonth() + 1)+ "/"+Stamp.getYear() + ' &lt;br&gt; ');
 
 var Hours;
 var Mins;
 var Time;
 Hours = Stamp.getHours();
 if (Hours &gt;= 12) {
 Time = " P.M.";
 }
 else {
 Time = " A.M.";
 }
 
 if (Hours &gt; 12) {
 Hours -= 12;
 }
 
 if (Hours == 0) {
 Hours = 12;
 }
 
 Mins = Stamp.getMinutes();
 
 if (Mins &lt; 10) {
 Mins = "0" + Mins;
 }
 
 document.write('&lt;b&gt;Time:&lt;/b&gt; ' + Hours + ":" + Mins + Time + '');
 }

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

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

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.

@MstrBobAug 09.2004 — #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.

@szmsauthorAug 09.2004 — #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.

@MstrBobAug 09.2004 — #Perhaps something like:

[SIZE=1]

<i>
 </i>document.write("&lt;form id="timeform" action=""&gt;&lt;input type="text" size="20" name="date"&gt;&lt;br&gt;&lt;input type="text" size="20" name="time"&gt;&lt;/form&gt;");
 function datetime()
 {
 Stamp = new Date();
 
 var Hours;
 var Mins;
 var Time;
 Hours = Stamp.getHours();
 if (Hours &gt;= 12) {
 Time = " P.M.";
 }
 else {
 Time = " A.M.";
 }
 
 if (Hours &gt; 12) {
 Hours -= 12;
 }
 
 if (Hours == 0) {
 Hours = 12;
 }
 
 Mins = Stamp.getMinutes();
 
 if (Mins &lt; 10) {
 Mins = "0" + Mins;
 }
 
 Secs = Stamp.getSeconds();
 
 if (Secs &lt; 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);
 }

[/SIZE]

@CharlesAug 09.2004 — #[i]In a separate file:[/i]

[font=monospace]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)[/font]

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

[font=monospace]<script src="dateTime.js" type="text/javascript"></script>[/font]

@szmsauthorAug 10.2004 — #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.

<i>
 </i>&lt;HTML&gt;
 &lt;HEAD&gt;
 &lt;title&gt;DCScript© Digital Clock&lt;/title&gt;
 &lt;style&gt;
 .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}
 &lt;/style&gt;
 &lt;SCRIPT LANGUAGE="JavaScript"&gt;
 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&lt;10)
 {
 min=zero+min;
 }
 if (secs&lt;10)
 {
 secs=zero+secs;
 }
 //Statement that eliminates Metric Time
 if (hrs&gt;12)
 {
 hrs=eval(hrs - 12);
 }
 if (hrs&gt;=0 &amp;&amp; hrs&lt;1)
 {
 hrs=12
 }
 //P.M. Statement
 if (alsohrs&gt;=12 &amp;&amp; alsohrs&lt;24)
 {
 ampm="P.M.";
 }
 //A.M. Statement
 if (alsohrs&lt;12 &amp;&amp; alsohrs&gt;=0)
 {
 ampm="A.M.";
 }
 tmp='&lt;table width="60%" class="clock"&gt;&lt;tr&gt;&lt;td class="time" colspan="4"&gt;';
 tmp+=hrs+'&lt;span id="blinker"&gt;:&lt;/span&gt;'+min;
 tmp+='&lt;font size="20"&gt; '+ampm+'&lt;/font&gt;';
 tmp+='&lt;tr&gt;&lt;td&gt;&lt;font size="-1"&gt;Month&lt;/font&gt;&lt;br&gt;&lt;b&gt;'+month+'&lt;/b&gt;&lt;/td&gt;';
 tmp+='&lt;td&gt;&lt;font size="-1"&gt;Date&lt;/font&gt;&lt;br&gt;&lt;b&gt;'+dayNumber+'&lt;/b&gt;&lt;/td&gt;';
 tmp+='&lt;td&gt;&lt;font size="-1"&gt;Day&lt;/font&gt;&lt;br&gt;&lt;b&gt;'+wdn[weekday]+'&lt;/b&gt;&lt;/td&gt;';
 tmp+='&lt;td&gt;&lt;font size="-1"&gt;Year&lt;/font&gt;&lt;br&gt;&lt;b&gt;'+year+'&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';
 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");
 }
 &lt;/SCRIPT&gt;
 &lt;/head&gt;
 &lt;body onLoad="time(); blink();"&gt; &lt;center&gt;
 &lt;div id="clockgoeshere"&gt;&lt;/div&gt;&lt;p&gt;
 &lt;/center&gt;
 &lt;/body&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@CharlesAug 10.2004 — #[i]Originally posted by szms [/i]

[B]Any suggestion.[/B][/QUOTE]

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.

[font=monospace]<!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>[/font]

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

Also in #HTML _↴

[RESOLVED] Getting form to submit on ENTER Invisible Bullets and Spacing Help!Links not working

Success!

Help @szms spread the word by sharing this article on Twitter...

Tweet This

Out putting time and date using JavaScript.

10 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Out putting time and date using JavaScript.

10 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #HTML _↴