1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 }
13
14 body {
15 background-color: #999;
16 }
17
18 .box01 {
19 position: relative;
20 width: 500px;
21 height: 300px;
22 background-color: white;
23 border-top: 1px solid white;
24 margin: 100px auto;
25 }
26
27 .box01 div {
28 float: left;
29 margin-top: 100px;
30 margin-left: 50px;
31 width: 100px;
32 height: 100px;
33 background-color: black;
34 color: white;
35
36 /* div标签中的数据水平垂直居中 */
37 line-height: 100px;
38 text-align: center;
39 }
40
41 button{
42 position: absolute;
43 width: 150px;
44 height: 50px;
45 top: 30px;
46 }
47 .b1{
48 left: 80px;
49 }
50 .b2{
51 left: 260px;
52 }
53 </style>
54 </head>
55
56 <body>
57 <!-- 倒计时是不断变换的 因此需要定时器来自动变换 setInterval -->
58 <!-- 三个黑色的盒子分别存放着 时 分 秒 -->
59 <!-- 三个黑色盒子利用 innerHTML 放入计算好的 时分秒 -->
60
61 <div class="box01">
62 <button class="b1">开启定时器</button>
63 <button class="b2">关闭定时器</button>
64 <div class="shi">0</div>
65 <div class="fen">0</div>
66 <div class="miao">0</div>
67 </div>
68
69 <script>
70 var hour = document.querySelector('.shi');
71 var minute = document.querySelector('.fen');
72 var second = document.querySelector('.miao');
73 var btn01 = document.querySelector('.b1');
74 var btn02 = document.querySelector('.b2')
75
76
77 var times01 = null; //将其声明成全局变量，是为了好在后面关掉这个定时器
78 btn01.addEventListener('click', function () {
79 var inputTime = prompt('请输入具体的事件,格式如 2020-4-19 06:00:00')
80
81 var inputtime = +new Date(inputTime); //用户输入的时间的总的毫秒数
82
83 countDown(); //先调用一次函数 防止页面刷新有空白
84
85 //定时器 ，每隔1s 运行一次 countDown函数
86 times01 = setInterval(countDown, 1000);
87
88 function countDown(time) {
89 var nowtime = +new Date(); //返回的时当前时间的总的毫秒数
90
91 //这个times是个字符串，因为 inputtime 是通过输入框获取的。
92 var times = (inputtime - nowtime) / 1000; //剩余时间总的秒数
93 // 如果还要加上天数
94 // var d = parseInt(times/60/60/24);
95 //不过剩下的小时数就要改成
96 //var h = parseInt(times / 60 / 60 % 24 );
97
98 var h = parseInt(times / 60 / 60 );
99 //三元表达式，主要是将 1这种小于10的数字转换成 01 ，为了好看
100 h = h < 10 ? '0' + h : h;
101 hour.innerHTML = h;
102
103 var m = parseInt(times / 60 % 60);
104 m = m < 10 ? '0' + m : m;
105 minute.innerHTML = m;
106
107 var s = parseInt(times % 60);
108 s = s < 10 ? '0' + s : s;
109 second.innerHTML = s;
110
111 }
112
113
114 })
115
116
117 btn02.addEventListener('click', function () {
118 clearInterval(times01);
119 })
120 </script>
121 </body>
122
123 </html>
