随笔- 68 文章- 0 评论- 0 阅读- 15434

javaScriptBOM

------------恢复内容开始------------

　　BOM概述

1.1BOM=browser Object Model 浏览器对象模型，他提供了独立于内容而与浏览器窗口进行交互的对象，核心就是window

1.2BOM的构成：BOM比DOM大，window对象是浏览器的顶级对象，它具有算重色，BOM是一个全局对象，函数都会变成window的属性和方法，注意window下的一个特殊的属性window.name

2window对象的常见事件

2.1窗口加载事件:window.onlocad当文档的内容完全加载完毕会触发到该事件（包括图像、脚本文件，css文件），就会调用的处理函数　　

<body>
    <button>按钮</button>

  <script>
       window.onload=function(){
        var btn= document.querySelector('button')
       btn.addEventListener('click',function(){
         alert(111)
       })
       }
  </script>
  
</body>

2.2调整窗口大小的事件：window.onresize是调整窗口大小的加载事件，触发时调用处理函数

<body>
  <div></div>
 <script>
   var div=document.querySelector('div');
    window.addEventListener('load',function(){
      window.addEventListener('resize',function(){
      console.log(window.innerWidth);
      console.log('变换了');
      if(window.innerWidth<=800){
        div.style.display='none';
      }else{
        div.style.display='block';
      }
    }) 
    })
 </script>
</body>

　　定时器

1.1定时器setTimeout()该定时器在定时器到期之后执行调用函数

     <style>
       div{
          height: 500px;
          width:  500px;
          background-color: blue;
    }
     </style>
</head>
<body>
  <div>我是广告</div>
  <button>消除定时器</button>
  <script>
    var myDiv=document.querySelector('div');
    var  btn=document.querySelector('button')
     var myTime= window.setTimeout(function(){
      myDiv.style.display='none';
    },5000)
    btn.addEventListener('click',function(){
      window.clearTimeout(myTime)
    })
  </script>
 </body>

1.2setInterval（）其语法格式跟setTimeout语法一样唯一区别在于 setInterval（）每隔这个延迟时间，就去调用一会这个回调函数，会调用多次，重复调用这个函数，而setTimeout只会调用一次

<body>
     <button class="begin">开启定时器</button>
     <button class="stop">停止定时器</button>
  <script>
     var begin = document.querySelector('.begin');
     var stop = document.querySelector('.stop');
     //全局变量
     var  timer=null
     begin.addEventListener('click',function(){
      timer =setInterval(function(){
                 console.log('NI HAO MA');
               },2000)
     })
　　　//停止setInterval定时器　　
    stop.addEventListener( 'click',function(){
      clearInterval(timer);
    })

  </script>
 </body>

案例：

<body>
       手机号码:<input type="number"><button>发送</button>
  <script>
     //功能分析
     //按钮点击之后会禁用disabled为true
     //同时按钮里的内容会变化，button里的内容是通过innerHTML修改的
     //里面秒数是有变换的，需定时器’
     //定义一个变量在定时器里不断递减
     //如果变量为0，说明时间到了，我们需要停止定时器，并且复原按钮原始状态
     var btn=document.querySelector('button')
     var time=60
    btn.addEventListener('click',function(){
        btn.disabled=true;   
      var clearTime= setInterval(function(){
        if(time==0){
            //清除定时器和复原按钮
            clearInterval(clearTime);
            btn.disabled=false;
            btn.innerHTML='发送';
            time=60;
        }else{　　　　
          btn.innerHTML='还剩下'+time+'秒';
        time--;
        }   
      },1000)
    })
  </script>
 </body>