• 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
  • 相关阅读:
    鼠标单击事件( onclick )
    什么是事件《js》
    作业
    javaben的设计规则
    cookie的相关方法
    cookie 基本用法
    include 指令与动作区别
    简单的购物车应用案例 相关代码4
    简单的购物车应用案例 相关代码3
    iOS UI 布局
  • 原文地址:https://www.cnblogs.com/zhangxg/p/4587327.html
Copyright © 2020-2023  润新知