当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 5.滚动时钟特效

5.滚动时钟特效

2019年05月14日  | 移动技术网IT编程  | 我要评论

一、html，css部分

二、js部分

三、源代码部分

 1 <head>
 2     <meta charset="utf-8">
 3     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 4     <meta http-equiv="x-ua-compatible" content="ie=edge">
 5     <title>document</title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10             list-style: none;
11         }
12 
13         #box {
14 
15             width: 450px;
16             margin: 100px auto;
17         }
18 
19         .dian {
20             width: 50px;
21             height: 70px;
22             display: inline-block;
23             background: url('img/b.jpg') no-repeat 0px 0px
24         }
25     </style>
26 </head>
27 
28 <body onload="change()">
29     <div id="box">
30         <img src="img/0.jpg" alt="">
31         <img src="img/0.jpg" alt="">
32         <span class="dian"></span>
33         <img src="img/0.jpg" alt="">
34         <img src="img/0.jpg" alt="">
35         <span class="dian"></span>
36         <img src="img/0.jpg" alt="">
37         <img src="img/0.jpg" alt="">
38     </div>
39     <script>
40         var b = true;
41         var img = document.getelementsbytagname('img');
42         function change() {
43             //-----获取时间部分-----
44             var date = new date();
45             var hour = date.gethours();
46             var minute = date.getminutes();
47             var second = date.getseconds();
48             function decide(e) {
49                 if (e < 10) {
50                     return '0' + e
51                 } else {
52                     return e
53                 }
54             }
55             //------将时间转换成字符串-----
56             str = string(decide(hour)) + string(decide(minute)) + string(decide(second))
57             var arrimg = str.split('');
58             var arr = ['img/0.jpg', 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 'img/6.jpg', 'img/7.jpg', 'img/8.jpg', 'img/9.jpg']
59             //------图片赋值部分-----
60             console.log(arrimg.length);
61             var img = document.getelementsbytagname('img');
62             for (var i = 0; i < arrimg.length; i++) {
63                 img[i].src = arr[arrimg[i]];
64             }
65 
66             //------闪烁部分-----
67             if (b) {
68                 var imgb = document.getelementsbyclassname('dian');
69                 imgb[0].style.background = 'url("img/c.jpg") no-repeat 0px 0px';
70                 imgb[1].style.background = 'url("img/c.jpg") no-repeat 0px 0px';
71                 b = false;
72                 return false;
73             }
74             if (b == false) {
75                 var imgb = document.getelementsbyclassname('dian');
76                 imgb[0].style.background = 'url("img/b.jpg") no-repeat 0px 0px';
77                 imgb[1].style.background = 'url("img/b.jpg") no-repeat 0px 0px';
78                 b = true;
79                 return false;
80             }
81         }
82         var time = setinterval(change, 1000);
83     </script>
84 </body>

四、图片img

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网