JavaScript在控件上添加倒计时功能的实现代码

2023年6月11日下午12:42 • JavaScript

下面是关于“JavaScript在控件上添加倒计时功能的实现代码”的完整攻略。

1. 实现思路

要在控件上添加倒计时功能，需要实现以下几步：

获取需要显示倒计时的控件对象；
设置倒计时的总时间（例如60秒）和时间间隔（例如每一秒钟）；
创建一个计时器，定时更新控件上显示的倒计时时间；
到达倒计时结束时间后，清除计时器。

2. 实现代码示例

以下是两个实现倒计时功能的示例代码：

示例1.用 setInterval() 方法实现倒计时功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS倒计时示例1</title>
    <style type="text/css">
        body{
            font-size: 18px;
            font-family: '微软雅黑', sans-serif;
        }
    </style>
</head>
<body>

    <h1>倒计时示例1</h1>
    <p>距离离开此页面还有 <span id="seconds">60</span> 秒</p>

    <script type="text/javascript">
        var max_time = 60; //倒计时总时间（单位：秒）
        var countdown = max_time, //倒计时记时
            timer = null; //计时器对象

        // 倒计时函数
        function countDown(){
            if (countdown === 0) {
                clearInterval(timer);
                alert('倒计时结束，页面自动关闭。');
                window.close();
            }
            document.getElementById('seconds').innerHTML = countdown;
            countdown--;
        }

        // 启动倒计时
        timer = setInterval(countDown, 1000); 
    </script>

</body>
</html>

示例2. 用 setTimeout() 方法实现倒计时功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS倒计时示例2</title>
    <style type="text/css">
        body{
            font-size: 18px;
            font-family: '微软雅黑', sans-serif;
        }
    </style>
</head>
<body>

    <h1>倒计时示例2</h1>
    <p>距离离开此页面还有 <span id="seconds">60</span> 秒</p>

    <script type="text/javascript">
        var max_time = 60; //倒计时总时间（单位：秒）

        // 倒计时函数
        function countDown(){
            if (max_time === 0) {
                alert('倒计时结束，页面自动关闭。');
                window.close();
            }else{
                document.getElementById('seconds').innerHTML = max_time;
                max_time--;
                setTimeout(countDown, 1000);
            }
        }

        // 启动倒计时
        setTimeout(countDown, 1000);
    </script>

</body>
</html>

注：以上两个示例中，第一个使用 setInterval() 方法实现倒计时，每秒钟更新一次时间；第二个使用 setTimeout() 方法实现倒计时，每秒钟递归一次，更新一次时间。两种方法实现的相似地方在于，倒计时结束后都会弹出一个提示框，表示倒计时已结束。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript在控件上添加倒计时功能的实现代码 - Python技术站