BOM ------ 定时器

  function callback(){
            alert('bong~')
        }
    var time1 = setTimeout(callback,1000) //1s后调用
    var time2 = setTimeout(callback,3000) //3s后调用

  //html代码
  <img src="广告.png" class="ad">
  //js代码
  var ad = document.querySelector('.ad')
    setTimeout(function(){
        ad.style.display = 'none' //隐藏广告
    }, 2000)

1. 设置3个span, 并设置好样式
2. 获取元素 时 分 秒
3. 先调用下面自定义的函数, 防止页面空白
4. 获取用户输入事件的总毫秒数
5. 通过算法让每个盒子得到相应的内容
6. 设置1s的循环定时器, 每过1s调用一次函数

  //css代码
  span{
        width: 50px;
        height: 50px;
        padding: 20px;
        color: aliceblue;
        background-color: black;
        line-height: 40px;
    }
    //html代码
    <div>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
    //js代码
    // 1.获取元素
        var hour = document.querySelector('.hour')
        var minute = document.querySelector('.minute')
        var second = document.querySelector('.second')
        var inputTime = +new Date('2022-2-18 24: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 //当剩余小时小于10时,前面加个0
            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  //把剩余的秒 给秒盒子
        }

  //html代码
  <button class="begin">开启定时器</button>
    <button class="stop">关闭定时器</button>
    //js代码
    var begin = document.querySelector('.begin')
    var stop = document.querySelector('.stop')
    var timer = null //全局变量 null是一个空对象
    begin.addEventListener('click', function() {
        timer = setInterval(function() {
            console.log('HELLO');
        },1000) //每隔1s输出一次
    })
    stop.addEventListener('click', function () {
        clearInterval(timer) //点击停止定时器
    })

1.按钮点击之后, 会禁用 disabled 为 true
2.同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML 修改
3.里面秒数是有变化的, 因此需要用到定时器
4.定义一个变量, 在定时器里面 不断递减
5.如果变量为0 说明时间到了, 我们需要停止定时器 并且复原按钮初始状态

  //html代码
  手机号: <input type="number"> <button>发送</button>
  //js代码
  var btn = document.querySelector('button')
    var time = 3 //定义剩下的秒数
    btn.addEventListener('click', function(){
        btn.disabled = true
        var timer = setInterval(function() {
            if(time == 0){
                clearInterval(timer)
                btn.disabled = false
                btn.innerHTML = '发送'
                time = 3  //这个 3 需要重新开始
            }else{
                btn.innerHTML = '还剩下' + time + '秒'
                time--
            }
        },1000)
    })