码迷,mamicode.com
首页 > Web开发 > 详细

【js】setInterval动态改变定时器时间周期

时间:2018-06-01 13:44:04      阅读:707      评论:0      收藏:0      [点我收藏+]

标签:char   改变   map   ide   isp   ace   closed   timer   16px   

setInterval动态改变定时器时间周期

一、目标:

setInterval初始时间间隔为500ms,动态更改为2s/5s/暂停。

二、效果(//gif,如果看到的是静态的png,你该去换台能看动图的电脑。)

技术分享图片

三、实现:

js控制:

 1 var t=setInterval(change,timer);
 2 
 3 function change(){
 4     $(‘#t1‘).click(function(){
 5         timer=2000;
 6         clearInterval(t);
 7         t=setInterval(change,timer);
 8     });
 9     $(‘#t2‘).click(function(){
10         timer=5000;
11         clearInterval(t);
12         t=setInterval(change,timer);
13     });
14     $(‘#t3‘).click(function(){
15         timer=5000;
16         clearInterval(t);
17         //t=setInterval(change,timer);
18     });
19     document.getElementById(‘container‘).innerHTML=index ;
20     index++;
21 }

html实例:

技术分享图片
 1 <!DOCTYPE html>  
 2 <html>
 3 <head>  
 4 <!--meta name="viewport" content="initial-scale=1.0, user-scalable=no" /-->  
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 6 <title>动态改变定时器的周期</title>  
 7 <style type="text/css">  
 8 html{height:100%}  
 9 body{width:60%;height:100%;margin:0px auto;padding:0px}  
10 #container{height:5%}  
11 </style>  
12 <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BMgnVpFhGSH7GE8l7qnWhESkeCr12n9v"> -->
13 <!-- //v2.0版本的引用方式:src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" -->
14 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
15 </script>
16 </head>  
17  
18 <body>
19 <p style=‘color:gray‘>周期定时器,初始化周期为500ms</p>  
20 <div id="container"></div>
21 <button id=‘t1‘>2s</button> 
22 <button id=‘t2‘>5s</button> 
23 <button id=‘t3‘>暂停</button> 
24 <script type="text/javascript"> 
25 
26 var index=0;
27 var timer=500;
28 
29 
30 var t=setInterval(change,timer);
31 
32 function change(){
33     $(#t1).click(function(){
34         timer=2000;
35         clearInterval(t);
36         t=setInterval(change,timer);
37     });
38     $(#t2).click(function(){
39         timer=5000;
40         clearInterval(t);
41         t=setInterval(change,timer);
42     });
43     $(#t3).click(function(){
44         timer=5000;
45         clearInterval(t);
46         //t=setInterval(change,timer);
47     });
48     document.getElementById(container).innerHTML=index ;
49     index++;
50 }
51 
52 </script>  
53 </body>  
54 </html>
View Code

 

【js】setInterval动态改变定时器时间周期

标签:char   改变   map   ide   isp   ace   closed   timer   16px   

原文地址:https://www.cnblogs.com/carsonwuu/p/9120994.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!