首页 > 开发 > JS > 正文

js定时器实例分享

2024-05-06 16:33:57
字体:
来源:转载
供稿:网友

1. 设置定时器

语法:setInterval(函数,时间)

注意:

函数书写时不能带括号

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

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

2. 清除定时器

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

3. 实例探究

js部分

window.onload = function() { var timer = null; var num = 0; var i = 0;  var arr=['red','#FF9D0C','#DBFF0D','#3BFF0D','#0DFFA2','#0DE8FF','#0D52FF','#210DFF','#930DFF','#FF0DB4'] var start = document.getElementById('start'); var stop = document.getElementById('stop'); var prizeDraw = 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部分

<div id="prizeDraw"></div> <input type="button" value="开始" id="start"> <input type="button" value="暂停" id="stop">

代码分析:

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

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

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持VeVb武林网!


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表