JS基于递归实现倒计时效果的方法

当我们需要倒计时的效果时，JS基于递归实现倒计时就是一种很不错的方案了。接下来我将为大家讲解如何使用JS实现基于递归的倒计时效果。

步骤一：准备样式

通过CSS设置我们的倒计时样式，使页面表现更加美观。这里我们假设我们的倒计时样式类名为 countdown。

.countdown {
    font-size: 24px;
    color: #666;
}

步骤二：编写 HTML

在页面上添加我们的倒计时容器元素。这里我们使用一个 div 元素，并将其类名设置为 countdown。

<div class="countdown"></div>

步骤三：编写 JavaScript

接下来就开始编写我们的递归倒计时代码了。

首先，我们声明一个倒计时函数，该函数将接受一个整型参数 time，表示倒计时总秒数，然后在每次调用时减少该参数的值，直到倒计时结束。每次递归调用函数，我们都会将剩余秒数减 1，并调用 setTimeout 函数来设置下一次递归的调用。

function countdown(time) {
    // 获取倒计时容器元素
    var countdownEl = document.querySelector('.countdown');

    // 如果剩余时间小于等于 0，则停止倒计时，显示时间到了的提示
    if (time <= 0) {
        countdownEl.textContent = '时间到了！';
        return;
    }

    // 获取小时、分钟、秒数
    var hours = Math.floor(time / 3600);
    var minutes = Math.floor((time % 3600) / 60);
    var seconds = time % 60;

    // 格式化时间
    var timeStr = zeroPadding(hours) + ':' + zeroPadding(minutes) + ':' + zeroPadding(seconds);

    // 更新倒计时容器元素的内容
    countdownEl.textContent = timeStr;

    // 设置 1000 毫秒后再次调用倒计时函数
    setTimeout(function() {
        countdown(--time);
    }, 1000);
}

在这里，我们采用了一个名为 zeroPadding 的辅助函数，用来确保在最终格式化的时间字符串中，任何数字都至少保留两位。

function zeroPadding(num) {
    return ('0' + num).slice(-2);
}

步骤四：调用倒计时函数

最后，我们只需要在页面加载完毕后，调用 countdown 函数，传入所需倒计时的总秒数即可。

window.onload = function() {
    countdown(60);
};

示例

以下是一个基于递归实现倒计时效果的简单示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS基于递归实现倒计时效果的方法</title>
    <style>
        .countdown {
            font-size: 24px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="countdown"></div>
    <script>
        function countdown(time) {
            var countdownEl = document.querySelector('.countdown');

            if (time <= 0) {
                countdownEl.textContent = '时间到了！';
                return;
            }

            var hours = Math.floor(time / 3600);
            var minutes = Math.floor((time % 3600) / 60);
            var seconds = time % 60;

            var timeStr = zeroPadding(hours) + ':' + zeroPadding(minutes) + ':' + zeroPadding(seconds);

            countdownEl.textContent = timeStr;

            setTimeout(function() {
                countdown(--time);
            }, 1000);
        }

        function zeroPadding(num) {
            return ('0' + num).slice(-2);
        }

        window.onload = function() {
            countdown(60);
        };
    </script>
</body>
</html>

上面的代码中，我们将倒计时设置为 60 秒。每次递归调用 countdown 函数，我们都会将剩余秒数减 1 并重新设置 setTimeout，从而实现动态倒计时效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS基于递归实现倒计时效果的方法 - Python技术站