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 相关文章推荐
判断iframe里的页面是否加载完成
Jun 06 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
jquery不常用方法汇总
Jul 26 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
原生JS实现层叠轮播图
May 17 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 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
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
使用Apache的rewrite
2021/03/09 Servers
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
python实现读取并显示图片的两种方法
2017/01/13 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
python树莓派红外反射传感器
2019/01/21 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
银行门卫岗位职责
2013/12/29 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
教你用python实现12306余票查询
2021/06/30 Python
nginx rewrite功能使用场景分析
2022/05/30 Servers
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技