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>

     

     

  • 相关阅读:
    使用XmlDataDocument将数据存储到XML文档
    Dubbo+Nacos 运行异常io.netty.handler.codec.EncoderException: java.lang.NullPointerException
    一、字符串常量Java内部加载
    更高效率,Java快速获取图片尺寸宽高分辨率(支持webp)
    水印宽高比例自适应图片(Java-Thumbnails)
    UEditor 自定义图片视频尺寸校验
    应用宝官方错误日志
    Eclipse使用hibernate插件
    解决Eclipse建立Maven项目后无法建立src/main/java资源文件夹的办法
    [Err] 1022
  • 原文地址:https://www.cnblogs.com/njcolin/p/3506278.html
Copyright © 2011-2022 走看看