JS 显示时钟
1，只用JavaScript显示时钟图：如下：
后台代码如下：
代码
1 设置显示一个时间
2 ；
3 代码如下：
4
5
6 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7 <html xmlns="http://www.w3.org/1999/xhtml">
8 <head>
9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10 <title>显示时间</title>
11 <script language="javascript">
12 var timer = null;
13 //显示数字图片
14
15 function displayClock(num)
16 {
17 var dig = parseInt(num/10);
18 var timetag = "<img src='" + dig + ".jpg'>";
19 dig = num%10;
20 timetag += "<img src='" + dig + ".jpg'>";
21 return timetag;
22
23 }
24 //停止计时
25
26 function stopClock()
27 {
28 clearTimeout(timer);
29 }
30 //开始计时
31
32 function startClock()
33 {
34 var time = new Date();
35 // 获取时间
36
37 var hours = displayClock(time.getHours()) + ":";
38 var minutes = displayClock(time.getMinutes()) + ":";
39 var seconds = displayClock(time.getSeconds()) ;
40 // 显示时间
41 show.innerHTML = hours + minutes + seconds ;
42 timer = setTimeout("startClock()",1000);
43
44
45 }
46
47
48 </script>
49
50
51
52
53 </head>
54 <body onload="startClock()" onunload="stopClock()">
55 <form>
56 <center>
57 <div id="show"></div>
58 </center>
59
60
61 </body>
62 </html>
63 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
64 <html xmlns="http://www.w3.org/1999/xhtml">
65 <head>
66 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
67 <title>显示时间</title>
68 <script language="javascript">
69 var timer = null;
70 //显示数字图片
71
72 function displayClock(num)
73 {
74 var dig = parseInt(num/10);
75 var timetag = "<img src='" + dig + ".jpg'>";
76 dig = num%10;
77 timetag += "<img src='" + dig + ".jpg'>";
78 return timetag;
79
80 }
81 //停止计时
82
83 function stopClock()
84 {
85 clearTimeout(timer);
86 }
87 //开始计时
88
89 function startClock()
90 {
91 var time = new Date();
92 // 获取时间
93
94 var hours = displayClock(time.getHours()) + ":";
95 var minutes = displayClock(time.getMinutes()) + ":";
96 var seconds = displayClock(time.getSeconds()) ;
97 // 显示时间
98 show.innerHTML = hours + minutes + seconds ;
99 timer = setTimeout("startClock()",1000);
100
101
102 }
103
104
105 </script>
106
107
108
109
110 </head>
111 <body onload="startClock()" onunload="stopClock()">
112 <form>
113 <center>
114 <div id="show"></div>
115 </center>
116
117
118 </body>
119 </html>
120
121 存在的问题：
122
123 问题：网页无法自动显示时间，要按刷新按钮，才可以。
124 回答;
125 timer = setTimeout("startClock ",1000);这条语句少个“（）”
126 应改成如下语句
127 timer = setTimeout("startClock()",1000);
128
129
130
131
2 ；
3 代码如下：
4
5
6 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7 <html xmlns="http://www.w3.org/1999/xhtml">
8 <head>
9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10 <title>显示时间</title>
11 <script language="javascript">
12 var timer = null;
13 //显示数字图片
14
15 function displayClock(num)
16 {
17 var dig = parseInt(num/10);
18 var timetag = "<img src='" + dig + ".jpg'>";
19 dig = num%10;
20 timetag += "<img src='" + dig + ".jpg'>";
21 return timetag;
22
23 }
24 //停止计时
25
26 function stopClock()
27 {
28 clearTimeout(timer);
29 }
30 //开始计时
31
32 function startClock()
33 {
34 var time = new Date();
35 // 获取时间
36
37 var hours = displayClock(time.getHours()) + ":";
38 var minutes = displayClock(time.getMinutes()) + ":";
39 var seconds = displayClock(time.getSeconds()) ;
40 // 显示时间
41 show.innerHTML = hours + minutes + seconds ;
42 timer = setTimeout("startClock()",1000);
43
44
45 }
46
47
48 </script>
49
50
51
52
53 </head>
54 <body onload="startClock()" onunload="stopClock()">
55 <form>
56 <center>
57 <div id="show"></div>
58 </center>
59
60
61 </body>
62 </html>
63 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
64 <html xmlns="http://www.w3.org/1999/xhtml">
65 <head>
66 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
67 <title>显示时间</title>
68 <script language="javascript">
69 var timer = null;
70 //显示数字图片
71
72 function displayClock(num)
73 {
74 var dig = parseInt(num/10);
75 var timetag = "<img src='" + dig + ".jpg'>";
76 dig = num%10;
77 timetag += "<img src='" + dig + ".jpg'>";
78 return timetag;
79
80 }
81 //停止计时
82
83 function stopClock()
84 {
85 clearTimeout(timer);
86 }
87 //开始计时
88
89 function startClock()
90 {
91 var time = new Date();
92 // 获取时间
93
94 var hours = displayClock(time.getHours()) + ":";
95 var minutes = displayClock(time.getMinutes()) + ":";
96 var seconds = displayClock(time.getSeconds()) ;
97 // 显示时间
98 show.innerHTML = hours + minutes + seconds ;
99 timer = setTimeout("startClock()",1000);
100
101
102 }
103
104
105 </script>
106
107
108
109
110 </head>
111 <body onload="startClock()" onunload="stopClock()">
112 <form>
113 <center>
114 <div id="show"></div>
115 </center>
116
117
118 </body>
119 </html>
120
121 存在的问题：
122
123 问题：网页无法自动显示时间，要按刷新按钮，才可以。
124 回答;
125 timer = setTimeout("startClock ",1000);这条语句少个“（）”
126 应改成如下语句
127 timer = setTimeout("startClock()",1000);
128
129
130
131
整体思路：
1，获取本地时间，
2.将分别获取本地时间的数字（个位数字）转换为数字图片（0~9）的文件名。
3，时钟显示通过Id中的show.innerHTML插入到页面中。
