JS笔记 BOM之Window对象定时器简介

Posted 2021-08-27 言人冰

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS笔记 BOM之Window对象定时器简介相关的知识，希望对你有一定的参考价值。

BOM（浏览器对象模型）重点！！！

Window 对象
Navigator 对象
Screen 对象
History 对象
Location 对象

Window 对象

常用几种方法：
alert(); 显示带有一段消息和一个确认按钮的警告框。
confirm( );显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt( );显示可提示用户输入的对话框。

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

可以将一个函数，每隔一段时间(单位毫秒)调用一次，故该方法需传2个参数
1、回调函数
2、间隔时间

clearInterval() 取消由 setInterval() 设置的 timeout。

需要传一个定时器的标识给该方法

setTimeout() 在指定的毫秒数后调用函数或计算表达式。

用法跟setInterval() 差不多，功能：使函数延时调用
【延时调用只调用一次函数】

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

用法跟clearInterval()差不多，功能：关闭函数延时调用

倒计时效果

  <style type="text/css">
      #count{
        font-size: 36px;
        width:50px;
        height: 50px;
        background-color: lightblue;
        margin: 30px;
        text-align: center;
        color: antiquewhite;
        text-shadow: 2px 2px 2px black;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
          var count = document.getElementById("count");
          //setInterval();传两个形参：1、回调函数  2、间隔时间（单位：毫秒）
          // clearInterval( );可以用来关闭一个定时器（需要一个定时器的标识）
          var num = 10;
          var timer = setInterval(function(){
                count.innerhtml = num--;
                if(num==-1){//关闭定时器
                    clearInterval(timer);
                    alert("时间到！");
                }
          },1000);
      };
    </script>
</head>
<body>
    <div id="count">GO</div>
</body>

轮播效果图【sesetInterval（）和clearInterval( )的应用】

实现网页背景图的自动轮播

1、创建一个数组来存放图片的路径
2、将索引设置为0，即从数组的第一个元素开始播放
3、用Window的方法sesetInterval（）来进行定时更换body的背景图片
4、当图片播放至最后一张时，将index设置为0
【注】当连续点击多次“开始”按钮时，你会发现图片切换的速度会变得非常快，
原因是每点击一次“开始”按钮，定时器就会被触发一次，且“关闭”按钮没办法使
轮播停止了，因为clearInterval()关掉的是最新的那个定时器，故

解决方案：在触发“开始”按钮之前就把上一次的定时器给关闭

 <style type="text/css">
    body{
        background-image: url(p1.jpg);
        background-repeat: no-repeat;
        background-size:cover;
        transition: all 2s ease;
    }
    </style>
    <script type="text/javascript">
     window.onload = function(){
        var body = document.getElementsByTagName("body")[0];
         var imgArr = ["p1.jpg","p2.jpg","p3.jpg","p4.jpg","p5.jpg"];
         var index = 0 ,timer;
         var btn01 = document.getElementById("btn01");
         var btn02 = document.getElementById("btn02");
         btn01.onclick = function(){//开始轮播
            clearInterval(timer);
            timer = setInterval(function(){
            body.style.backgroundImage = "url("+imgArr[index]+")";
            index++;
            if(index>=imgArr.length){index=0}
         },2000)
         };
         btn02.onclick = function(){
             clearInterval(timer);
         };
     };
    </script>
</head>
<body>
    <button id="btn01">开始</button>
    <button id="btn02">停止</button>
</body>

通过按钮来控制div的左右移动

 <style type="text/css">
    #box{
        position:absolute;
        margin-top: 20px;
        background-color:lightgreen;
        width: 30px;
        height: 30px;
        left: 0;
        transition: all 0.2s;
    }
    .bb{
        position:absolute;
        left:800px;
        border-left: 2px solid red;
        width:0;
        height: 700px;
    }
    </style>
    <script>
        window.onload = function(){
         var timer;
          var btn01 = document.getElementById("btn01");
          var btn02 = document.getElementById("btn02");
          var box = document.getElementById("box");
        //   btn01.onclick = function(){
        //     //   获取box的原来的left值
        //     var oldValue = parseInt(getStyle(box,"left"));
        //     clearInterval(timer);
        //    timer = setInterval(function(){
        //        //   获取box的原来的left值
        //     var oldValue = parseInt(getStyle(box,"left"));
        //     var newValue = oldValue + 109;
        //     if(newValue>800)newValue = 800;
        //     box.style.left = newValue + "px";
        //     if(newValue == 800){
        //         clearInterval(timer);
        //     }
            
        // },1000);
        //   };
        //   var btn02 = document.getElementById("btn02");
        //   btn02.onclick = function(){
        //       clearInterval(timer);
        //      timer =  setInterval(function(){
        //     var oldValue = parseInt(getStyle(box,"left"));
        //     var newValue = oldValue - 109;
        //     if(newValue<=0)newValue = 0;
        //     box.style.left = newValue + "px";
        //     if(newValue == 0){
        //         clearInterval(timer);
        //     }
        //       },1000);

        //   };
        
        /*动画函数move
        参数：1、obj: 要执行动画的对象
              2、target： 执行动画的目标位置
              3、speed: 移动的速度 (正：表示向右移；负：表示向左移)
              
        */
          function move(obj,target,speed){
                clearInterval(timer);//关上1个定时器
                //获取元素目前的位置
                var current = parseInt(getStyle(obj,"left"));
                if(current>target)speed = -speed;
                timer = setInterval(function(){//开启一个定时器用来执行动画效果
                    var oldValue = parseInt(getStyle(obj,"left"));//获取对象原来的left值
                    var newValue = oldValue + speed;//在旧的基础上增加
                  //当向左移动时,需判断newValue是否小于target
                  //当向右移动时,需判断newValue是否大于target
                  if((speed < 0 && newValue< target) || (speed > 0 && newValue > target))newValue = target;
                    obj.style.left = newValue + "px";//将新值赋给对象
                    //达到target，关闭定时器
                    if(newValue == target) clearInterval(timer);
            
                },30);
          };
          btn01.onclick = function(){ move(box,800,10)};
          btn02.onclick = function(){ move(box,0,10)};
         
          //构造函数getStyle(obj,name)获取元素当前的属性
          /*
           参数  obj 要获取样式的元素
                 name 要获取的样式名
          */
          function getStyle(obj,name){
              if(window.getComputedStyle){
                //正常浏览器的方式，具有getComputedStyle()方法
                return getComputedStyle(obj,null)[name];
              }else{
                return obj.currentStyle[name];
              }
          };
        };
    </script>
</head>
<body>
    <div class="bb"></div>
    <button id="btn01">Run</button>
    <button id="btn02">Back</button>
    <div id="box"></div>
    
</body>