图片时钟
2022/4/20 6:13:43
本文主要是介绍图片时钟,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!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>
效果图:
这篇关于图片时钟的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?