setInterval—JS学习笔记2015-6-18(第60天)

不知不觉已经坚持了60天了，给自己一个赞，学习前端就是坚持，慢慢积累，不管有多难，关键在于坚持。

今天也在知乎上面看到了一位网友的分享，最好的学习方式就是做项目，多实践，做的过程中就会遇到问题，学会用搜索引擎，解决了问题，你自己就掌握了。

这种以项目为主的学习方式，我之前在高效学习法里面就有了解，这确实是很好的方式，学到的东西后而且会印象深刻。

现阶段我还在JS的基础阶段，等我理顺了基础阶段后，多做一些实例来巩固。

setInterval 定时器：

时间概念 var timer = setInterval(函数, 毫秒); // 重复执行

clearInterval(timer); // 清楚定时器，让其停下来

代码的上下执行顺序很重要；

定时器使用注意事项： 先关后开

函数调用的方式：

// fn(); 直接调用

// document.onclick 事件调用

// 定时器调用；

时间：14ms以上最好

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>定时器换背景</title>
 6 </head>
 7 
 8 <body>
 9 <input type="button" value="换背景">
10 <input type="button" value="停止">
11 
12 <script type="text/javascript">
13     var aBtn = document.getElementsByTagName('input');
14     var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
15     var num = 0;
16     var oBody = document.body;
17     var timer = null;
18 
19     aBtn[0].onclick = function(){
20 
21         clearInterval(timer);  // 当用户来控制定时器时，为了不必要的bug，最好新清除下定时器；
22       
23          timer = setInterval(function(){
24              oBody.style.background = 'url('+arrUrl[num]+')';
25              num++;
26              num%=arrUrl.length;
27 
28          },1000)
29     }
30 
31     aBtn[1].onclick = function(){
32 
33         clearInterval(timer);
34     }
35 
36 </script>
37 </body>
38 </html>

View Code