BOM概述

天怀

已于 2022-06-29 16:17:16 修改

阅读量153

点赞数

分类专栏：前端学习路线文章标签： javascript html 前端

于 2022-06-08 15:03:08 首次发布

本文链接：https://blog.csdn.net/qq_39165819/article/details/125179794

版权

前端学习路线专栏收录该内容

17 篇文章 0 订阅

订阅专栏

BOM的构成
BOM比DOM更大些
BOM中的元素有 document、location、navigation、screen、history
调整窗口大小事件
在这里插入图片描述
举例

  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: darksalmon;
    }
  </style>
<body>
  <script>
    window.addEventListener('load',function (){
      var div=document.querySelector('div');
      window.addEventListener('resize',function (){
        console.log(window.innerWidth);
        if (window.innerWidth <= 800){
          div.style.display = 'none';
        }else {
          div.style.display='block'
        }
      })
    })
  </script>
<div></div>
</body>

定时器setTimeout 延时单位是毫秒，可以省略，省略时间默认是0
使用方法

    function f(){
        alert('三秒后爆炸');
    }
    function w(){
        alert('五秒后爆炸');
    }
    var threeBoom= setTimeout(f,3000);
    var fiveBoom = setTimeout(w,5000);
    //或者
    //var threeBoom=setTimeout('f()',3000)

setTimeout也称为回调函数callback
普通函数是按照代码顺序直接调用。
而该函数需要等待时间，时间到了才调用这个函数，因此称为回调函数。
举例

  <img src="../first/image/bird.jpg" style="width: 50px;height: 50px">
  <script>
      var img=document.querySelector('img');
    setTimeout(function (){
        img.style.display='none'
    },5000)
    </script>

清除定时器

 clearTimeout(threeBoom);

倒计时效果

  <style>
    div{
      width: 400px;
      height: 300px;
      margin: auto auto;
    }
    span{
      width: 100px;
      height: 50px;
      background-color: black;
      color: white;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
    }
  </style>
<body>
  <div>
    <span class="hour">1</span>
    <span class="minute">2</span>
    <span class="second">3</span>
  </div>
  <script>
    //1.获取元素
    var hour = document.querySelector('.hour');
    var minute = document.querySelector('.minute');
    var second = document.querySelector('.second');
    var inputTime = +new Date('2019-5-1 18:00:00');
    countDown();//先调用一次，防止第一次刷新页面有空白
    //2.开启定时器
    setInterval(countDown,1000);
    function countDown(){
      var nowTime = +new Date();//返回得是当前时间总得毫秒数
      var times = (inputTime-nowTime) / 1000;//times是剩余时间秒数
      var h=parseInt(times/60/60%24);//时
      h = h<10?'0'+h:h;
      hour.innerHTML = h;
      var m = parseInt(times/60%60);//分
      m = m<10?'0'+m:m;
      minute.innerHTML=m;
      var s = parseInt(times%60);//当前的秒
      s=s<10?'0'+s:s;
      second.innerHTML = s;
    }
  </script>
</body>

消息发布定时器定时

      var time=3;
  var timer= setInterval(function (){
          btn.disabled=true;
          if (time==0){
            clearInterval(timer);
            btn.disabled=false;
            time=10;
            btn.innerHTML='发布'
          }else {
            time--;
            btn.innerHTML='还剩下'+time+'s';
          }
        },1000)
      }
    }

效果