来源：http://www.cnblogs.com/QianBoy/p/7601171.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>炫酷时钟</title> 6 <style type="text/css"> 7 body{ 8 height: 100%;color: #51555c; 9 background: url("./img/bg1.png") no-repeat; 10 /* 背景图垂直、水平均居中 */ 11 background-position: center center; 12 13 /* 背景图不平铺 */ 14 background-repeat: no-repeat; 15 16 /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */ 17 background-attachment: fixed; 18 19 /* 让背景图基于容器大小伸缩 */ 20 background-size: cover; 21 22 /* 设置背景颜色，背景图加载过程中会显示背景色 */ 23 background-color: #464646; 24 } 25 img{ 26 display: inline-block; 27 width: 28px; 28 height: 50px; 29 margin:0 4px; 30 } 31 .main_demo{ 32 width: 910px; 33 min-height: 600px; 34 margin:30px auto 0 auto; 35 } 36 .main_demo h2{ 37 text-align: center; 38 padding: 10px; 39 font-size: 40px; 40 color: wheat; 41 } 42 .clock{ 43 width: 500px; 44 padding: 40px; 45 margin:2px auto; 46 } 47 48 .clock_right{ 49 text-align: right; 50 margin:4px; 51 } 52 </style> 53 </head> 54 <body> 55 <div class="main_demo"> 56 <div align="center"> 57 <h2>Js 炫酷时钟</h2> 58 </div> 59 <div class="clock"> 60 <!--10点--> 61 <img src="" /> 62 <img src="" /> 63 ： 64 <!--40分--> 65 <img src="" /> 66 <img src="" /> 67 ： 68 <!--*秒--> 69 <img src="" /> 70 <img src="" /> 71 <br /> 72 <div class="clock_right"> 73 <!--2017年--> 74 <img src="" /> 75 <img src="" /> 76 <img src="" /> 77 <img src="" /> 78 ： 79 <!--09月--> 80 <img src="" /> 81 <img src="" /> 82 ： 83 <!--27日--> 84 <img src="" /> 85 <img src="" /> 86 </div> 87 </div> 88 </div> 89 90 </body> 91 <script type="text/javascript"> 92 var imgs = document.getElementsByTagName('img'); 93 setInterval(getTime,1000); 94 95 function getTime(){ 96 var _date = new Date(); 97 var year = _date.getFullYear(); 98 var month = _date.getMonth()+1; 99 var day = _date.getDate(); 100 var hour = _date.getHours(); 101 var minutes = _date.getMinutes(); 102 var second = _date.getSeconds(); 103 var newDate = addZero(hour) + "" + addZero(minutes)+ "" + addZero(second)+""+addZero(year) + "" + addZero(month)+ "" + addZero(day) 104 ; 105 console.log(newDate.length); 106 for(var i = 0;i < newDate.length;i++){ 107 imgs[i].src = 'img/time_' + newDate[i] + '.png'; 108 } 109 } 110 111 getTime(); 112 113 function addZero(num){ 114 if(num < 10){ 115 num = "0" + num; 116 } 117 return num 118 } 119 </script> 120 </html>