js定时器实例分享
更新时间：2016年12月20日 08:29:46 作者：喵喵喵---
本篇文章主要介绍了js 定时器的语法、实例、与实现代码分析。具有很好的参考价值，需要的朋友一起来看下吧
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;
将内容存放在数组中的应用。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍javascript获取select标签选中的值方法,比较实用，需要的朋友可以参考下。2016-06-06
这篇文章主要是对Javascript对象属性方法进行了详细的汇总介绍。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要介绍了JavaScript通过事件代理高亮显示表格行的方法,涉及javascript事件代理及页面元素的操作技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了微信小程序scroll-view锚点链接滚动跳转功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
JS是由ES(ECMAScript)、DOM(浏览器文档对象)、BOM(浏览器对象模型)组成,这篇文章主要给大家介绍了关于如何使用ES6的class类继承来实现绚丽小球效果的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要为大家详细介绍了微信小程序实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
通过学习bootstrop导航条学会修改bootstrop颜色基调
这篇文章主要介绍了通过学习bootstrop导航条学会修改bootstrop颜色基调,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了Javascript如何实现双指控制图片功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了JS设计模式之观察者模式实现实时改变页面中金额数的方法,结合实例形式对比分析了javascript基于观察者模式实时改变页面金额数的相关操作技巧,需要的朋友可以参考下2018-02-02
平常设计表单的时候，我们会加入一些提示文字，最常见的做法是利用value来设置，下面与大家分享一个实例，感兴趣的朋友可以参考下哈2013-06-06
最新评论