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>

     

     

  • 相关阅读:
    使用SOCKET实现TCP/IP协议的通讯
    多线程和高并发的区别
    linq学习之join
    Winform 创建桌面快捷方式并开机启动
    引领5G行业化,广和通荣获“IoT创新大奖”
    全方面的了解超宽带信号高速采集记录回放系统
    浅谈智慧灯杆的通信网建设要求
    逆向工程,调试Hello World !程序(更新中)
    融合智能将成时代方舟?中科创达技术大会向未来答疑
    第十一届蓝桥杯赛后体会和经验分享
  • 原文地址:https://www.cnblogs.com/njcolin/p/3506278.html
Copyright © 2011-2022 走看看