JavaScript倒计时的具体实现 

  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>

 

 

 

 

posted @ 2020-04-25 20:30  瑾言**  阅读(279)  评论(0)    收藏  举报