Let's first come to a final implementation: the main implementation idea is to use the JavaScript built-in object Date to get the current system time, and use the DOM method setInterval (code, time) to achieve real-time refresh. 1. simple Html page 1: & lt ;! DOCTYPEhtmlPUBLIC & quot;-// W3C/... first, a final implementation:
Main Implementation ideas: Use the JavaScript built-in object Date to get the current system time, and use the DOM method setInterval (code, time) to achieve real-time refresh.
1. A simple Html page
1:
2:
3:
4:
5:
6:Simple clock
7:
8:
9:
10:
11: 0000
12: Year
13: 00
14: Month
15: 00
16: Day
17:
18:
19: 00
20 ::
21: 00
22 ::
23: 00
24: Week
25: 1
26:
27:
28:
29:
2. Implementation of clock. js
1: var timer = null;
2: var aNow = null;
3: var g_oImgWeek = null;
4: var aWeekName = ["day", "one", "two", "three", "four", "five", "Six"];
5:
6: function setclock ()
7 :{
8: setInterval (checkSwitch, 1000 );
9 :};
10: function checkSwitch ()
11 :{
12: var year = document. getElementById ('Year ');
13: var month = document. getElementById ('month ');
14: var date = document. getElementById ('date ');
15: var hour = document. getElementById ('hour ');
16: var minute = document. getElementById ('minute ');
17: var second = document. getElementById ('second ');
18: var week = document. getElementById ('Week ');
19:
20: aNow = getTimeArray ();
21:
22: year. innerHTML = aNow [0];
23: month. innerHTML = aNow [1];
24: date. innerHTML = aNow [2];
25: hour. innerHTML = aNow [3];
26: if (aNow [4] <10 ){
27: minute. innerHTML = '0' + aNow [4];
28 :}
29: else {
30: minute. innerHTML = aNow [4];
31 :}
32: if (aNow [5] <10 ){
33: second. innerHTML = '0' + aNow [5];
34 :}
35: else {
36: second. innerHTML = aNow [5];
37 :}
38: week. innerHTML = aWeekName [aNow [6];
39:
40 :}
41:
42: function toDouble (iNum)
43 :{
44: if (iNum <10)
45 :{
46: return '0' + iNum;
47 :}
48: else
49 :{
50: return ''+ iNum;
51 :}
52 :}
53:
54: function getTimeArray ()
55 :{
56: var oDate = new Date ();
57: var aNumber = [];
58:
59: var iYear = oDate. getYear ();
60: var iMonth = oDate. getMonth ();
61: var iDay = oDate. getDate ();
62: var iHour = oDate. getHours ();
63: var iMin = oDate. getMinutes ();
64: var iSec = oDate. getSeconds ();
65: var iWeek = oDate. getDay ();
66:
67: if (iYear <1900)
68 :{
69: iYear ++ = 1900;
70 :}
71:
72: var str = (iYear) + toDouble (iMonth + 1) + toDouble (iDay) + toDouble (iHour) + toDouble (iMin) + toDouble (iSec) + ''+ iWeek;
73: var aChar = str. split ('');
74:
75: for (I = 0; I 76 :{
77: aNumber [I] = parseInt (aChar [I]);
78 :}
79: return aNumber;
80 :}
3. Introduce the clock. js file in Html
1: