<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>炫酷时钟</title> <style type="text/css"> body{ height: 100%;color: #51555c; background: url("./img/bg1.png") no-repeat; /* 背景图垂直、水平均居中 */ background-position: center center; /* 背景图不平铺 */ background-repeat: no-repeat; /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */ background-attachment: fixed; /* 让背景图基于容器大小伸缩 */ background-size: cover; /* 设置背景颜色,背景图加载过程中会显示背景色 */ background-color: #464646; } img{ display: inline-block; 28px; height: 50px; margin:0 4px; } .main_demo{ 910px; min-height: 600px; margin:30px auto 0 auto; } .main_demo h2{ text-align: center; padding: 10px; font-size: 40px; color: wheat; } .clock{ 500px; padding: 40px; margin:2px auto; } .clock_right{ text-align: right; margin:4px; } </style> </head> <body> <div class="main_demo"> <div align="center"> <h2>Js 炫酷时钟</h2> </div> <div class="clock"> <!--10点--> <img src="" /> <img src="" /> : <!--40分--> <img src="" /> <img src="" /> : <!--*秒--> <img src="" /> <img src="" /> <br /> <div class="clock_right"> <!--2017年--> <img src="" /> <img src="" /> <img src="" /> <img src="" /> : <!--09月--> <img src="" /> <img src="" /> : <!--27日--> <img src="" /> <img src="" /> </div> </div> </div> </body> <script type="text/javascript"> var imgs = document.getElementsByTagName('img'); setInterval(getTime,1000); function getTime(){ var _date = new Date(); var year = _date.getFullYear(); var month = _date.getMonth()+1; var day = _date.getDate(); var hour = _date.getHours(); var minutes = _date.getMinutes(); var second = _date.getSeconds(); var newDate = addZero(hour) + "" + addZero(minutes)+ "" + addZero(second)+""+addZero(year) + "" + addZero(month)+ "" + addZero(day) ; console.log(newDate.length); for(var i = 0;i < newDate.length;i++){ imgs[i].src = 'img/time_' + newDate[i] + '.png'; } } getTime(); function addZero(num){ if(num < 10){ num = "0" + num; } return num } </script> </html>