js定时器实例分享


Posted in Javascript onDecember 20, 2016

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 相关文章推荐
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 #Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 #Javascript
详解Jquery的事件操作和文档操作
Dec 19 #Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 #Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 #Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 #Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 #Javascript
You might like
php绘制一个扇形的方法
2015/01/24 PHP
php eval函数一句话木马代码
2015/05/21 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
python使用cookielib库示例分享
2014/03/03 Python
python采集博客中上传的QQ截图文件
2014/07/18 Python
python错误处理详解
2014/09/28 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
Python程序退出方式小结
2017/12/09 Python
python实现TF-IDF算法解析
2018/01/02 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
Python sys模块常用方法解析
2020/02/20 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
失业者真诚求职信范文
2013/12/25 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
Python if else条件语句形式详解
2022/03/24 Python