使用HTML+JS实现国庆节倒计时网页实例代码

原创 2024-09-19 16:27:35编程技术

853

马上就是每年10月1日的国庆节了，为了增加节日氛围，许多网站会设置倒计时，以提醒人们国庆节的临近。本文站长工具网将介绍如何使用HTML和JavaScript创建一个简单的国庆节倒计时网页，并附上完整的实例代码供大家参考。

1. 网页设计基础

在开始编写代码之前，我们需要了解一些基本的网页设计概念。

HTML (HyperText Markup Language)是构建网页的标准标记语言，用于定义网页的结构和内容。
CSS (Cascading Style Sheets)用于设置网页的视觉和版式，包括布局、颜色和字体。
JavaScript是一种脚本语言，用于网页的动态效果和交互功能。

2. 创建HTML结构

首先，我们需要创建一个基本的HTML页面结构。这个结构将包含倒计时的显示部分。

html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>国庆节倒计时</title>
    <link rel="stylesheet" href="https://www.zhanid.com/styles.css">
</head>
<body>
    <div id="countdown">
        <h1>距离国庆节还有：</h1>
        <div id="timer">
            <span id="days">00</span>天
            <span id="hours">00</span>小时
            <span id="minutes">00</span>分钟
            <span id="seconds">00</span>秒
        </div>
    </div>
    <script src="https://www.zhanid.com/script.js"></script>
</body>
</html>

3. 添加CSS样式

接下来，我们添加一些CSS来美化倒计时显示。

css

/* styles.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

#countdown {
    text-align: center;
}

#timer span {
    font-size: 2em;
    margin: 0 10px;
    color: #333;
}

h1 {
    color: #666;
}

4. 编写JavaScript代码

现在，我们需要编写JavaScript代码来实现倒计时功能。我们将计算当前日期与国庆节日期之间的时间差，并实时更新显示。

javascript

//www.zhanid.com/script.js
function countdown() {
    const targetDate = new Date('October 1, 2024 00:00:00').getTime();
    const now = new Date().getTime();
    const distance = targetDate - now;

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

    document.getElementById('days').innerText = days;
    document.getElementById('hours').innerText = hours;
    document.getElementById('minutes').innerText = minutes;
    document.getElementById('seconds').innerText = seconds;

    if (distance < 0) {
        clearInterval(x);
        document.getElementById('countdown').innerHTML = "国庆节快乐!";
    }
}

const x = setInterval(countdown, 1000);