js_定时器（setInterval）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="UTF-8" />
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6     <title>Document</title>
 7     <style>
 8       li {
 9         list-style: none;
10         float: left;
11         width: 50px;
12         height: 50px;
13         border: 1px solid #eeeeee;
14         text-align: center;
15         color: #ffffff;
16         background-color: darkgray;
17         line-height: 50px;
18       }
19     </style>
20   </head>
21   <body>
22     <ul>
23       <li class="day"></li>
24       <li class="hour"></li>
25       <li class="minutes"></li>
26       <li class="seconds"></li>
27     </ul>
28     <script>
29       var day = document.querySelector('.day')
30       var hour = document.querySelector('.hour')
31       var minutes = document.querySelector('.minutes')
32       var seconds = document.querySelector('.seconds')
33       var userTime = +new Date('2020-9-6 18:00:00') // 用户输入的时间毫秒值
34       fn()
35       setInterval(fn, 1000)
36       function fn() {
37         var newTime = +new Date() // 当前时间毫秒值
38         var shenyuTime = (userTime - newTime) / 1000
39         var d = parseInt(shenyuTime / 60 / 60 / 24) //  计算天数
40         d = d < 10 ? '0' + d : d
41         day.innerHTML = d
42         var h = parseInt((shenyuTime / 60 / 60) % 24) //   计算小时
43         h = h < 10 ? '0' + h : h
44         hour.innerHTML = h
45         var m = parseInt((shenyuTime / 60) % 60) //   计算分数
46         m = m < 10 ? '0' + m : m
47         minutes.innerHTML = m
48         var s = parseInt(shenyuTime % 60) //   计算当前秒数
49         s = s < 10 ? '0' + s : s
50         seconds.innerHTML = s
51         return d + '天' + h + '时' + m + '分' + s + '秒'
52       }
53     </script>
54   </body>
55 </html>
posted @ 2020-09-05 15:09 unfetteredman 阅读(253) 评论(0) 收藏举报
刷新页面返回顶部