Clocks are one obvious application of timing loops.Below is the code for displaying a watch in a website using javascript
<html><head><title>A JavaScript Clock</title>
<script type = "text/javascript">
<!-- hide me from older browsers
var the_timeout;
function writeTime() {
// get a Date object
var today = new Date();
// ask the object for some information
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
// make the minutes and seconds look right
minutes = fixTime(minutes);
seconds = fixTime(seconds);
// put together the time string and write it out
var the_time = hours + ":" + minutes + ":" + seconds;
window.document.the_form.the_text.value = the_time;
// run this function again in a second
the_timeout = setTimeout('writeTime();',1000);
}
function fixTime(the_time) {
if (the_time < 10)
{
the_time = "0" + the_time;
}
return the_time;
}
// show me -->
</script>
</head>
<body onload="writeTime();">
The time is now:
<form name = "the_form">
<input type = "text" name = "the_text">
<input type = "button" value = "Start the Clock" onClick = "writeTime();">
<input type = "button" value = "Stop the Clock"
onClick = "clearTimeout(the_timeout);">
</form>
</body>
</html>
The heart of script is the writeTime() function.Every second, this function figures out the current time, puts the time in the text field, and then sets a time-out to run writeTime() a second later.
the script starts by declaring the variable that will hold the timeouts. Next comes the writeTime() function, which creates a new Date
object in (remember that a new Date object holds the current date and time). Line and the two lines following it get the hours, minutes, and seconds from the Date object using the getHours(), getMinutes(), and getSeconds() methods.
you’ll see that getMinutes() and getSeconds() each return an integer from 1 to 59. If it’s two minutes and three seconds past 9 AM, the variable hours in will be 9, minutes will be 2, and seconds will be 3. But putting these numbers together to display the time would create the string 9:2:3 instead of 9:02:03. Line takes care of this little problem by sending the minutes and seconds variables to a function I’ve written called fixTime(). The fixTime() function in takes a number as its parameter and puts 0 before the number if it is less than 10 (so 2 becomes 02). Make sure you understand how the fixTime() and writeTime() functions work together.
Once fixTime() fixes the minutes and the seconds by inserting zero where appropriate, creates the time string, and writes it into the text box. Finally, sets the time-out that will call writeTime() again in one second. When writeTime() is called again, it creates a new Date object, gets the information out of it, fixes the minutes and seconds if necessary, writes the new time into the text box, and sets the time-out again. The whole process starts when a visitor clicks the Start the Clock button and ends when the visitor clicks the Stop the Clock button, which cancels the most recently set time-out.
No comments:
Post a Comment