如何利用js脚本制作倒序数字时钟_js倒序时钟脚本编写与展示-js教程-PHP中文网

如何利用js脚本制作倒序数字时钟_js倒序时钟脚本编写与展示

爱谁谁

发布： 2025-11-13 20:33:06

原创

676人浏览过

倒序数字时钟通过JavaScript定时器实现，先在HTML中设置显示容器，再用setInterval每秒更新剩余时间，格式化为MM:SS并补零，时间归零后清除定时器并提示结束；可扩展用户输入、暂停重启等功能，核心是时间计算与DOM实时更新。

如何利用js脚本制作倒序数字时钟_js倒序时钟脚本编写与展示

想要实现一个倒序数字时钟，核心是使用 JavaScript 的定时器功能，结合时间计算逻辑，不断更新页面上的显示内容。下面一步步讲解如何编写并展示一个简单的倒计时数字时钟。

1. 倒序时钟的基本结构

首先需要在 HTML 中设置一个容器，用于显示倒计时的时间。通常以“分:秒”或“时:分:秒”的格式展示。

示例HTML代码：

<div id="countdown">02:00</div>

登录后复制

这个 div 将用来实时显示剩余时间。初始设定为 2 分钟（120秒）。

2. 编写JavaScript倒计时逻辑

使用 setInterval 每隔1秒执行一次时间更新，当时间归零时清除定时器，并可触发结束回调。

JS脚本示例：

function startCountdown(duration) {
    let timeLeft = duration; // 时间以秒为单位
    const display = document.getElementById('countdown');
<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">const timer = setInterval(() => {
    const minutes = Math.floor(timeLeft / 60);
    const seconds = timeLeft % 60;

    // 格式化显示：补零
    display.textContent = 
        (minutes < 10 ? '0' + minutes : minutes) + ':' + 
        (seconds < 10 ? '0' + seconds : seconds);

    if (timeLeft <= 0) {
        clearInterval(timer);
        display.textContent = '00:00';
        alert('倒计时结束！');
    } else {
        timeLeft--;
    }
}, 1000); // 每1000毫秒（1秒）执行一次

登录后复制

}

// 启动倒计时：传入总秒数（例如120秒 = 2分钟） startCountdown(120);

这段脚本实现了从指定秒数开始倒数，并格式化输出 MM:SS 格式的时间。

3. 自定义倒计时时间（可选扩展）

可以加入输入框让用户自定义倒计时时间，提升交互性。

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

增强版HTML：

<input type="number" id="minutes" placeholder="输入分钟">
<button onclick="setCustomTime()">开始倒计时</button>
<div id="countdown">00:00</div>

登录后复制

对应JS函数：

function setCustomTime() {
    const input = document.getElementById('minutes');
    const minutes = parseInt(input.value, 10);
<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">if (isNaN(minutes) || minutes <= 0) {
    alert('请输入有效分钟数！');
    return;
}

const totalSeconds = minutes * 60;
startCountdown(totalSeconds);

登录后复制

}

这样用户就可以自由设置倒计时的长度，比如输入5，就会开始5分钟倒计时。