标签：
1.setInterval：计时器
可以按照指定的周期（以毫秒为单位）来调用函数或计算表达式
调用格式：setinterval(fun,time)
说明：fun为函数体，time为数值，这两个参数是必需的。
返回值为一个对象（interval），用于清理计时器:clearinterval()
示意图如下：
示例如下的页面效果如图所示。
（没有特意设置样式所以有些丑QAQ）
说明：将8个div块排列如图，初识样式全无蓝色，点击开始按钮，从A~H依次出现蓝色，并循环出现，点击停止按钮蓝色停止运动。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #main { 8 width: 608px; 9 border: solid 1px red; 10 margin: 20px auto; 11 } 12 13 #main .block { 14 width: 100px; 15 height: 100px; 16 line-height: 100px; 17 text-align: center; 18 border: solid 1px #5a5a5a; 19 margin: 5px 25px; 20 float: left; 21 } 22 23 #main .blue { 24 width: 100px; 25 height: 100px; 26 line-height: 100px; 27 text-align: center; 28 border: solid 1px #5a5a5a; 29 margin: 5px 25px; 30 float: left; 31 background: blue; 32 color: #fff; 33 } 34 </style> 35 <script type="text/javascript" src=../../js/system.js></script> 36 </head> 37 <body> 38 <div id="main"> 39 <div class="block" id="a1">A</div> 40 <div class="block" id="a2">B</div> 41 <div class="block" id="a3">C</div> 42 <div class="block" id="a4">D</div> 43 <div class="block" id="a5">E</div> 44 <div class="block" id="a6">F</div> 45 <div class="block" id="a7">G</div> 46 <div class="block" id="a8">H</div> 47 <div style="clear: both"></div> 48 </div> 49 50 <input type="button" value="开始" id="btnStart"/> 51 <input type="button" value="停止" id="btnStop"/> 52 <script type="text/javascript"> 53 //已导入system.js，可以使用$$("n")来获取ID名 54 //定义一个全局对象为objGame,值为空 55 var objGame = null; 56 //定义一个全局变量用于存储蓝色所在位置 57 var index = 0; 58 /************************************** 59 * 打开网页自动出现蓝色效果 60 // window.onload=function(){ 61 // $$("btnStart").click(); 62 // } 63 **************************************/ 64 //停止按钮绑定点击事件 65 $$("btnStop").onclick = function () { 66 //点击停止按钮清除计时器，停止循环 67 clearInterval(objGame); 68 } 69 //开始按钮绑定点击事件 70 $$("btnStart").onclick = function () { 71 //点击开始按钮清除计时器，防止多次点击开始按钮出错 72 clearInterval(objGame); 73 //为全局对象设置属性，此时objGame不为空 74 objGame = setInterval(function () { 75 //遍历8个div方块 76 for (var i = 1; i < 9; i++) { 77 //使用变量n来存储随i变化的元素ID号 78 var n = "a" + i; 79 //调用comm对象的setAttr方法为ID号为n的元素设置block属性 80 //思路：先给所有元素设置初始样式，在单独给对应元素设置变化样式 81 comm.setAttr($$(n), "class", "block"); 82 //循环结束标志 83 } 84 //index值累加 85 index++; 86 //使用字符串叠加方法得到累加后的index对应的div块位置，既ID号 87 var n = "a" + index; 88 //调用comm对象的setAttr方法为ID号为n的元素设置blue属性，blue属性为蓝色背景 89 //关于comm对象参考上一篇博客 90 comm.setAttr($$(n), "class", "blue"); 91 //判断index值，防止无限循环，index值最大为8 92 if (index >= 8) { 93 //index值为8时重新归0，再次从第一个div开始变化，达到循环变化目的 94 index = 0; 95 } 96 }, 97 //定义变化间隔100ms，既0.1秒 98 100) 99 } 100 </script> 101 </body> 102 </html>
JavaScript常用的方法和函数（setInterval和setTimeout）
标签：
原文地址：http://www.cnblogs.com/abuc/p/4773009.html
