www.hitmill.com/ Link to HiTMilL home page
 

The Current Time
The Current Date
Back to JavaScript Scripts

 

Coding the Current Time and Date

The Current Time

The following code needs to be placed into the <HEAD> section of the HTML document to set up the clock running the current time:

<SCRIPT LANGUAGE="JavaScript">
<!--Hide
/*May be used if credited:
The HiTMilL
http://www.hitmill.com/programming/js/javascript.html*/
/*You may change value of, or remove bgcolor
from table cell*/
var gizmo;
function stopClock(){
clearTimeout(gizmo);
}
function yourClock(){
var nd = new Date();
var h, m, s;
var time=" ";
h = nd.getHours();
m = nd.getMinutes();
s = nd.getSeconds();
if (s <=9) s="0" + s;
if (m <=9) m="0" + m;
if (h <=9) h="0" + h;
time+=h+":"+m+":"+s;
document.the_clock.the_time.value=time;
gizmo=setTimeout("yourClock()",1000);
}
// Stop hiding -->
</SCRIPT>


 
The following should all be coded as a single line inside the body element, inside the <BODY> "tag":

<BODY BGCOLOR="white" onLoad="yourClock()", onUnload="stopClock(); return true">

 
The following code goes into the BODY section of the HTML document where you want your clock to be. Change the table background color to give your clock a colored background.

<TABLE ID="tabletwo"><TR><TD>
<FORM NAME="the_clock">
<INPUT TYPE="text" NAME="the_time" SIZE="13">
</FORM></TD></TR></TABLE>

 

The Current Date

 
Current Date Script
And Code

Lines beginning with "var" or "document" need to be a continuous line of coding; the lines were broken to display on the Web page. Commas separate the variables in the list such as days of the week or months of the year.  Semicolons indicate where a single line of coding should end. (OK to use the text editor on your computer and paste the code into your HTML document.)
 

<SCRIPT LANGUAGE="JavaScript">
<!--// Hide from old browsers
var dayNames = new Array("Sunday","Monday","Tuesday",
    "Wednesday","Thursday","Friday","Saturday");
var monthNames=new Array("January","February","March","April","May",
    "June","July","August","September","October","November","December");
var now = newDate( );
document.write(dayNames[now.getDay()]+", "+monthNames[now.getMonth()]
    +" "+now.getDate() + ", " + "2002")
// stop hiding -->
</SCRIPT>


 

This is the same script I used for the date displayed at the top of this page under the top index. Notice in the code, that the year is hard coded. If you place the code into a single external file, you only have to change the hard-coded year, once a year on early January first, instead of changing the date on each page in your web site. :)

The script should be placed into a table data cell where you want the date to appear. (If positioning the table with style sheet positioning you will need to give the table a unique identifier name:
<TABLE ID="table3">, for example.)
var dayNames=new Array() has each day of the week in quotes and separated with only a comma and no spaces.
var monthNames = new Array() is set up similarly.
Date() is a JavaScript built-in method. var now = new Date() refers to that built-in method. The method is passed to the variable named now. document.write( ) is a JavaScript method; it is one of the first ones you will learn about if you have not already conquered this one. Everything between the parentheses can be written into the document if it is in quotation marks (single or double). The values of actual variables are not in quotes. document.write( ) is lower case. JavaScript is case-sensistive.

You have my permission to cut and paste this date script into your Web pages. Place it wherever you would like that date to appear. Code any formatting you like, before the JavaScript and close the formatting after the scripting.

E-mail Us!
 
Updated 4 January 2013
© hitmill.com
All Rights Reserved