BOM浏览器对象

DOM BOM区别

窗口加载事件

窗口加载事件 当文档页面文档内容完全加载完就会触发该事件
有了window.onload之后可以把js文件放在任意地方
但是这个window.onload传统方式只能写一次，多个则只执行最后一个
所以我们使用addEventListener就没有限制

<script>
      window.onload = function () {
        var btn = document.querySelector('button')
        btn.addEventListener('click', function () {
          alert('点击我')
        })
      }
      window.onload = function () {
        alert(11)
      }

      window.addEventListener('load', function () {
        var btn = document.querySelector('button')
        btn.addEventListener('click', function () {
          alert('点击我')
        })
      })
      window.addEventListener('load', function () {
        alert(22)
      })
      document.addEventListener('DOMContentLoaded', function () {
        alert(33)
      })

    </script>
    <button>点击</button>

load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等
DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些

案例 计时器

<style>
        div {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            /* background-color: #333; */
            font-size: 20px;
            color: #333;
            text-align: center;
            line-height: 40px;
        }
        
        .begin {
            display: none;
        }
        
        button {
            margin: 30px 20px;
        }
    </style>

<div>
        你输入的日期距今还有
        <span class="year"></span>年
        <span class="Month"></span>月

        <span class="date"></span>日
        <span class="hour"></span>时
        <span class="minute"></span>分
        <span class="second"></span>秒
        <br>
        <button class="begin">继续倒计时</button>
        <button class="stop">停止倒计时</button>
    </div>

    <script>
        // 1. 获取元素 
        var year = document.querySelector('.year') //年
        var Month = document.querySelector('.Month')
        var date = document.querySelector('.date')
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子

        var inputTime = new Date(prompt('请输入您想输入的日期(格式为Y-M-D)')); // 返回的是用户输入时间总的毫秒数

        var begin = document.querySelector('.begin') //获取开启按钮
        var stop = document.querySelector('.stop') //获取停止按钮
        timer(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        newtimer = setInterval(timer, 1000);

        function timer() {
            var nowTime = new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var y = parseInt(times / 60 / 60 / 24 / 365 % 12); //年
            // y = y < 10 ? '0' + y : y;
            year.innerHTML = y;

            var m = parseInt(times / 60 / 60 / 24 % 365 / 30); //月
            // m = m < 10 ? '0' + m : m;
            Month.innerHTML = m;

            var d = parseInt(times / 60 / 60 / 24 % 365); //天
            d = d < 10 ? '0' + d : d;
            date.innerHTML = d;

            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;
        }

        begin.addEventListener('click', function() {
            newtimer = setInterval(timer, 1000);
            stop.style.display = 'block'
            begin.style.display = 'none'
        })
        stop.addEventListener('click', function() {
            clearInterval(newtimer)
            stop.style.display = 'none'
            begin.style.display = 'block'
        })
    </script>

计时器效果图

JS执行机制

location 对象