码迷,mamicode.com
首页 > Web开发 > 详细

js_定时器(setInterval)

时间:2020-09-17 15:32:40      阅读:40      评论:0      收藏:0      [点我收藏+]

标签:new   code   seconds   doc   输入   tor   func   col   dev   

 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>

 

js_定时器(setInterval)

标签:new   code   seconds   doc   输入   tor   func   col   dev   

原文地址:https://www.cnblogs.com/UnfetteredMan/p/13618275.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!