web端用js实现倒计时

最新推荐文章于 2024-02-05 14:23:50 发布

城续猿的员

最新推荐文章于 2024-02-05 14:23:50 发布

阅读量4.4k

点赞数 2

分类专栏： javascript常用知识点

javascript常用知识点专栏收录该内容

6 篇文章 0 订阅

订阅专栏

[html]view plaincopy 
   
 <html>  
     <head>  
         <title>倒计时</title>  
         <!--以下为css样式-->  
         <style type= "text/css">  
             .daojishi h2  
             {   
                 font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;   
                 font-size:14px;  
                 margin-bottom:5px;   
                 color:#151515;  
             }  
             .daojishi #timer  
             {  
                 font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;   
                 font-size:14px;  
                 color:#151515;  
                 font-weight:bold;  
             }  
         </style>  
         <script type = "text/javascript" src = "timer.js">  
         </script>  
     </head>  
     <body onload = "timer()">  
         <div class = "daojishi">  
             <h2>剩余时间为：</h2>  
             <div id = "timer">  
             </div>  
         </div>  
     </body>  
 </html>  

timer.js

[javascript]view plaincopy 
   
 function timer()  
             {  
                 var ts = (new Date(2018, 11, 11, 9, 0, 0)) - (new Date());//计算剩余的毫秒数  
                 var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数  
                 var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数  
                 var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数  
                 var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数  
                 dd = checkTime(dd);  
                 hh = checkTime(hh);  
                 mm = checkTime(mm);  
                 ss = checkTime(ss);  
                 document.getElementById("timer").innerHTML = dd + "天" + hh + "时" + mm + "分" + ss + "秒";  
                 setInterval("timer()",1000);  
             }  
             function checkTime(i)    
             {    
                if (i < 10) {    
                    i = "0" + i;    
                 }    
                return i;    
             }   