图片时钟
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta http-equiv=X-UA-Compatible content=IE=edge> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Document</title> </head> <body> <img src=../images/0.JPG alt=> <img src=../images/0.JPG alt=> <span><img src=../images/colon.JPG alt=></span> <img src=../images/0.JPG alt=> <img src=../images/0.JPG alt=> <span><img src=../images/colon.JPG alt=></span> <img src=../images/0.JPG alt=> <img src=../images/0.JPG alt=> </body> <script> var imgs = document.querySelectorAll('body>img') colck() //设置定时器让它走动 setInterval(colck,1000) function colck() { //获取当前时间戳 var date = new Date var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds() //当时分秒没有达到十位数是补一个零 hour = bu0(hour) minute = bu0(minute) second = bu0(second) //将时间连接起来 var str = hour + minute + second // console.log(hour,minute,second); // imgs[0].src = '../images/'+str[0]+'.JPG'; // imgs[1].src = '../images/'+str[1]+'.JPG'; // imgs[2].src = '../images/'+str[2]+'.JPG'; // imgs[3].src = '../images/'+str[3]+'.JPG'; // imgs[4].src = '../images/'+str[4]+'.JPG'; // imgs[5].src = '../images/'+str[5]+'.JPG'; // 利用循环给每个img加事件 - 简化代码 for(var i=0;i<imgs.length;i++){ imgs[i].src = '../images/'+str[i]+'.JPG' } } function bu0(num) { if(num < 10) { return '0' + num } else { return '' + num } } </script> </html> 效果图：
