网页电子时钟 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3     <head>
 4         <title>电子时钟</title>
 5         <mate http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 6         <style type="text/css">
 7             ul{
 8                 list-style-type: none;
 9             }
10             li{
11                 float:left;
12             }
13             .clock{
14                 margin:0 auto;
15                 width:680px;
16                 height:275px;
17                 background-image:url(//images0.cnblogs.com/blog/691740/201412/111508524153765.jpg);
18             }
19             .time{
20                 padding-left:185px;
21                 padding-top:75px; 
22             }
23             .sz{width:31px}
24             .fg{width:22px}
25         </style>
26         <script type="text/javascript">
27 //                setInterval(function() {
28 //                    document.getElementById("clock").innerText = null;
29 //                }
30 //                , 1000);
31             setInterval(function() {
32                 var myDate = new Date();
33                 var hh = myDate.getHours(); //获取当前小时数(0-23)
34                 var mm = myDate.getMinutes(); //获取当前分钟数(0-59)
35                 var ss = myDate.getSeconds(); //获取当前秒数(0-59)
36                 if (hh < 10) {
37                     hh = "0" + hh;
38                 }
39                 h2 = hh % 10;
40                 h1 = (hh - h2) / 10;
41                 document.getElementById("h1").src = "images/" + h1 + ".png";
42                 document.getElementById("h2").src = "images/" + h2 + ".png";
43                 if (mm < 10) {
44                     mm = "0" + mm;
45                 }
46                 m2 = mm % 10;
47                 m1 = (mm - m2) / 10;
48                 document.getElementById("m1").src = "images/" + m1 + ".png";
49                 document.getElementById("m2").src = "images/" + m2 + ".png";
50                 if (ss < 10) {
51                     ss = "0" + ss;
52                 }
53                 s2 = ss % 10;
54                 s1 = (ss - s2) / 10;
55                 document.getElementById("s1").src = "images/" + s1 + ".png";
56                 document.getElementById("s2").src = "images/" + s2 + ".png";
57                 //document.getElementById("clock").value = hh + ":" + mm + ":" + ss;
58                 // document.write("时间:" + hh + ":" + mm + ":" + ss);
59             }
60             , 1000);
61         </script>
62     </head>
63     <body>
64         <div class="clock" id="clock">
65             <div class="time">
66                 <ul>
67                     <li class="sz"><img src="" id="h1"/></li>
68                     <li class="sz"><img src="" id="h2"/></li>
69                     <li class="fg"><img src="images/fg.png"/></li>
70                     <li class="sz"><img src="" id="m1"/></li>
71                     <li class="sz"><img src="" id="m2"/></li>
72                     <li class="fg"><img src="images/fg.png"/></li>
73                     <li class="sz"><img src="" id="s1"/></li>
74                     <li class="sz"><img src="" id="s2"/></li>
75                 </ul>
76             </div>
77         </div>
78     </body>
79 </html>

 

posted @ 2014-12-11 15:11  天岚  阅读(849)  评论(0)    收藏  举报