BOM（一）：window对象的常见事件（页面加载、调整窗口大小）、定时器

小粉粉hhh

于 2024-03-10 15:50:24 发布

阅读量620

点赞数 11

文章标签：前端

本文链接：https://blog.csdn.net/hdhhdhbsjxbdhvyg/article/details/136597277

版权

bom管刷新页面或者前进后退页面，还有滚动条啥的，没有统一标准所以在不同网页中alert啥的都不一样

一、页面加载事件

以前说script的标签还有内容要写到下面，因为js从上到下执行，现在用window.load添加页面加载事件，规定是文档内容全部加载完毕（图片、文字、css等），才来执行函数

（1）传统方式添加

<body>
    <script>
        window.onload=function(){
            var btn=document.querySelector('button');
            btn.onclick=function(){
                alert('我被点击喽');
            }
        }
    </script>
    <button>hh</button>

</body>

有了这个js被放到页面中任何一个位置都行

注意：这种传统注册方式只能用一次，多个的话会覆盖前面的，只显示最后一个

（2）使用方法监听注册事件

<script>
    window.addEventListener('load',function(){
        var btn=document.querySelector('button');
        btn.onclick=function(){
            alert('我被点击喽');
        }
    })
    
</script>
<body>
   
    <button>hh</button>

</body>

这个没有限制，写多少个都行，点一次显示第一个再显示第二个

（3）DOMContentLoaded

.load不是得等所有图片啥的加载完毕之后才来执行吗，但是如果我页面的图片很多的话，加载起来就会慢，影响用户体验感，所以用DOMContentLoaded

DOMContentLoaded仅当dom加载完，不包括图片，样式表，flash

window.addEventListener('load', function () {
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            alert('22');
        })
    })

    window.addEventListener('DOMContentLoaded',function(){
        var btn=document.querySelector('button');
        btn.onclick=function(){
            alert('33');
        }
    })

这次会先显示33再显示22

二、调节窗口大小事件

window.onresize

window.addEventListener('resize', function () {
          console.log('我变化了');
      })

宽度一变它就输出

我们经常用这个来完成一些响应式布局，比如window.innerWidth宽度达到多少了我页面就怎么怎么显示。

div{
    width: 200px;
    height: 200px;
    background-color: pink;
}
</style>

<body>
   <div></div>
    <script>
        var div=document.querySelector('div');
        window.addEventListener('resize', function () {
          if(window.innerWidth<=900)
          {
              div.style.display='none';
          }
          else{
            div.style.display='block';
          }
      })
  
      
  </script>

浏览器小于900盒子就隐藏，大于再出来

我写的时候在900后面加了+’px‘，然后就不行，我感觉是因为前面就是width

三、定时器

和时间打交道的（倒计时、过多久轮播图自动翻图片）

1.window.setTimeout(调用函数，[延迟的毫秒数])

这个函数叫回调函数，上一件事做完再回来调用这个函数

时间到了之后就去调用这个函数（【】内可以省略默认是0,window也省略）

setTimeout(function(){
           console.log('hh');
       },2000)

2s之后输出一个hh，然后就不再输出了，这个不是循环

注意：页面中可能有很多的定时器，所以我们给他们命名一下

var t1=setTimeout(fn,2000)

           function fn(){
           console.log('hh');
       }

不用再调用了，2秒之后就输出出来了，页面中所有的定时器同时开始倒计时，是一起进行的

案例：5s后自动关闭广告

div{
    width: 132px;
    height: 469px;
    background: url(ad.jpg);
}
</style>

<body>
    <div>
       
    </div>

    <script>
        var div=document.querySelector('div')
       setTimeout(fn,5000)

           function fn(){
           div.style.display='none';
       }

2.停止定时器clearTimeout(timeout ID)

<button>点击停止定时器</button>

    <script>
        var btn=document.querySelector('button');
        btn.onclick=function(){
           clearTimeout(t); 
        }
       var t=setTimeout(fn,1000)

           function fn(){
           console.log('hh');
       }

3.循环定时setInterval(回调函数，[延迟的毫秒数])

刚才第一个是到了这个秒数就出现然后就没了，现在这个是循环那几秒播放

 var t=setInterval(fn,1000)

           function fn(){
           console.log('hh');
       }

案例：京东倒计时

核心：三个盒子用innerHTML来放入计算的小时数

div{
    margin-top: 100px;
    width: 50px;
    height: 50px;
    margin-right: 5px;
    color: rgb(233, 227, 227);
    background-color: black;
    display: inline-block;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
}
.hour{
    margin-left: 100px;
}
</style>

<body>
    <div class="hour"></div>
    <div class="fen"></div>
    <div class="miao"></div>

<script>
        var hour=document.querySelector('.hour');
        var fen=document.querySelector('.fen');
        var miao=document.querySelector('.miao');
        var inputTime=+new Date('2024-3-10 18:00:00');
        countDown();
        setInterval(countDown,1000)
        function countDown() {
    var now = +new Date();
    var left = inputTime - now;
    var seconds = parseInt(left / 1000 % 60);  
    var minutes = parseInt(left / 1000 / 60 % 60); 
    var hours = parseInt(left / 1000 / 60 / 60); 
    hours = hours < 10 ? '0' + hours : hours;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    hour.innerHTML = hours;
    fen.innerHTML = minutes;
    miao.innerHTML = seconds;
}
      
  </script>

循环调用函数之前就先调用一次，要不然得等一秒才能出结果

时间案例下去再自己写一次

5.clearInterval(interval ID)清除循环定时器

我写的时候除非把stop写begin里面，要不就是t没被定义，因为它不是全局变量，如果把t放外面的话，var t=null，得写上null，要不之后也是undefined

<script>
        var begin=document.querySelector('.begin');
        var stop=document.querySelector('.stop');
        var t=null;
        begin.onclick=function(){
            t=setInterval(function(){
                console.log('hh');
            },1000)
        }
        stop.onclick=function(){
            clearInterval(t);
        }

      
  </script>

而且吧里面还不能var t=set、、、了

var begin=document.querySelector('.begin');
        var stop=document.querySelector('.stop');
        begin.onclick=function(){
            var t=setInterval(function(){
                console.log('hh');
            },1000)
            stop.onclick=function(){
            clearInterval(t);
        }
        }

我觉得就写它里面挺好的

案例：发送短信

点击按钮之后，60秒之内不能再点击

<body>
   <div>
       <input type="text" name="" id="">
       <button>点击发送短信</button>
   </div>

    <script>
        var btn=document.querySelector('button');
         btn.addEventListener('click',fn)
        function fn(){
            var t=3;
            var timer=setInterval(function(){
                if(t==0)
                {
                     clearInterval(timer);
                    btn.innerHTML='可以重新点击';
                    btn.disabled=false;
                }
                else{
                   
                    btn.innerHTML='还有'+t+'秒可以重新发送';
                    t--;
                    btn.disabled=true;
                    
                }
               
            },1000);
        }
        

      
  </script>

</body>