Can someone explain this JavaScript Real-time clock to me?
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
h=checkTime(h);
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
I just don't quite understand these two lines:
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
Can someone explain this in words? What does getElemen开发者_C百科tById('txt'), innerHTML, and setTimeout('startTime()',500) do?
See the documentation.
getElementByIdgets an HTML DOM element with the given ID- The
innerHTMLproperty of a DOM element specifies the element's HTML The
setTimeoutmethod runs a function after a specified number of milliseconds
Note that this code is extremely bad practice; never pass a string tosetTimeout.
It should besetTimeout(startTime, 500), passing the function itself.
You can even pass an anonymous function:setTimeout(function() { alert('Five seconds later...'); }, 5000);
The first line gets the element on the page that has an id attribute of txt (in this case the <div>) and sets the content (innerHTML) to a string with the formatted time.
The second line sets up a timer in JavaScript to call the same function again after 500 milliseconds. In essence the next time to update the clock. Note this is every half second. It should probably have a value of 1000.
Every HTML element can be assigned an id attribute, that uniquely defines it.
The code
document.getElementById('txt')
returns a reference to the DOM object that represents some HTML element with the id txt.
The innerHTML property of that object represents the HTML inside that element. If you assign a string to that property, this string replaces the HTML that used to be there
The setTimeout function sets a timeout, such that it will execute a supplied function once the supplied timeout (given in milliseconds) has expire.
In your case
setTimeout('startTime()',500);
will execute the function startTime in 500 milliseconds.
setTimeout returns an identified that you could use to cancel your request at a later time.
You can find more about getElementById and setTimeout at MDN or with a bit of judicious Googling (or Binging or Lycosing or whatever)
document.getElementById('txt') tells the browser you want to manipulate the element with an id of "txt" (in this case, an empty div).
The .innerHTML part means you simply want to change the HTML inside of the div to a certain value which is specified next.
setTimeout('startTime()',500) is used to execute a function after a certain amount of time. The first parameter (startTime()) is which function you want to execute, and the second parameter (500) means how many milliseconds to wait before executing the function. When the setTimeout calls the function that it is in, it means the page will keep looping the function every 500 milliseconds (or whatever number of milliseconds is specified)
If you look at the HTML, you'll see that there's a <div id="txt">. The getElementById('txt') method does exactly what it sounds like, it grabs the <div> that has the ID txt. The innerHTML property will get what's inside the <div> and will let you change what's in it as well.
setTimeout() is a method that allows you to delay the execution of a particular function. It accepts a function and a time in milliseconds. In this case, after 500 milliseconds the startTime() function will be called. My guess is that it's in there to allow the entire DOM tree to load before it runs the function. I read the code wrong. The setTimeout() call is used to recursively call startTime() but inserts a 500ms delay so the browser won't freeze trying to run an infinite loop.
加载中,请稍侯......
精彩评论