【原】轮播图效果时间显示

最近在学习JS，今天看到轮播图实现方法，我想到用轮播的方法能不能实现显示时间，结果想法实现了。下面讲下思路：先取到时分秒各时间，再将时分秒分别取个位和十位，取到的个位和十位，再到相对应的数组中索引图片，再显示出来，再设置一个计时器，每秒刷新一次，从而达到显示与北京时间同步，代码写的烂，见谅，主要是和大家分享，让我们每个人都因代码而改变、成长、成功！

效果图：

完整源码包括资源图片：https://files.cnblogs.com/files/blogs/764419/turnTime%5B2022.8.21%5D.rar?t=1661257636

CSS代码：

 1         *{
 2             margin: 0;
 3             border: 0;
 4         }
 5         h1{
 6             text-align: center;
 7             color:red;
 8         }
 9         div{
10             display: inline;/*div在同一行显示*/
11         }
12 
13         .time img{
14             width: 150px;
15             height: 220px;
16             position:relative;
17             top: 20px;
18             left: 20px;
19         }

HTML代码：

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>retunTime</title>
 8 </head>
 9 <body>
10     <h1>：：：北京时间：：：</h1>
11     <div class="time">
12         <div id="hour">
13             <img src="">
14             <img src="">  
15             <img src="imgs/dot.png">          
16 
17         </div>
18         <div id="minute">
19             <img src="">
20             <img src="">
21             <img src="imgs/dot.png">    
22         </div>
23 
24         <div id="second">
25             <img src="">
26             <img src="">
27 
28         </div>
29     </div>
30 </body>
31 </html>

JavaScript代码：

  1         /*
  2         功能:根据北京时间显示对应的图片时间
  3         日期：2022年8月21日
  4         作者：猫降龙
  5         */
  6 
  7         //时十位图片数组
  8         arryHour_tenPlace=["imgs/0.png",
  9                            "imgs/1.png",
 10                            "imgs/2.png"];
 11         //时个位图片数组
 12         arryHour_onePlace=["imgs/0.png",
 13                             "imgs/1.png",
 14                             "imgs/2.png",
 15                             "imgs/3.png",
 16                             "imgs/4.png",
 17                             "imgs/5.png",
 18                             "imgs/6.png",
 19                             "imgs/7.png",
 20                             "imgs/8.png",
 21                             "imgs/9.png"];
 22         //分十位图片数组
 23         arryMinute_tenPlace=["imgs/0.png",
 24                              "imgs/1.png",
 25                              "imgs/2.png",
 26                              "imgs/3.png",
 27                              "imgs/4.png",
 28                              "imgs/5.png"];
 29         //分个位图片数组
 30         arryMinute_onePlace=["imgs/0.png",
 31                              "imgs/1.png",
 32                              "imgs/2.png",
 33                              "imgs/3.png",
 34                              "imgs/4.png",
 35                              "imgs/5.png",
 36                              "imgs/6.png",
 37                              "imgs/7.png",
 38                              "imgs/8.png",
 39                              "imgs/9.png"];
 40         //秒十位图片数组
 41         arrySecond_tenPlace=["imgs/0.png",
 42                              "imgs/1.png",
 43                              "imgs/2.png",
 44                              "imgs/3.png",
 45                              "imgs/4.png",
 46                              "imgs/5.png"];
 47        //秒个位图片数组
 48         arrySecond_onePlace=["imgs/0.png",
 49                              "imgs/1.png",
 50                              "imgs/2.png",
 51                              "imgs/3.png",
 52                              "imgs/4.png",
 53                              "imgs/5.png",
 54                              "imgs/6.png",
 55                              "imgs/7.png",
 56                              "imgs/8.png",
 57                              "imgs/9.png"];
 58         //获取时分钞
 59         let today=new Date();
 60         let myHour=today.getHours();
 61         let myMinute=today.getMinutes();
 62         let mySecond=today.getSeconds();
 63 
 64         //取id值
 65         let imgHour=document.getElementById("hour");
 66         let imgMinute=document.getElementById("minute");
 67         let imgSecond=document.getElementById("second");
 68         //id值再取标签名，有同样的标签名，可以用索引的形式来访问
 69         //console.log(typeof imgSecond);typeof显示imgSecond是object
 70         //取时分秒img的索引,每个img都有两个
 71         let hour=imgHour.getElementsByTagName("img")[0];
 72         let hour1=imgHour.getElementsByTagName("img")[1];
 73         let minute=imgMinute.getElementsByTagName("img")[0];
 74         let minute1=imgMinute.getElementsByTagName("img")[1];
 75         let second=imgSecond.getElementsByTagName("img")[0];
 76         let second1=imgSecond.getElementsByTagName("img")[1];
 77 
 78         //取时分钞的个位和十位
 79         let tenPlaceHour=parseInt((myHour%100)/10);//获取时十位数
 80         let onePlaceHour=parseInt(myHour%10);//获取时个位数
 81 
 82         let tenPlaceMinute=parseInt((myMinute%100)/10);//获取分十位数
 83         let onePlaceMinute=parseInt(myMinute%10);//获取分个位数
 84 
 85         let tenPlaceSecond=parseInt((mySecond%100)/10);//获取秒十位数
 86         let onePlaceSecond=parseInt((mySecond%10));//获取秒个位数
 87 
 88         setInterval(() => {
 89             //对个位秒的判断
 90             if(onePlaceSecond>arrySecond_onePlace.length-1){
 91                 onePlaceSecond=0;//个位秒归零操作
 92                 tenPlaceSecond++;//十位秒加一
 93             }
 94             //对十位秒的判断
 95             if(tenPlaceSecond>arrySecond_tenPlace.length-1){
 96                 tenPlaceSecond=0;//十位秒归零操作
 97                 onePlaceMinute++;//个位分加一
 98             }
 99             //对个位分的判断
100             if(onePlaceMinute>arryMinute_onePlace.length-1){
101                 onePlaceMinute=0;//个位分归零操作
102                 tenPlaceMinute++;
103             }
104             //对十位分的判断
105             if(tenPlaceMinute>arryMinute_tenPlace.length-1){
106                 tenPlaceMinute=0;
107                 onePlaceHour++;
108             }
109             //对个位时的判断
110             if(onePlaceHour>arryHour_onePlace.length-1){
111                 onePlaceHour=0;
112                 tenPlaceHour++;
113             }
114                            
115             //对十位时的判断
116             if(tenPlaceHour>arryHour_tenPlace.length-1){
117                 tenPlaceHour=0;
118             }
119 
120             //时个位和十位显示的图
121             hour.src=arryHour_onePlace[tenPlaceHour];
122             hour1.src=arryHour_onePlace[onePlaceHour];
123             //分个位和十位显示的图
124             minute.src=arryMinute_tenPlace[tenPlaceMinute];
125             minute1.src=arryMinute_onePlace[onePlaceMinute];
126             //秒个位和十位显示的图
127             second.src=arrySecond_tenPlace[tenPlaceSecond];
128             second1.src=arrySecond_onePlace[onePlaceSecond];
129             onePlaceSecond++;
130         }, 1000);

posted on 2022-08-23 20:58 猫降龙阅读(149) 评论(0) 收藏举报