| Table of Contents | Previous Next |
12.3 Dynamic date and time on the Web12.3.1 Implementation of clocks with different time formatsOne simple implementation of a clock is shown in the following code:
Example: ex12-11.htm - Simplest Clock 01
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Simplest Clock 01 - ex1211.htm</title></head>
6: <body onload="simplestClock()">
7: <h2>A Simple Clock Implementation<h2><br />
8: <form name="form01" action="">
9: <input type="text" name="clock01" id="clock01" value="cSt" size="40" />
10: </form>
11: <script>
12: function simplestClock()
13: {
14: dateObj = new Date()
15: document.form01.clock01.value=dateObj
16: setTimeout("simplestClock()",1000)
17: }
18: </script>
19: </body>
20: </html>
This page opens a text input area with name clock01 and an initial value cSt (line 9). When the page is loaded, the onload event defined in line 6 activates the script function simplestClock(). Inside this function (lines 1416), a date object is created and the time string in the date object is output to the element with name clock01. The setTimeout() function used in line 16 is an important function. It is used to call the simplestClock()for every 1,000 time units (i.e., every 1 second). This way, the clock can be continuously updated. We used an old document access method (i.e., an old DOM) here. The input text in line 9 is embedded inside a form element with name form01 (lines 810). This name is used to access the value of the input text (line 15). One advantage of this structure is that this page will run on almost all browsers including some older versions. However, with the absence of CSS style, this clock is not very impressive. A modified version is listed in ex12-12.htm.
Example: ex12-12.htm - Simplest Clock 02
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Simplest Clock 02 - ex1212.htm </title></head>
6: <style>
7: .mSt{font-family:arial;font-size:16pt;color:#ffff00;font-weight:bold }
8: </style>
9: <body style="background:#000088;text-align:center" onload="Clock02()">
10:
11: <div class="mSt"><br />A Simple Clock Implementation II<br /><br /><br />
12: <div id="clockL"></div>
13: </div>
14:
15: <script>
16: function Clock02()
17: {
18: dateObj = new Date()
19: document.getElementById("clockL").innerHTML=dateObj
20: setTimeout("Clock02()",1000)
21: }
22: </script>
23: </body>
24: </html>
The main characteristics of this page are the use of CSS style and the getElementById feature recommended by the W3C authority. We define a division with id="clockL" (clock location) in line 12. The getElementById in line 19 can use the identity to access this element anywhere in the document. The running of the clock is powered by the setTimeout()function in line 20. A screen shot of this page is shown in Fig. 12.12. Figure 12.12. ex12-12.htm
Sometimes, the time string stored inside a date object may be too long and not very convenient to use. With the basic member functions of the date object, we can handle some popular time formats in a nice way. The next example, ex12-13.htm, uses the built-in time functions and displays "Military Time," "Digital Time," and "Standard Time" on the screen.
Example: ex12-13.htm - Clock
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Clock - ex1213.htm</title></head>
6: <style> .mSt{font-size:16pt;color:#ffff00;font-weight:bold } </style>
7: <body style="background:#000088;text-align:center;font-family:arial"
8: onload="Clock03()">
9: <div class="mSt" style="font-size:20pt;color:#00ffff" align="center">
10: <br />Some Popular Time Formats<br />For A Running Clock<br /><br />
11: <table class="mSt" cellspacing="10">
12: <tr><td>Military Time :</td><td><div id="mTimeL"></div></td></tr>
13: <tr><td>Digital Time:</td><td> <div id="dTimeL"></div></td></tr>
14: <tr><td>Standard Time:</td><td> <div id="sTimeL"></div></td></tr>
15: </table>
16: </div>
17: <script>
18: function Clock03()
19: {
20: dateObj = new Date()
21: cHours = dateObj.getHours()
22: cMinutes = dateObj.getMinutes()
23: cSeconds = dateObj.getSeconds()
24:
25: militaryTimeSt= ((cHours < 10)? '0':'')+cHours+':'+
26: ((cMinutes < 10)? '0':'')+cMinutes
27:
28: digitalTimeSt= ((cHours < 10)? '0':'')+cHours+':'+
29: ((cMinutes < 10)? '0':'')+cMinutes+':'+((cSeconds < 10)? '0':'')+
30: cSeconds
31:
32: standardTimeSt= ((cHours==0 || cHours==12) ? '12': cHours %12)+':'+
33: ((cMinutes < 10)? '0':'')+cMinutes+':'+((cSeconds < 10)? '0':'')+
34: cSeconds+((cHours < 12) ? ' AM':' PM')
35:
36: document.getElementById("mTimeL").innerHTML=militaryTimeSt
37: document.getElementById("dTimeL").innerHTML=digitalTimeSt
38: document.getElementById("sTimeL").innerHTML=standardTimeSt
39: setTimeout("Clock03()",1000)
40: }
41: </script>
42: </body>
43: </html>
After the heading message in line 10, we create a 3 x 2 table. The first column of this table contains the messages "Military Time," "Digital Time," and "Standard Time." The second column of the table defines the locations mTimeL for the military time, dTimeL for the digital time, and sTimeL for the standard time as indicated in lines 1214. Inside the function Clock03() (see lines 1840), a date object is defined in line 20 to get the current hours, minutes, and seconds (see lines 2123). These values are used to build the required military, digital, and standard time strings. The construction of the military time string militaryTimeSt begins in line 25. If the current hour value cHours is less than 10, we add an additional character "0" to the string. After the string concatenation with cHours at the end of line 25, we have a military time format for the hour. The statement ((cHours < 10)? '0':'') is sometimes called the "Ternary" conditional operator originally from the C/C++ language. The construction of the digital time string (see lines 2830) is similar to the military case. Finally, the standard time string in line 32 has the expression ((cHours==0 || cHours==12) ? '12': cHours %12) This expression can be read as follows: if cHours equals 0 or 12, return 12, otherwise return the remainder of cHours divided by 12 (i.e., cHours %12). This expression guarantees that the range of cHours lies between 0 and 12. At the end of line 34, the ternary operator is again used to determine AM or PM time. The time strings militaryTimeSt, digitalTimeSt, and standardTimeSt are output to the specific locations as stated in lines 3638. A screen shot of the page in action is shown in Fig. 12.13. Figure 12.13. ex12-13.htm
12.3.2 A digital clock with animated imagesWith the image skills you have learned in previous chapters, you can build a digital clock with a more realistic scene. The clock that we are going to develop contains 11 images representing the 10 digits and one semi-colon. Obviously the images will change when the clock is updated. First, a table represented as a string to accommodate the digital clock images is needed. This string can be placed anywhere in the page using the output function document.write() or the document.getElementById("location") function. Once the clock is displayed on the screen, an image animation technique is used to update the clock. The main page of the clock is listed in ex12-14.htm.
Example: ex12-14.htm - A Digital Clock With Animated Images
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>A Digital Clock With Images - ex1214.htm</title></head>
6: <style> .mSt{font-size:16pt;color:#ffff00;font-weight:bold } </style>
7: <script src="date.js"></script>
8: <script src="imgclock.js"></script>
9: <body style="background:#000088;text-align:center;font-family:arial">
10: <div align="center"><br />
11: <div id="myHeader"></div><br /><br />
12: <div class="mSt">
13: A Digital Clock With Animated Images<br /><br /></div>
14: <div id="clockL"></div>
15: </div>
16: <script>
17: document.getElementById("myHeader").innerHTML=disHeader()
18: document.getElementById("clockL").innerHTML=showClock()
19: showTime()
20: </script>
21: </body>
22: </html>
This page includes two script program files, date.js and imgclock.js. The date.js program file is the same as that used in section 12.2. It provides the disHeader()function to be called in line 17 for generating the header. The statement in line 14 declares a location prepared for the clock. The showClock()function at the end of line 18 is defined inside the file imgclock.js. This function returns an XHTML language string (table) representing a clock and is displayed at the clock location. Finally, the showTime()function is used to animate the images while the clock is updated. The first part of the ECMAScript imgclock.js is listed as follows:
Example: imgclock.js - The ECMAScript Clock With Animated Images (Part One)
1: img_suf="dc.gif"
2:
3: function showClock()
4: {
5: digits= new Array()
6: for (ii=0;ii<=9;ii++)
7: {
8: digits[ii]=ii+img_suf
9: }
10: clockSt ="<table border=2 cellPadding=0 cellSpacing=0 width=125>"+
11: "<tbody><tr><td align=left bgColor=#000044 width=120>"+
12: "<img id='h1' src='0dc.gif' border='0'"+
13: " alt='pic' width='15' height='23' />"+
14: "<img id='h2' src='0dc.gif' border='0'"+
15: " alt='pic' width='15' height='23' />"+
16: "<img SRC='mdc.gif' border='0' alt='pic' width=13 height=23>"+
17: "<img id='m1' src='0dc.gif' border='0'"+
18: " alt='pic' width='15' height='23' />"+
19: "<img id='m2' src='0dc.gif' border='0'"+
20: " alt='pic' width='15' height='23' />"+
21: "<img src='mdc.gif' border='0' alt='pic' width=13 height=23>"+
22: "<img id='s1' src='0dc.gif' border='0'"+
23: " alt='pic' width='15' height='23' />"+
24: "<img id='s2' src='0dc.gif' border='0'"+
25: " alt='pic' width='15' height='23' />"+
26: "</td></tr></tbody></table>"
27: return(clockSt)
28: }
29:
After the global variable for the image suffix img_suf in line 1, the first function showClock()defines an array to remember the images shown in Fig. 12.14. We use 10 array elements to represent each picture, i.e., digits[0]=0dc.gif, digits[1]=1dc.gif, ... , digits[9]=9dc.gif Figure 12.14. Pictures for a digital clock
This is one of the techniques used to compose image source files by using script. The remaining part of this function generates a string clockSt representing a digital clock. The clock string clockSt in lines 1026 is a string of an XHTML table. This table contains only one row and one column with eight images. Each component of hours, minutes, and seconds is represented by two images and separated by an image of the semi-colon (i.e., mdc.gif). All images have a unique identity so that updating can be performed easily. This string is returned to the caller (line 27) and can be placed anywhere on the page. The second part of the ECMAScript imgclock.js is listed below:
Listing: Continuation Of The ECMAScript imgclock.js (Part Two)
30: dTime = 0
31:
32: function showTime(){
33: now= new Date()
34: sTime = now.getTime() + dTime
35: now.setTime(sTime)
36:
37: var hours = now.getHours()
38: var minutes = now.getMinutes()
39: var seconds = now.getSeconds()
40:
41: document.getElementById("s1").src=digits[Math.floor(seconds/10)]
42: document.getElementById("s2").src=digits[(seconds%10)]
43: document.getElementById("m1").src=digits[Math.floor(minutes/10)]
44: document.getElementById("m2").src=digits[(minutes%10)]
45: document.getElementById("h1").src=digits[Math.floor(hours/10)]
46: document.getElementById("h2").src=digits[(hours%10)]
47: setTimeout("showTime()",1000)
48: }
Once the clock is displayed on the screen, this function can be called to update the images of the clock. First, we obtain the current time in line 33. This time can be adjusted by the variable dTime in line 34 to form a new show time variable sTime. The variable dTime is useful if we want to display the time in a different time zone. After the show time variable sTime is set in line 35, new hours, minutes, and seconds are evaluated. These values are used to change the associated images accordingly (see lines 4146). For example, the value in line 41 digits[Math.floor(seconds/10)] represents the image of the tenth digit of the "seconds." This image is used to update the clock table with id="s1". The statement in line 47 guarantees that the clock is updated every second. A screen shot is shown in Fig. 12.15. Figure 12.15. ex12-14.htm
12.3.3 A running countdown to ChristmasYou must have seen a countdown somewhere on the Web and wondered how to do it. You will see in this section that the techniques involved are quite simple. We could use a countdown to the open day of a new shopping mall, a big discount day, anniversary, or a specific celebration day. Our next development shows how to write a page to perform a countdown to the next Christmas Day. This page displays the date of next Christmas first and then performs the days, hours, minutes, and seconds of the countdown. The countdown information is updated every second. If Christmas passes, the program will use the next Christmas Day and start a new countdown. The program code of this page is in ex12-15.htm.
Example: ex12-15.htm - Countdown To Christmas
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>CountDown To Christmas -- ex1215.htm</title></head>
6: <style> .mSt{font-size:16pt;color:#ffff00;font-weight:bold } </style>
7: <body style="background:#000088;text-align:center;font-family:arial"
8: onload="countXmax()">
9: <div class="mSt" style="color:#00ffff;font-size:20pt" align="center">
10: <br />CountDown To Next Christmas<br /><br />
11: <span id="xmaxL" class="mSt"></span><br /><br />
12: <table class="mSt" width="250" >
13: <tr><td>Days</td><td><span id="dayL" class="mSt"></span></td></tr>
14: <tr><td>Hours</td><td><span id="HoursL" class="mSt"></span></td></tr>
15: <tr><td>Minutes</td><td><span id="MinutesL" class="mSt"></span></td></tr>
16: <tr><td>Seconds</td><td><span id="SecondsL" class="mSt"></span></td></tr>
17: </table>
18: </div>
19:
20: <script>
21: mDay = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday",
22: "Friday","Saturday")
23: function countXmax()
24: {
25: dateObj = new Date()
26: cYear = dateObj.getFullYear()
27: cHours = dateObj.getHours()
28: cMinutes = dateObj.getMinutes()
29: cSeconds = dateObj.getSeconds()
30:
31: xmaxObj = new Date()
32: xmaxObj.setMonth(11)
33: xmaxObj.setDate(24)
34: xmaxObj.setHours(23)
35: xmaxObj.setMinutes(59)
36: xmaxObj.setSeconds(59)
37:
38: cTimeDiff = (xmaxObj.getTime() - dateObj.getTime())
39: if (cTimeDiff < 0)
40: {
41: xmaxObj.setFullYear(cYear+1)
42: cTimeDiff = (xmaxObj.getTime() - dateObj.getTime())
43: }
44: xmaxSt=mDay[xmaxObj.getDay()+1]+' December '+
45: ' 25 '+xmaxObj.getFullYear()
46: cDays = Math.floor(cTimeDiff/(1000*60*60*24))
47:
48: document.getElementById("xmaxL").innerHTML=xmaxSt
49: document.getElementById("dayL").innerHTML=cDays
50: document.getElementById("HoursL").innerHTML= 23 - cHours
51: document.getElementById("MinutesL").innerHTML= 59 - cMinutes
52: document.getElementById("SecondsL").innerHTML= 60 - cSeconds
53: setTimeout("countXmax()",1000)
54: }
55: </script>
56: </body>
57: </html>
Line 10 is to display the message "CountDown To Next Christmas." Line 11 is the location for the date of next Christmas. Lines 1217 are used to construct a table for the countdown days, hours, minutes, and seconds. Inside the script function countXmax() (see lines 2354), a date object dateObj is defined to get the current year cYear, hours cHours, minutes cMinutes, and seconeds cSeconds. In lines 3136, a Christmas date object xmaxObj is used to set the date and time of Christmas, i.e., "23:59:59," on December 24 of the current year. A comparison of the time unit of Christmas against the current date and time takes place in line 38. If the time difference is negative, we know that the current Christmas Day has passed. The coding in lines 4142 is then used to get the date of next Christmas. The time string for next Christmas is then output to the specific location specified in line 48. The cDays variable in line 46 is to store the number of days to Christmas. Once we have the value of cDays, the countdown action is a simple process as indicated in lines 4952. A screen shot of this page at work is shown in Fig. 12.16. Figure 12.16. ex12-15.htm
12.3.4 Countdown with animated imagesTo use animated images for the countdown is straightforward. All we need is to replace the countdown number with individual digits. With the digit pictures given in Fig. 12.14, we can modify the function countXmax()in ex12-15.htm to include animated images. This new example is called ex12-16.htm. The new countMax() function is listed in ex12-10.txt and a screen shot of ex12-16.htm is shown in Fig. 12.17.
Listing: ex12-10.txt - Code Fragment For ex1216.htm
1: function countXmax()
2: {
3: dateObj = new Date()
4: cYear = dateObj.getFullYear()
5: cHours = dateObj.getHours()
6: cMinutes = dateObj.getMinutes()
7: cSeconds = dateObj.getSeconds()
8:
9: xmaxObj = new Date()
10: xmaxObj.setMonth(11)
11: xmaxObj.setDate(24)
12: xmaxObj.setHours(23)
13: xmaxObj.setMinutes(59)
14: xmaxObj.setSeconds(59)
15:
16: cTimeDiff = (xmaxObj.getTime() - dateObj.getTime())
17: if (cTimeDiff < 0)
18: {
19: xmaxObj.setFullYear(cYear+1)
20: cTimeDiff = (xmaxObj.getTime() - dateObj.getTime())
21: }
22: xmaxSt=mDay[xmaxObj.getDay()+1]+' December '+
23: ' 25 '+xmaxObj.getFullYear()
24: cDays = Math.floor(cTimeDiff/(1000*60*60*24))
25:
26: tmp1 = Math.floor(cDays/100)
27: tmp = cDays (tmp1 * 100)
28: daySt = '<img src="'+tmp1+'dc.gif" + border="0" '+
29: ' alt="pic" width="15" height="23" />'+
30: '<img src="'+(Math.floor(tmp/10))+'dc.gif" + border="0" '+
31: ' alt="pic" width="15" height="23" />'+
32: '<img src="'+(Math.floor(tmp % 10))+'dc.gif" + border="0" '+
33: ' alt="pic" width="15" height="23" />'
34:
35: tmp = 23-cHours
36: hourSt = '<img src="'+(Math.floor(tmp/10))+'dc.gif" + border="0" '+
37: ' alt="pic" width="15" height="23" />'+
38: '<img src="'+(Math.floor(tmp % 10))+'dc.gif" + border="0" '+
39: ' alt="pic" width="15" height="23" />'
40:
41: tmp = 59 - cMinutes
42: minuteSt = '<img src="'+(Math.floor(tmp/10))+'dc.gif" + border="0" '+
43: ' alt="pic" width="15" height="23" />'+
44: '<img src="'+(Math.floor(tmp % 10))+'dc.gif" + border="0" '+
45: ' alt="pic" width="15" height="23" />'
46:
47: tmp = 60 - cSeconds
48: secondSt = '<img src="'+(Math.floor(tmp/10))+'dc.gif" + border="0" '+
49: ' alt="pic" width="15" height="23" />'+
50: '<img src="'+(Math.floor(tmp % 10))+'dc.gif" + border="0" '+
51: ' alt="pic" width="15" height="23" />'
52:
53: document.getElementById("xmaxL").innerHTML=xmaxSt
54: document.getElementById("dayL").innerHTML= daySt
55: document.getElementById("HoursL").innerHTML= hourSt
56: document.getElementById("MinutesL").innerHTML= minuteSt
57: document.getElementById("SecondsL").innerHTML= secondSt
58: setTimeout("countXmax()",1000)
59: }
Figure 12.17. ex12-16.htm
This function now outputs the images rather than the numeric values. After we obtain the cDay value in line 24, a string daySt is used to get the image representation of cDay. This string is used in line 54 to return to the caller. The hours, minutes and seconds are returned in lines 5558. 12.3.5 A question timerCountdown timers have many applications on the Web. They provide essential timing control for slide shows, product or catalog advertisements, or even online auction sites with auction hammers. They also are an integral part of many online tests, examinations, and question-related data collections. For obvious reasons, our implementation of a question timer is a simple one. Our page displays one question at one time. The question is simple and expects a yes or no answer. The yes or no is implemented as two radio boxes so that only one answer can be checked. There is a 5 second countdown timer attached to each question. When the time is up, the page will display another question. The coding of this page is given in ex12-17.htm.
Example: ex12-17.htm - A Question Timer
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>A Question Timer - ex1217.htm</title></head>
6: <style>
7: .mSt{font-size:16pt;color:#ffff00;font-weight:bold }
8: .rbSt{width:35px;height:35px;background:#aaccaa}
9: </style>
10: <body style="background:#000088;font-family:Arial;text-align:center"
11: onload="countDown()" >
12: <div class="mSt" align="center"> A Question CountDown Timer
13: <br />Answer The Following Question Within 5 Seconds<br /><br /><br />
14: <div id="questL" class="mSt" style="background:#008800;width:450px;
15: height:200px"></div><br /><br /><br />
16: <div class="mSt">Count Down :    <span class="mSt"
17: id="countL">5</span></div>
18: </div>
19:
20: <script>
21: cDown=6
22: questFlag = 1
23: disFlag = 0
24: quest = new Array()
25: yesNoSt = '<form><table cellspacing="25"><tr class="mSt">'+
26: '<td><input type="radio" class="rbSt" checked id="rd01" name="rd" />'+
27: '  Yes</td><td><input type="radio" class="rbSt" id="rd01" '+
28: 'name="rd" />  No</td></tr></table></form>'
29:
30: quest[1]='Are We Alone In This Universe?<br /><br />'+yesNoSt
31: quest[2]='Do You Believe World War III Is Coming?<br /><br />'+yesNoSt
32: quest[3]='<span style="font-size:20pt"><br /><br />Thank You!</span>'
33: questLength=3
34:
35: function countDown()
36: {
37: cDown--
38: if (disFlag == 0) {
39: document.getElementById("questL").innerHTML="<br />"+quest[questFlag]
40: disFlag = 1
41: if (questFlag >= questLength) return(true)
42: }
43: if (cDown <= -1) {
44: questFlag++
45: disFlag = 0
46: cDown = 6
47: } else{
48: document.getElementById("countL").innerHTML=cDown
49: }
50: setTimeout("countDown()",1000)
51: }
52: </script>
53: </body>
54: </html
After the message heading "Answer The Following Question Within 5 Seconds" in line 13, we create an area called questL (question location) with dimension 450 x 200 pixels. This area is used to place our questions. Below this question area, a countdown feature using countL is declared in line 17 to display the countdown action. In the first part of the program (lines 2124), we have declared the following variables:
The yes or no string variable yesNoSt in line 25 defines two radio boxes, Yes and No, so that the user can select only one of them. The actual questions are input into lines 3031. As a simple demonstration, only two questions are defined. Each question has the yesNoSt (yes or no boxes) attached at the end. The final element of the question array (quest[3]) is actually a "Thank You" message to mark the end of all questions. When the function countdown()is activated, we decrease cDown by 1 (line 37) so that there are exactly 5 seconds to answer the question. If the question hasn't been displayed before (i.e., disFlag ==0), the statement in line 39 is used to display the question and set disFlag as true in line 40. If the displayed question is the last question, it stops the function and returns to the caller in line 41. The second half of the function (lines 4349) starts the actual countdown procedure. If the countdown is not negative (line 43), the countdown number is displayed as in line 48. If the countdown is a negative number, the next question is displayed (see line 44). In this case, you also need to reset disFlag as false in line 45 and assign the variable cDown=6 so that a new countdown can be started. Some screen shots of this page in action are shown in Figs 12.18 and 12.19. Figure 12.18. ex12-17.htm
Figure 12.19. Question timer
|
| Table of Contents | Previous Next |
