JavaScript案例4：实现倒计时并锁定按钮

最新推荐文章于 2024-05-17 13:52:13 发布

蟹老板12138

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量120

点赞数

分类专栏：基础练习文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_63469637/article/details/129307455

版权

基础练习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.效果图

2.知识点

计时器可使用及其关闭

DOM对象的获取和使用 button只能使用innerTHML查询

3.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        button {
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <button disabled>还有10秒钟要爆炸!!!!!</button>



    <script>
        // 1.获取元素
        const btn = document.querySelector('button')
        // console.log(btn)

        // 2.设置倒计时函数
        let i = 10
        let n = setInterval(
            function(){
                i--
                btn.innerHTML=`还有${i}秒钟要爆炸!!!!!`
                if(i === 0){
                    clearInterval(n)
                    btn.innerHTML = `救人`
                    btn.disabled = false

                }
            }, 
        1000)
    </script>



</body>
</html>