当前位置：

html 倒计时代码大全

作者：
暂无
日期：
2023/11/28
所属分类：
html教程

以下是一个使用 HTML、CSS 和 JavaScript 实现的简单倒计时示例：

html
<!DOCTYPE html><html><head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="script.js"></script></head><body>
    <div class="countdown">
        <span id="days">00</span>:
        <span id="hours">00</span>:        
        <span id="minutes">00</span>:        
        <span id="seconds">00</span>
    </div></body></html>

css
.countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;}.countdown span {
    font-size: 64px;
    color: #fff;
    text-align: center;}

javascript
// JavaScript 代码function updateCountdown() {
    const now = new Date();
    const end_date = new Date("2023-07-01 00:00:00");
    const time_diff = end_date - now;

    const days = Math.floor(time_diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((time_diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((time_diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((time_diff % (1000 * 60)) / 1000);

    document.getElementById("days").innerHTML = days;
    document.getElementById("hours").innerHTML = hours;
    document.getElementById("minutes").innerHTML = minutes;
    document.getElementById("seconds").innerHTML = seconds;}setInterval(updateCountdown, 1000);

上述代码中，我们使用 JavaScript 计算当前时间与结束时间之间的时间差，并将其转换为天、小时、分钟和秒的形式。然后，我们使用 setInterval 函数每隔 1 秒更新倒计时显示。

请注意，你需要将 2023-07-01 00:00:00 替换为你想要设置的倒计时结束时间。此示例将在 2023 年 7 月 1 日 0 时 0 分 0 秒时结束倒计时。

你可以将上述代码保存为 HTML 文件，并在浏览器中打开它，即可看到一个简单的倒计时。

<br/>