Home > Developer > Web Develop
SetInterval Dynamic Change Timer time period
First, the goal:
SetInterval initial interval is 500ms, dynamic change to 2s/5s/pause.
Second, the effect (//gif, if you see a static PNG, you should go to change the computer to see the map. ）
Third, realize:
JS Control:
1 vart=setinterval (change,timer);2 3 functionChange () {4$ (' #t1 '). Click (function(){5timer=2000;6 clearinterval (t);7t=setinterval (change,timer);8 });9$ (' #t2 '). Click (function(){Tentimer=5000; One clearinterval (t); At=setinterval (change,timer); - }); -$ (' #t3 '). Click (function(){ thetimer=5000; - clearinterval (t); - //T=setinterval (change,timer); - }); +document.getElementById (' container '). innerhtml=index; -index++; +}
HTML instance:
1 <!DOCTYPE HTML> 2 <HTML>3 <Head> 4 <!--Meta name= "viewport" content= "initial-scale=1.0, user-scalable=no"/ - 5 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> 6 <title>Dynamically changing the timer cycle</title> 7 <styletype= "Text/css"> 8 HTML{Height:100%} 9 Body{width:60%;Height:100%;margin:0px Auto;padding:0px} Ten #container{Height:5%} One </style> A <!--<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= bmgnvpfhgsh7ge8l7qnwheskecr12n9v "> - - <!--//v2.0 Version Reference: src= "http://api.map.baidu.com/api?v=2.0&ak= your Key" - - <Scriptsrc= "Http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></Script> the </Script> - </Head> - - <Body> + <Pstyle= ' Color:gray '>Cycle timer with 500ms initialization period</P> - <DivID= "Container"></Div> + <ButtonID= ' T1 '>2s</Button> A <ButtonID= ' T2 '>5s</Button> at <ButtonID= ' T3 '>Time out</Button> - <Scripttype= "Text/javascript"> - - varIndex=0; - varTimer= -; - in - varT=setinterval (change,timer); to + functionChange () { - $('#t1'). Click (function(){ the Timer= -; * clearinterval (t); $ T=setinterval (change,timer);Panax Notoginseng }); - $('#t2'). Click (function(){ the Timer= the; + clearinterval (t); A T=setinterval (change,timer); the }); + $('#t3'). Click (function(){ - Timer= the; $ clearinterval (t); $ //T=setinterval (change,timer); - }); - document.getElementById ('Container'). InnerHTML=index; the Index++; - }Wuyi the </Script> - </Body> Wu </HTML>View Code
"JS" setinterval dynamic change Timer time period
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
