zoukankan      html  css  js  c++  java
  • JS实现定时器(类似工行网银支付限时操作)

     

    js脚本内容:

    //5秒倒计时
    var num = 0 ;
    var max = 5 ;
    var id = null ; 
    id = setInterval(box , 1000) ;  //1秒钟调用一次 
    function box(){
       document.getElementById("a").innerHTML = (parseInt(max)-1)  ;
       max-- ;
       if(max==num){
         clearInterval(id) ;
    	 alert("时间到!您无法操作") ;
       }  
    }
    

    html页面:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <HTML>
     <HEAD>
      <TITLE> Liaokailin </TITLE>
      <script src="demo.js"></script>
     </HEAD>
    
     <BODY>
       您还剩下 <font color = "red" ><span id="a"></span></font> 秒  
     </BODY>
    </HTML>
    

      但是上面那种js用的是setInterval()这个方法,消除的时候需要按照id来消除,可能会存在一些同步的问题,从而采用setTimeout()这个函数,其代码如下:

    //5秒倒计时
    var num = 0 ;
    var max = 5 ;
    var id = null ; 
    id = setTimeout(box , 1000) ;  //1秒钟调用一次 
    function box(){
       document.getElementById("a").innerHTML = (parseInt(max)-1)  ;
       max-- ;
       if(max==num){
         clearInterval(id) ;
    	 alert("时间到!您无法操作") ;
       }else{
         setTimeout(box,1000) ;
       }
    }
    

      

  • 相关阅读:
    第六次上机作业
    NOIP2016 DAY1 T2天天爱跑步
    NOIP2009 T2 Hankson的趣味题
    NOIP2013 DAY2 T3火车运输
    线段树
    NOIP2012 DAY2 T2借教室
    NOIP2015 DAY2 T1跳石头
    NOIP2016 DAY2 T3 愤怒的小鸟
    文本编辑常用快捷键
    洛谷P1516 青蛙的约会
  • 原文地址:https://www.cnblogs.com/liaokailin/p/3223272.html
Copyright © 2011-2022 走看看