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>

 

 

原文地址:https://www.cnblogs.com/njcolin/p/3506278.html