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>
时间： 2024-10-09 05:16:54