RaysWebClass.Com

Lesson 59:   JScript Clock

 Time
To display a "Ticking" clock you need to run your JScript code over and over again so the clock will continually update itself. Try the follow code:
<html>
<head>
  <title>Clock</title>
<script>
function Clock()
{
  date = new Date()
  document.getElementById("time").innerHTML = date
  setTimeout("Clock()",1000)
}
</script>
</head>
<body onLoad='Clock()'>
<span id='time'>Time</span>
<body/>
</html>

Where the JScript function Clock() runs itself every second (1000 milliseconds.) The setTimeout command does this. The function also collects the Date() in the variable date and writes it to the span named Time using innerHTML command.

The following functions will help to extract parts of the Date():
date = new Date()

dd = ""+date.getDay()
mm = ""+date.getMonth()
yy = ""+date.getYear()

hh = ""+date.getHours()
nn = ""+date.getMinutes()
ss = ""+date.getSeconds()
Note Day, Month, and Year are singular and Hours, Minutes, and Seconds are plural. Also note by adding ""+ before each date function this renders the integers in a string variable.
You can now reconstruct the date and time as follows:
if (dd.length==1) dd = "0" + dd;
if (mm.length==1) mm = "0" + mm;

if (hh.length==1) hh = "0" + hh;
if (nn.length==1) nn = "0" + nn;
if (ss.length==1) ss = "0" + ss;

today = dd+"/"+mm+"/"+yy+" "+hh+":"+nn+":"+ss
The if statements put the place holder 0's back in front of single digit numbers.

The following function will convert a decimal number (0-9) to binary:
function binary(d)
{
  b = ""
  if (d=="0") b = "0000"
  if (d=="1") b = "0001"
  if (d=="2") b = "0010"
  if (d=="3") b = "0011"
  if (d=="4") b = "0100"
  if (d=="5") b = "0101"
  if (d=="6") b = "0110"
  if (d=="7") b = "0111"
  if (d=="8") b = "1000"
  if (d=="9") b = "1001"
  return b
}
And this code will display the binary of the last digit of the seconds in binary:

is off (or "0")
is on (or "1")
b = binary(ss.substring(1,2))
c = b.substring(0,1)
if (c=="0") document.getElementById("imgS4").src="off.gif"
if (c=="1") document.getElementById("imgS4").src="on.gif"
c = b.substring(1,2)
if (c=="0") document.getElementById("imgS3").src="off.gif"
if (c=="1") document.getElementById("imgS3").src="on.gif"
c = b.substring(2,3)
if (c=="0") document.getElementById("imgS2").src="off.gif"
if (c=="1") document.getElementById("imgS2").src="on.gif"
c = b.substring(3,4)
if (c=="0") document.getElementById("imgS1").src="off.gif"
if (c=="1") document.getElementById("imgS1").src="on.gif"
Note the substring command. The syntax for this command is different from ASP the first number is the starting location (JScript starts with location "0") and the second number is the ending location "+1" e.g. To collect the first letter in the string q you would do: q.substring(0,1)

The results look like this:   ()

8 (imgS4)
4 (imgS3)
2 (imgS2)
1 (imgS1)


Web Page Design: Exercise 59

Create a binary clock. Of course you know there is one already on this site but try it on your own!

Save this file as JScript59.html in the JScript folder.