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(http://images.cnitblog.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>
新闻热点
疑难解答
