用定时器倒计时

最新推荐文章于 2022-06-29 20:12:18 发布

飞鸟东来

最新推荐文章于 2022-06-29 20:12:18 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：定时器文章标签：定时器倒计时

本文链接：https://blog.youkuaiyun.com/weixin_41990123/article/details/87553837

定时器专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用定时器实现倒计时功能，从理论到实践，讲解核心步骤和注意事项，帮助读者理解定时器在倒计时场景中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用定时器倒计时</title>
    <style>
        .one {
            margin: 50px auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="one">
        <h1>请输入倒计时的时间(秒)</h1>
        <input id="one" type="text">
        <button id="two">开始</button>
        <h1 id="count"></h1>
    </div>
    <script>
        var one = document.getElementById("one");
        var two = document.getElementById("two");
        var num;
        // 点击按钮时，把文本框中的数值给定时器
        two.onclick = function () {
            num = one.value;
            // 开始倒计时
            var timer = setInterval (function () {
                count.innerHTML = num--;
                // 如果数值小于-1了，就停止计时
                if (num < -1) {
                    clearInterval(timer);
                    count.innerHTML = "倒计时结束！";
                }
            },1000);
        }

    </script>
</body>
</html>