BOM ------ 定时器-阿里云开发者社区

BOM ------ 定时器

2023-06-12 46

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： BOM ------ 定时器

定时器 setTimeout (只执行一次)

setTimeout(调用函数, 延时时间)

页面中可能有多个定时器 可以给定时器添加标识符(名字)

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

2秒后自动关闭广告

利用定时器, 两秒后在函数体内隐藏显示的内容

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

清除定时器 clearTimeout(只执行一次)

clearTimeout()

  //html代码
  <button>点击清除定时器</button>
  //js代码
  var btn = document.querySelector('button')
    var timer = setTimeout(function() {
        alert('bong~')
    },2000)
    btn.addEventListener('click', function(){
        clearTimeout(timer) //传入要清除的定时器
    })

定时器 setInterval (循环执行)

setInterval(调用函数, 延时时间)

  setInterval(function() {
        console.log('继续输出');
    },1000)  //每隔1s输出一次

倒计时效果

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  //把剩余的秒 给秒盒子
        }

清除定时器 clearInterval (循环执行)

clearInterval()

  //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)
    })

不积跬步无以至千里不积小流无以成江海

文章标签：

JavaScript