猿问

怎么用JS写一个倒计时

慕粉1217083117
浏览 1908回答 3
3回答

KevenHuang

一小时倒计时,代码如下:<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>js实现倒计时思路</title>     <style type="text/css">         *{             margin:0;             padding:0;             font-size:50px;         }         #wrap{             width:300px;             height:200px;             border:1px solid #abcdef;             position:absolute;             left:50%;             top:50%;             transform:translate(-50%,-50%);             text-align:center;             line-height:200px;         }     </style>     <script type="text/javascript">         window.onload = function(){             var hour = document.getElementById('hour');             var minute = document.getElementById('minute');             var second = document.getElementById('second');             var hourNum = 0;             var minuteNum = 59;             var secondNum = 60;             var timer = window.setInterval(function(){                 if(secondNum!=0){                     secondNum--;                     if(secondNum<10){                         secondNum = '0'+secondNum;                     }                 }else{                     secondNum = 59;                     //秒数为零时,时间走了一分钟,分钟数要减一                     minuteNum--;                     if(minuteNum<10&&minuteNum>0){                         minuteNum = '0'+minuteNum;                     }                 }                 if(minuteNum == 0){                     //分钟数为零时,时间走了一小时,停止定时器                     secondNum = '00';                     minuteNum = '00';                     window.clearInterval(timer);                 }                 hour.innerHTML = hourNum;                 minute.innerHTML = minuteNum;                 second.innerHTML = secondNum;             },1000);         }     </script> </head> <body>     <div id="wrap">         <span id="hour">1</span>:<span id="minute">00</span>:<span id="second">00</span>     </div> </body> </html>
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答