<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片时钟</title> <style type="text/css"> img { display: inline-block; width: 30px; height: 50px; } div[class] { text-align: center; height: 150px; width: 820px; background-color: grey; margin: 0 auto; } </style> <script> function toDou(hms) { //日期相关转换为字符串,不足两位补足两位 if(hms<10) hms ='0'+ hms; else hms = ''+ hms; return hms; } function tick(){ var oDate = new Date(); var aImg = document.getElementsByTagName('img'); var str1 = toDou(oDate.getFullYear()) + toDou(oDate.getMonth()) + toDou(oDate.getDate()) + oDate.getDay(); var str2 = toDou(oDate.getHours()) + toDou(oDate.getMinutes()) + toDou(oDate.getSeconds()); var str = str1+str2; for(var i = 0; i < aImg.length; i++) { //aImg[i].src = 'images/'+ str[i] + '.jpg'; aImg[i].src = './images/'+ str.charAt(i) + '.jpg'; //str.charAt(i)是字符串取某个字符的方法，兼容所有浏览器，而str[i]存在兼容性问题 } } window.onload = function(){ var oDate2 = new Date(); setInterval(tick,1000); tick();//默认显示页面以后才执行window.onload 然后每秒执行一次定时器 为避免刚开始显示00：00：00 需要在window.onload里面手动执行一次定时器函数 }; </script> </head> <body style="font-size:60px;" > <div> <div class="up"> <img src="./images/0.jpg"/> <img src="./images/0.jpg"/> <img src="./images/0.jpg"/> <img src="./images/0.jpg"/> 年 <img src="./images/0.jpg"/> <img src="./images/0.jpg"/> 月 <img src="./images/0.jpg"/> <img src="./images/0.jpg"/> 日 星期 <img src="./images/0.jpg"/> <br/> </div> <div class="down"> <img src="../images/0.jpg"/> <img src="../images/0.jpg"/> : <img src="../images/0.jpg"/> <img src="../images/0.jpg"/> : <img src="../images/0.jpg"/> <img src="../images/0.jpg"/> </div> </div> </body> </html>