这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本篇文章主要介绍了 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;
将内容存放在数组中的应用。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0527/329384.html