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 相关文章推荐
javascript 计算两个整数的百分比值
Dec 26 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
js图片轮播插件的封装
Jul 21 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
详解JavaScript 的变量
Mar 08 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
实现jquery放大镜的两种方法
2018/02/22 jQuery
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
通过cmd进入python的实例操作
2019/06/26 Python
python框架flask表单实现详解
2019/11/04 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
利用python汇总统计多张Excel
2020/09/22 Python
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
中学生运动会口号
2014/06/07 职场文书
物业管理专业自荐信
2014/07/01 职场文书
环保公益策划方案
2014/08/15 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
违纪检讨书范文
2015/01/27 职场文书
创业计划书之书店
2019/09/10 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android
Redis入门基础常用操作命令整理
2022/06/01 Redis