Web Programming with html5, css, and JavaScript

622
Chapter 12
 
Canvas

---

The second and third statements in 
runClock
alter the web page’s display by disabling the 
Run 
Clock
button and enabling the 
Stop Clock
button. Disabling a button dims its text. Enabling it 
restores its text.
Once a click on the 
Run Clock
button activates the timer, 
updateDisplay
executes after 
each subsequent 0.2 second. It retrieves the web page’s current month and hour values and incre-
ments the hour value. When the hour reaches 23, the next hour becomes 0 and the month incre-
ments. When the month and hour reach 12 and 23, the next hour and month become 1 and 0, 
respectively, and the 
upDateDisplay
calls the 
stopClock
function.
The 
stopClock
function also executes if the user clicks the web page’s 
Stop Clock
button. 
This function calls the browser’s prewritten 
clearInterval
method to turn off the timer and 
stop the simulation. Then it disables the web page’s 
Stop Clock
button and enables the 
Run Clock
button—reversing the operations performed by the previous 
runClock
function.
FIGUre 12.23G 
JavaScript file for Solar Shadowing web page
function runClock() {
timer = window.setInterval(updateDisplay, 200); // 200 ms intervals 
form.elements["run"].disabled = "disabled"; 
form.elements["stop"].disabled = ""; 
} // end runClock 
function updateDisplay() { // after each interval 
var mo; // month number
var hr; // hour number 
var nextHr; // next hour as fraction of day 
mo = parseInt(form.elements["month"].value); 
hr = parseInt(form.elements["hour"].value); 
nextHr = (hr + 1) % 24; 
if (nextHr < hr) { 
nextHr = 0; 
mo += 1; 
if (mo > 12) { 
stopClock(form);
mo = 1; 
} 
form.elements["month"].value = mo; 
} 
form.elements["hour"].value = nextHr; 
showBehavior(form); 
} // end updateDisplay 
function stopClock() { 
window.clearInterval(timer); 
form.elements["stop"].disabled = "disabled"; 
form.elements["run"].disabled = ""; 
} // end stopClock