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 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 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 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>
