定时器setInterval(function(){},1000(时间毫秒))/清除定时器-`clearInterval()`/多个计时器叠加问题/倒计时秒杀/

最新推荐文章于 2024-03-10 15:49:45 发布

喵帕斯_喵太

最新推荐文章于 2024-03-10 15:49:45 发布

阅读量4.5k

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/116103170

版权

javascript 专栏收录该内容

58 篇文章 2 订阅

订阅专栏

01-定时器-`setInterval(function(){},1000(时间毫秒)`

    <script>
        // 需求：间隔一段时间就输出一次：前端小白

        // 定时器：setInterval(function(){},1000时间)
        setInterval(function () {
            console.log('前端小白')
        }, 1000)
    </script>

02-定时器-自动动画案例

    <style>
        .box {
            position: absolute;
            left: 0;
            top: 0;

            width: 100px;
            height: 100px;
            background-color: red;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script>
        // 需求：盒子宽度每间隔1s钟，变化10px


        let box = document.querySelector('.box')
        setInterval(function () {

            box.style.width = box.offsetWidth + 10 + 'px'

        }, 1000)

    </script>
</body>

</html>

03-定时器-独立性

<body>
    <script>
        console.log('我开始了')


        setInterval(function () {
            console.log('定时器开始了')
        }, 0)

        console.log('我结束了')

        // 定时器的执行一定在所有主代码的最后执行（不管要等多久）
    </script>
</body>

注意：
1.定时器的执行一定在所有主代码的最后执行（不管要等多久）。

04-定时器-清除定时器-`clearInterval()`

<body>
    <button class="start">开始</button>
    <button class="stop">结束</button>
    <h1>0</h1>

    <script>
        // 需求：点击开始，数字每次变化1（每隔1s钟），点击结束：可以清除效果

        // 1. 开始事件
        // 定义一个变量：保存定时器的句柄
        let timeId
        document.querySelector('.start').onclick = function () {
            // 2. 处理：让h1里面的元素的值每s钟+1
            // 开启定时器
            timeId = setInterval(function () {
                document.querySelector('h1').innerText++
            }, 1000)

            console.log(timeId)

            // 关闭定时器：clearInterval(timeId)
            // clearInterval(timeId)
        }

        // 1. 结束事件
        document.querySelector('.stop').onclick = function () {
            // 2. 清除定时器
            clearInterval(timeId)
        }


    </script>
</body>

</html>

05-定时器-多个定时器叠加的问题

<body>
    <button class="start">开始</button>
    <button class="stop">结束</button>
    <h1>0</h1>

    <script>
        // 需求：点击开始，数字每次变化1（每隔1s钟），点击结束：可以清除效果

        // 1. 开始事件
        // 定义一个变量：保存定时器的句柄
        let timeId
        /* document.querySelector('.start').onclick = function () {
            // 2. 处理：让h1里面的元素的值每s钟+1
            // 开启定时器
            timeId = setInterval(function () {
                document.querySelector('h1').innerText++
            }, 1000)

            console.log(timeId)

            // 关闭定时器：clearInterval(timeId)
            // clearInterval(timeId)
        } */

        // 1. 结束事件
        /*  document.querySelector('.stop').onclick = function () {
             // 2. 清除定时器
            clearInterval(timeId)
         } */

        // 解决定时器多个叠加的问题

        // 1. 让按钮不能再次点击：取消onclick事件
        let start = document.querySelector('.start')

        /*  start.onclick = function () {
             // 2. 处理：让h1里面的元素的值每s钟+1
             // 开启定时器
            timeId = setInterval(function () {
                document.querySelector('h1').innerText++
            }, 1000)

             // 清除点击事件
            start.onclick = null
         } */

        //  针对不需要重复的内容

        // 2. 禁用按钮：用户体验不好
        /* start.onclick = function () {
            // 2. 处理：让h1里面的元素的值每s钟+1
            // 开启定时器
            timeId = setInterval(function () {
                document.querySelector('h1').innerText++
            }, 1000)

            // 禁用按钮
            start.disabled = true
        }
        // 结束后：又再次允许点击
        document.querySelector('.stop').onclick = function () {
            // 2. 清除定时器
            clearInterval(timeId)

            // 开放start按钮
            start.disabled = false
        }

        // 局限性：针对表单元素
 */

        // 3. 点击添加定时器之前：先干掉可能存在的定时
        start.onclick = function () {
            // 1. 先清除可能存在的定时器
            clearInterval(timeId)

            // 2. 处理：让h1里面的元素的值每s钟+1
            // 开启定时器
            timeId = setInterval(function () {
                document.querySelector('h1').innerText++
            }, 1000)
        }
        // 结束后：又再次允许点击
        document.querySelector('.stop').onclick = function () {
            // 2. 清除定时器
            clearInterval(timeId)
        }
        // 缺点：用户操作的时间比定时器的间隔时间还要短：给用户的感觉好像没有执行

    </script>
</body>

</html>

注意：计时器叠加的三个解决办法
1.让按钮不能再次点击：取消onclick事件
2. 禁用按钮：用户体验不好
3. 点击添加定时器之前：先干掉可能存在的定时：用户操作的时间比定时器的间隔时间还要短：给用户的感觉好像没有执行

06-定时器-倒计时秒杀案例

    <style>
        .box {
            width: 200px;
            height: 100px;
            margin: 100px auto;
        }

        span {
            display: inline-block;
            width: 30px;
            height: 40px;
            line-height: 40px;
            background-color: #222;
            color: #fff;
            text-align: center;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div class="box">
        <span id="spanHour">00</span>
        <span>:</span>
        <span id="spanMin">06</span>
        <span>:</span>
        <span id="spanSec">15</span>
    </div>

    <script>
        // 需求：时间倒计时，到0时0分0秒的时候：结束

        // 1. 获取要用到的元素：时分秒
        const hour = document.querySelector('#spanHour')
        const min = document.querySelector('#spanMin')
        const sec = document.querySelector('#spanSec')
        // 2. 准备定时器
        let timeId = setInterval(function () {
            // 2.1 获取时间信息：变成数字
            let h = parseInt(hour.innerText)
            let m = parseInt(min.innerText)
            let s = parseInt(sec.innerText)
            // 2.2 秒减少
            s--
            // 2.3 判定：秒是否小于0，如果小于0：分 - 1，秒重新变回59
            if (s < 0) {
                s = 59
                m--
                // 2.4 判定：分是否小于，如果小于0：时 - 1，分重新变回59
                if (m < 0) {
                    m = 59
                    h--
                }
            }
            // 前导0（前补0）
            if (h < 10) h = '0' + h
            if (m < 10) m = '0' + m
            if (s < 10) s = '0' + s

            // 2.5 将数据写回到元素中去
            hour.innerText = h
            min.innerText = m
            sec.innerText = s

            // 2.6 时分秒都等于0：结束定时器，秒杀开始
            if (h == 0 && m == 0 && s == 0) {
                clearInterval(timeId)
                hour.parentElement.innerHTML += `
                    <div>秒杀开始</div>
                `
                // alert('秒杀开始')
            }
        }, 10)
    </script>
</body>

</html>

喵帕斯_喵太

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
定时器setInterval(function(){},1000(时间毫秒))/清除定时器-`clearInterval()`/多个计时器叠加问题/倒计时秒杀/

01-定时器-setInterval(function(){},1000(时间毫秒) <script> // 需求：间隔一段时间就输出一次：前端小白 // 定时器：setInterval(function(){},1000时间) setInterval(function () { console.log('前端小白') }, 1000) </script>02-定时器-自动
复制链接

扫一扫