js实现计时功能

原文链接：https://blog.csdn.net/qq_37936542/article/details/78912786

一：计时器功能

[javascript] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.   
  7.     <style>  
  8.         *{margin:0;padding:0;}  
  9.         #box{width:400px;height:400px;margin:40px auto;}  
  10.         #box div{width:200px;height:40px;border:1px #F3C solid;text-align:center;float:left;font-size:26px;}  
  11.         #box button{float:left;margin-top:10px;margin-left:20px;}  
  12.         #box span{float:left;width:200px;height:100px;overflow-y:auto;display:block;border:1px #C9C solid;margin-top:10px;}  
  13.     </style>  
  14.   
  15. </head>  
  16. <body>  
  17. <div id="box">  
  18.     <div id="timer"></div>  
  19.     <button onClick="btTime()">开始服务</button>  
  20.     <!--<button onClick="count()">count</button>-->  
  21.   
  22. </div>  
  23. <script type="text/javascript">  
  24.     var timer=document.getElementById("timer");  
  25.     var butt=document.getElementsByTagName("button");  
  26.   
  27.     var hour='00';  //时  
  28.     var minus='00';//分  
  29.     var seconds='00';//秒  
  30.   
  31.     timer.innerHTML=hour+":"+minus+":"+seconds;  
  32.     var x=0,y=0,f=0,a=0,b=0,t1,t2;  
  33.     var flag=0;  
  34.     function  btTime(){  
  35.         /*ajax:*/  
  36.   
  37.   
  38.         switch (flag){  
  39.             case 0 :  
  40.                 flag=1;  
  41.                 w=1;  
  42.                 t1=setInterval(beginS,1000);  
  43.                 butt[0].innerHTML='结束服务';break;  
  44.             case 1 :  
  45.                 flag=2;  
  46.                 clearInterval(t1);  
  47.                 butt[0].innerHTML='服务已结束';break;  
  48.   
  49.         }  
  50.     }  
  51.     function beginS(){//计算秒  
  52.      x ++;  
  53.      if(x<10){  
  54.          seconds = '0' + x;  
  55.      }else if(x>=10&&x<=59){  
  56.          seconds = x;  
  57.      }else if(x>59){  
  58.          seconds = '00';  
  59.          x = 0;  
  60.          a++;  
  61.      }  
  62.   
  63.         if(a<10){  
  64.             minus = '0' + a;  
  65.         }else if(a>=10&&a<=59){  
  66.             minus = a;  
  67.         }else if(a>59){  
  68.             minus = '00';  
  69.             a = 0;  
  70.             b++;  
  71.         }  
  72.   
  73.         if(b<10){  
  74.             hour = '0' + b;  
  75.         }else if(b>=10&&b<=59){  
  76.             hour = b;  
  77.         }  
  78.   
  79.         timer.innerHTML=hour+":"+minus+":"+seconds;  
  80.   
  81.     }  
  82.   
  83.   
  84.   
  85. </script>  
  86. </body>  
  87. </html><strong>  
  88. </strong>  


二：弹框倒数计时消失功能

[javascript] view plain copy
  1. <!DOCTYPE html >  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.         <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />  
  6.   
  7.         <style>  
  8.             .container {  
  9.                 width: 100%;  
  10.                 overflow: hidden;  
  11.             }  
  12.               
  13.             .photo_left {  
  14.                 float: left;  
  15.                 width: 40%;  
  16.                 text-align: center;  
  17.             }  
  18.               
  19.             .photo_left img {  
  20.                 width: 5rem;  
  21.                 height: 5rem;  
  22.                 margin-top: 1.2rem;  
  23.             }  
  24.               
  25.             .tips_right {  
  26.                 float: left;  
  27.                 width: 60%;  
  28.             }  
  29.               
  30.             .tips_right p:first-child {  
  31.                 color: #25812a;  
  32.                 font-size: 1.5rem;  
  33.             }  
  34.         </style>  
  35.         <title>注册成功页面</title>  
  36.     </head>  
  37.   
  38.     <body>  
  39.         <div class="container">  
  40.             <div class="photo_left">  
  41.                 <img src="img/smile.png" />  
  42.             </div>  
  43.   
  44.             <div class="tips_right">  
  45.                 <p> 注册成功</p>  
  46.                 <p>将在 <span id="mes">3</span> 秒钟后返回首页！</p>  
  47.   
  48.             </div>  
  49.   
  50.         </div>  
  51.   
  52.     </body>  
  53.     <script language="javascript" type="text/javascript">  
  54.         var i = 3;  
  55.         var intervalid;  
  56.         intervalid = setInterval("fun()", 1000);  
  57.   
  58.         function fun() {  
  59.             if(i == 0) {  
  60.                 window.location.href = "index.html";  
  61.                 clearInterval(intervalid);  
  62.             }  
  63.             document.getElementById("mes").innerHTML = i;  
  64.             i--;  
  65.         }  
  66.     </script>  
  67.   
  68. </html> 

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等10G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880

福利二：微信小程序入门与实战全套详细视频教程

【领取方法】

关注 【编程微刊】微信公众号：

回复【小程序demo】一键领取130个微信小程序源码demo资源。

回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集10G资源大放送。


image

原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。


posted @ 2018-03-23 17:46  祈澈姑娘  阅读(543)  评论(0)  编辑  收藏  举报