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 二分法(数组array)
Apr 24 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
Angularjs的键盘事件的绑定
Jul 27 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
vue 封装面包屑组件教程
Nov 16 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 fsockopen写的HTTP下载的类
2007/02/22 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
JS作用域链详解
2017/06/26 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
c++工程师面试问题
2013/08/04 面试题
护士自我评价范文
2014/01/25 职场文书
项目经理任命书
2014/06/04 职场文书
责任书范本
2014/08/25 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
Mysql 用户权限管理实现
2021/05/25 MySQL
MySQL 开窗函数
2022/02/15 MySQL