zoukankan      html  css  js  c++  java
  • js学习笔记之:时间(二)

         今天来了解一下js中定时器的两种用法。js中包括2种定时器,分别是:

              间隔型定时器:setInterval(开)    clearInterval (关) 

              延时性定时器:setTimeout(开)   clearTimeout  (关) 

       (1)间隔型定时器:

              间隔型定时器功能是每隔指定时间进行一次操作,直到定时器关闭;

               setInterval(function(){

                        alert('a');},1000);   //每隔1000毫秒进行输出a字符;如果要停止使用clearInterval

       (2)延时性定时器:

              延时性定时器功能是延时指定时间执行操作,之后不在执行;

              setTimeout(function(){

                       alert('a');},1000);  //1000豪秒后输出字符a,之后不再输出

        (3)使用定时器来制作一个移动的div

               通过定时器可以来控制一个div在页面上运动,主要原理是通过设置div的style.left值,来改变div的位置。注   意div的position属性需要设置为absolute,否则div不能运动。函数在执行前,首选需要关闭一个定时器,因为重复开启定时器会造成移动速度加快;

    <body>

       <input id = "btn1" type = "button" value = "开始运动"“ onclick="startMove()"/>

       <input id = "btn2" type= "button" value = "停止运动" onclick="stopMove()"/>

       <div id= "div1">

       </div>

    </body>

    //------------------------------js代码------------------------------------------------

    <script>

      var timer = null;

      function startMove()

      {

               var oDiv = document.getElementById('div1'); //获取Div

               clearInterval(timer);//关闭已有定时器;

               timer = setInterval(function()

               {

                        if(oDiv.offsetLeft >= 300)//判断当前Div位置,到达300px定制运动

                         {

                                  clearInterval(timer);   //到达终点以后

                         }

                       else //把运动和停止隔开

                        {

                           oDiv.style.left = oDiv.offsetLeft + 2 + "px"; //运动过程,到达终点之前

                         }

                                  },30);  //30毫秒执行一次

               }

            

             function stopMove()

            {

                clearInterval(timer);  //关闭定时器

           }

    </script>

     

     

  • 相关阅读:
    ios开发遇到的问题
    getopt()——命令行参数分析
    浅谈Samsung Exynos4412处理器
    TTL电平,CMOS电平,232/485电平,OC门,OD门基础知识
    (转载)跟Classic ARM 处理器说拜拜——Atmel SAMA5D3 Xplained开发板评测
    (转载)Quartus II中FPGA的管脚分配保存方法(Quartus II)
    DE2资源集锦
    收到DE2+LCM+ D5M套件,拾回DE2,努力,奋进!
    windows 服务器时间同步失败处理方法
    机械加工仿真软件-----三维弯管机仿真系统
  • 原文地址:https://www.cnblogs.com/njcolin/p/3506278.html
Copyright © 2011-2022 走看看