最近在学习JS，今天看到轮播图实现方法，我想到用轮播的方法能不能实现显示时间，结果想法实现了。下面讲下思路：先取到时分秒各时间，再将时分秒分别取个位和十位，取到的个位和十位，再到相对应的数组中索引图片，再显示出来，再设置一个计时器，每秒刷新一次，从而达到显示与北京时间同步，代码写的烂，见谅，主要是和大家分享，让我们每个人都因代码而改变、成长、成功！
效果图：
<style> *{ margin: 0; border: 0; } h1{ text-align: center; color:red; } div{ display: inline;/*div在同一行显示*/ }
.time img{ width: 150px; height: 220px; position:relative; top: 20px; left: 20px; } </style> </head> <body> <h1>：：：北京时间：：：</h1> <div class="time"> <div id="hour"> <img src=""> <img src=""> <img src="imgs/dot.png">
</div> <div id="minute"> <img src=""> <img src=""> <img src="imgs/dot.png"> </div>
<div id="second"> <img src=""> <img src="">
</div> </div>
<script> /* 功能:根据北京时间显示对应的图片时间 日期：2022年8月21日 作者：猫降龙 */
//时十位图片数组 arryHour_tenPlace=["imgs/0.png", "imgs/1.png", "imgs/2.png"]; //时个位图片数组 arryHour_onePlace=["imgs/0.png", "imgs/1.png", "imgs/2.png", "imgs/3.png", "imgs/4.png", "imgs/5.png", "imgs/6.png", "imgs/7.png", "imgs/8.png", "imgs/9.png"]; //分十位图片数组 arryMinute_tenPlace=["imgs/0.png", "imgs/1.png", "imgs/2.png", "imgs/3.png", "imgs/4.png", "imgs/5.png"]; //分个位图片数组 arryMinute_onePlace=["imgs/0.png", "imgs/1.png", "imgs/2.png", "imgs/3.png", "imgs/4.png", "imgs/5.png", "imgs/6.png", "imgs/7.png", "imgs/8.png", "imgs/9.png"]; //秒十位图片数组 arrySecond_tenPlace=["imgs/0.png", "imgs/1.png", "imgs/2.png", "imgs/3.png", "imgs/4.png", "imgs/5.png"]; //秒个位图片数组 arrySecond_onePlace=["imgs/0.png", "imgs/1.png", "imgs/2.png", "imgs/3.png", "imgs/4.png", "imgs/5.png", "imgs/6.png", "imgs/7.png", "imgs/8.png", "imgs/9.png"]; //获取时分钞 let today=new Date(); let myHour=today.getHours(); let myMinute=today.getMinutes(); let mySecond=today.getSeconds();
//取id值 let imgHour=document.getElementById("hour"); let imgMinute=document.getElementById("minute"); let imgSecond=document.getElementById("second"); //id值再取标签名，有同样的标签名，可以用索引的形式来访问 //console.log(typeof imgSecond);typeof显示imgSecond是object //取时分秒img的索引,每个img都有两个 let hour=imgHour.getElementsByTagName("img")[0]; let hour1=imgHour.getElementsByTagName("img")[1]; let minute=imgMinute.getElementsByTagName("img")[0]; let minute1=imgMinute.getElementsByTagName("img")[1]; let second=imgSecond.getElementsByTagName("img")[0]; let second1=imgSecond.getElementsByTagName("img")[1];
//取时分钞的个位和十位 let tenPlaceHour=parseInt((myHour%100)/10);//获取时十位数 let onePlaceHour=parseInt(myHour%10);//获取时个位数
let tenPlaceMinute=parseInt((myMinute%100)/10);//获取分十位数 let onePlaceMinute=parseInt(myMinute%10);//获取分个位数
let tenPlaceSecond=parseInt((mySecond%100)/10);//获取秒十位数 let onePlaceSecond=parseInt((mySecond%10));//获取秒个位数
setInterval(() => { //对个位秒的判断 if(onePlaceSecond>arrySecond_onePlace.length-1){ onePlaceSecond=0;//个位秒归零操作 tenPlaceSecond++;//十位秒加一 } //对十位秒的判断 if(tenPlaceSecond>arrySecond_tenPlace.length-1){ tenPlaceSecond=0;//十位秒归零操作 onePlaceMinute++;//个位分加一 } //对个位分的判断 if(onePlaceMinute>arryMinute_onePlace.length-1){ onePlaceMinute=0;//个位分归零操作 tenPlaceMinute++; } //对十位分的判断 if(tenPlaceMinute>arryMinute_tenPlace.length-1){ tenPlaceMinute=0; onePlaceHour++; } //对个位时的判断 if(onePlaceHour>arryHour_onePlace.length-1){ onePlaceHour=0; tenPlaceHour++; } //对十位时的判断 if(tenPlaceHour>arryHour_tenPlace.length-1){ tenPlaceHour=0; }
//时个位和十位显示的图 hour.src=arryHour_onePlace[tenPlaceHour]; hour1.src=arryHour_onePlace[onePlaceHour]; //分个位和十位显示的图 minute.src=arryMinute_tenPlace[tenPlaceMinute]; minute1.src=arryMinute_onePlace[onePlaceMinute]; //秒个位和十位显示的图 second.src=arrySecond_tenPlace[tenPlaceSecond]; second1.src=arrySecond_onePlace[onePlaceSecond]; onePlaceSecond++; }, 1000);
</script> </body> </html> 标签：显示,轮播,效果,img,十位,let,imgs,onePlace,png From： https://www.cnblogs.com/mxlong/p/16617789.html