zoukankan      html  css  js  c++  java

  • 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{400px;height:400px;margin:40px auto;}  
    10.         #box div{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;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.                  100%;  
    10.                 overflow: hidden;  
    11.             }  
    12.               
    13.             .photo_left {  
    14.                 float: left;  
    15.                  40%;  
    16.                 text-align: center;  
    17.             }  
    18.               
    19.             .photo_left img {  
    20.                  5rem;  
    21.                 height: 5rem;  
    22.                 margin-top: 1.2rem;  
    23.             }  
    24.               
    25.             .tips_right {  
    26.                 float: left;  
    27.                  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后前端妹子，爱编程，爱运营，爱折腾。
    坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
  • 相关阅读:
    BCP 命令
    模板复习【updating】
    bzoj3716/4251 [PA2014]Muzeum
    bzoj4318 OSU!
    uoj308 【UNR #2】UOJ拯救计划
    bzoj4695 最假女选手
    省队集训 Day7 选点游戏
    hdu5828 Rikka with Sequence
    bzoj2482 [Spoj1557] Can you answer these queries II
    省队集训 Day6 序列
  • 原文地址：https://www.cnblogs.com/ting6/p/9725633.html
Copyright © 2011-2022 走看看