[javascript学习指南]javascript中定时器的实例代码

时间:2020-12-14  来源:php函数  阅读:

1. 设置定时器

语法:setInterval(函数,时间)

注意:

函数书写时不能带括号

setInterval(fn,1000)//正确 setInterval(fn(),1000)//错误

时间的最小设置不小于14ms

2. 清除定时器

语法:clearInterval(所清除的定时器名称)

3. 实例探究

js部分

window.onload =function() {  vartimer =null;  varnum = 0;  vari = 0;  vararr=["red","#FF9D0C","#DBFF0D","#3BFF0D","#0DFFA2","#0DE8FF","#0D52FF","#210DFF","#930DFF","#FF0DB4"]  varstart = document.getElementById("start");  varstop = document.getElementById("stop");  varprizeDraw = document.getElementById("prizeDraw");  start.onclick =function() {  clearInterval(timer);  timer = setInterval(function(){   num = Math.floor(Math.random()*100+1);   prizeDraw.style.backgroundColor = arr[i];   i++;   if(i==9) {   i = 0;   };   prizeDraw.innerHTML = num;  },100);  }  stop.onclick =function() {  clearInterval(timer);  } }

css部分

#prizeDraw {   width:100px;   height:100px;   background: rgba(255,68,253,0.5);   font-size:30px;   text-align:center;   line-height:100px;   }

html部分

   

代码分析:

注意在运行定时器的时候要先清除定时器,不然如果一直点击运行定时器,定时器就会运行多个,点停也停不下来;

clearInterval()可以接受清除的值为null;

将内容存放在数组中的应用。

原文链接:http://www.cnblogs.com/huyuzhu/p/6200840.html

[javascript学习指南]javascript中定时器的实例代码

http://m.bbyears.com/jiaocheng/116438.html

推荐访问:
相关阅读 猜你喜欢
本类排行 本类最新