javascript定时器小结

javascript有两种定显示器, setTimeout和setInterval,下面简要介绍两个函数然后附上简单的例子。
setTimeout(function, time) ,  当定位到time间隔则执行function函数,执行一次就不再执行

clearTimeout(t), 结束setTimeout定时器
setInterval(function, time), 每隔time间隔执行一次function函数

clearInterval(t),结束setinterval定时器
示例:

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.     <meta charset="utf-8">  
  5.     <title>JS Test</title>  
  6.     <style type="text/css">  
  7.         .xxm {  
  8.                 color:green;  
  9.                 font:size=36px;  
  10.                 font-weight:bold;  
  11.                 font-family:Microsoft YaHei;  
  12.                 background-color:white  
  13.                 background-position:top center;  
  14.                   
  15.         }  
  16.     </style>  
  17.       
  18.     </head>  
  19.     <body>  
  20.         <p class="xxm">定时器</p>  
  21.     <script type="text/javascript">  
  22.         var c1 = 0;  
  23.         var c2 = 0;  
  24.         var t;   
  25.         var t2;  
  26.         var t3;  
  27.         function timeCount(){  
  28.             document.getElementById('txt').value = c1;  
  29.             c1 = c1 + 1;  
  30.             t = setTimeout("timeCount()", 1000); //此处实现timeCount函数每隔1s执行一次的功能         
  31.         }  
  32.         function stopTimeout(){  
  33.             clearTimeout(t);  
  34.         }  
  35.         function timeCount2(){  
  36.             document.getElementById('txt').value=c2;  
  37.             c2=c2+1;  
  38.         }  
  39.         function interval(){  
  40.             t2 = setInterval("timeCount2()", 1000);  
  41.         }  
  42.         function stop(){  
  43.             clearInterval(t2);  
  44.         }  
  45.         function startTime(){  
  46.             var today = new Date();   
  47.             var y = today.getFullYear();  
  48.             var montoday.getMonth();  
  49.             var day = today.getDate();  
  50.             var h = today.getHours();  
  51.             var m = today.getMinutes();  
  52.             var s = today.getSeconds();  
  53.             m = checkTime(m);  
  54.             s = checkTime(s);  
  55.             document.getElementById('txt').value = y+"-"+mon+"-"+day+" "+h+":"+m+":"+s;  
  56.             //t3 = setTimeout('startTime()',1000);        
  57.         }  
  58.         function start(){  
  59.             t3 = setInterval('startTime()',1000);         
  60.         }  
  61.           
  62.         function stopTime(){  
  63.             //clearTimeout(t3);  
  64.             clearInterval(t3);  
  65.         }  
  66.         function checkTime(i){  
  67.             if (i<10){  
  68.                 i = "0"+i;  
  69.             }  
  70.             return i;  
  71.         }  
  72.   
  73.     </script>  
  74.       
  75.     <input type="text" id="txt"/><br><br>  
  76.     <input type="button" value="开始setTimeout事件" onclick="javascript:timeCount()"/>  
  77.     <input type="button" value="结束setTimeout事件" onclick="javascript:stopTimeout()"/><br><br>  
  78.     <input type="button" value="开始setInterval事件" onclick="javascript:interval()"/>  
  79.     <input type="button" value="结束setInterval事件" onclick="javascript:stop()"/><br><br>  
  80.     <p class="xxm">实时时钟<p/>  
  81.     <input type="button" value="开始时间" onclick="javascript:start()"/>  
  82.     <input type="button" value="结束时间" onclick="javascript:stopTime()"/><br><br>  
  83.   
  84.     </body>  
  85.       
  86. </html>  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值