当前位置： 首页 > news >正文

基于HTML、CSS和JavaScript制作一个中秋节倒计时网页

news 2026/2/9 21:11:47
  • 💂 个人网站:【工具大全】【游戏大全】【神级源码资源网】
  • 🤟 前端学习课程：👉【28个案例趣学前端】【400个JS面试题】
  • 💅 寻找学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】

这个项目使用HTML、CSS和JavaScript来制作一个简单但有趣的中秋节倒计时网页。网页将显示距离中秋节还有多少天、小时、分钟和秒，并添加一些中秋节相关的图像和祝福语。

在线预览地址：https://haiyong.site/demo/zhongqiu/

1. HTML 结构

首先，创建一个HTML文件，命名为 index.html，并在其中添加以下基本结构：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>中秋节倒计时</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="countdown-container"><h1>中秋节倒计时</h1><div id="countdown"></div><div class="greetings"><img src="moon.png" alt="月亮图像"><p>祝你中秋节快乐！</p></div></div><script src="script.js"></script>
</body>
</html>

2. CSS 样式

创建一个名为 style.css 的 CSS 文件，并添加样式来美化页面，代码如下：

body {font-family: Arial, sans-serif;background-color: #f2f2f2;text-align: center;
}.countdown-container {background-color: #fff;border-radius: 10px;padding: 20px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);margin: 50px auto;max-width: 400px;
}h1 {font-size: 24px;margin-bottom: 10px;
}#greetings {margin-top: 20px;
}img {width: 128px;height: 96px;
}p {font-size: 18px;font-weight: bold;
}

3. JavaScript 倒计时

创建一个名为 script.js 的 JavaScript 文件，来实现倒计时功能。

// 中秋节日期（年/月/日）
const midAutumnDate = new Date('2023-09-29T00:00:00');function updateCountdown() {// 获取当前时间const now = new Date();// 计算距离中秋节的时间差（毫秒）const timeRemaining = midAutumnDate - now;// 计算天数、小时、分钟和秒数const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);// 更新页面上的倒计时元素document.getElementById('countdown').innerHTML = `${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;
}// 每秒调用一次updateCountdown函数，以实时更新倒计时
setInterval(updateCountdown, 1000);// 初次加载页面时立即更新倒计时
updateCountdown();

这段JavaScript代码执行以下操作：

  • 创建一个JavaScript日期对象 midAutumnDate，表示中秋节的日期和时间（今年中秋节是2023年9月29日）。

  • 定义一个名为 updateCountdown 的函数，用于计算并更新倒计时。它执行以下步骤：

    • 获取当前时间，存储在 now 变量中。
    • 计算距离中秋节的时间差（以毫秒为单位），存储在 timeRemaining 变量中。
    • 使用数学函数计算剩余的天数、小时、分钟和秒数。
    • 更新网页上的倒计时元素，将计算得到的时间显示在页面上。

  • 使用 setInterval 函数每秒调用一次 updateCountdown 函数，以实时更新倒计时。

  • 在页面加载时，立即调用 updateCountdown 函数，以确保初次加载时显示正确的倒计时。

4. 图像

我们需要一张月亮的图像，将其命名为 moon.png，并放在项目目录下。
在这里插入图片描述

5. 运行

将以上三个文件放在同一个目录下，然后打开 midAutumnCountdown.html 文件，我们可以看到一个漂亮的中秋节倒计时页面，页面上会显示距离中秋节的时间，以及中秋节的祝福语和月亮图像。

在这里插入图片描述

这个简单的项目展示了如何使用HTML、CSS和JavaScript来创建一个与中秋节相关的网页，让我们可以随时了解距离中秋节还有多少时间。大家可以根据自己的创意和技能进一步扩展这个项目，添加更多功能和效果，以增加中秋节的乐趣。最后，提前祝大家中秋节快乐！

相关文章：

基于HTML、CSS和JavaScript制作一个中秋节倒计时网页

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 这个项目使用HTML、CSS和…...

编程日记 2023/9/14 5:18:50

富斯I6刷10通道固件

使用USB转串口模块刷写10通道固件 一、下载固件 1. 十通道英文固件 下载地址： https://github.com/benb0jangles/FlySky-i6-Mod-/tree/master 选择 FlySky-i6-Mod–master \ 10ch Mod i6 Updater \ 10ch_MOD_i6_Programmer_V1 路径下的文件，亲测可用。 2. 原版六通道中…...

编程日记 2023/9/14 5:15:46

vector的模拟实现 总结

vector的模拟实现 总结 vector.hTest.cpp vector.h 1、迭代器的实现 #pragma oncenamespace JPC {template<class T>class vector{public://对于存储空间是连续的结构而言&#xff0c;可以用原身指针来 模拟实现 迭代器。typedef T* iterator;typedef const T* const_i…...

编程日记 2023/9/14 5:14:44

k8s中的有状态，无状态，pv、pvc等

数据库是一个典型的有状态服务&#xff0c;他的部署和无状态服务是不一样的。 PostgresSQL----基于Kubernetes部署PostgresSQL-CSDN博客 一、创建SC、PV和PVC存储对象 二、部署PostgresSQL Volume Kubernetes 中文指南——云原生应用架构实战手册 有状态应用&#xff1a; …...

编程日记 2023/9/14 5:12:41

springboot+jxls复杂excel模板导出

JXLS 是基于 Jakarta POI API 的 Excel 报表生成工具&#xff0c;可以生成精美的 Excel 格式报表。它采用标签的方式&#xff0c;类似 JSP 标签&#xff0c;写一个 Excel 模板&#xff0c;然后生成报表&#xff0c;非常灵活&#xff0c;简单&#xff01; Java 有一些用于创建 …...

编程日记 2023/9/14 5:11:40

用selenium webdriver获取网站cookie后，实现免登录上网站

以csdn为例&#xff0c;代码分为两部分。 一、csdn_get_cookies.py为半手动登录网站后获取cookies 二、csdn_use_cookies.py为使用获取到的cookies免登录上网站 #获取登录cookiesfrom selenium import webdriver import jsoncsdn_driver webdriver.Chrome() url "htt…...

编程日记 2023/9/14 5:09:38

如何使用Java进行安全测试?

要使用Java进行安全测试&#xff0c;可以按照以下步骤进行&#xff1a; 确定测试目标&#xff1a;首先&#xff0c;明确要测试的应用程序或系统的安全目标和需求。确定要测试的安全方面&#xff0c;如身份验证、授权、输入验证、安全配置等。 了解安全测试知识&#xff1a;熟悉…...

编程日记 2023/9/14 5:08:36

Linux之Socket函数（详细篇）

本篇是基于Linux man手册的一些总结 socket作用&#xff1a; create an endpoint for communication 函数结构 c #include <sys/types.h> /* See NOTES */ #include <sys/socket.h> int socket(int domain, int type, int protocol); 描述 socket() …...

编程日记 2023/9/14 5:07:34

Dajngo06_Template模板

Dajngo06_Template模板 6.1 Template模板概述 模板引擎是一种可以让开发者把服务端数据填充到html网页中完成渲染效果的技术 静态网页&#xff1a;页面上的数据都是写死的&#xff0c;万年不变 动态网页&#xff1a;页面上的数据是从后端动态获取的&#xff08;后端获取数据库…...

编程日记 2023/9/14 5:05:32

快速幂 c++

一般大家写都是 int ans 1; for (int i 1; i < a; i )ans * x;时间复杂度 但是这对于我们还不够&#xff0c;我们要 首先我们得知道一个数学知识 那么求 就有以下递归式 a 能被2整除 a 不能被2整除 (这里a/2是整除) 所以每次都调用 不就是么 最后补充一个东西…...

编程日记 2023/9/14 5:01:29

分享一个基于微信小程序的医院口腔助手小程序 牙科诊所预约小程序 源码 lw 调试

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人七年开发经验&#xff0c;擅长Java、Python、PHP、.NET、微信小程序、爬虫、大数据等&#xff0c;大家有这一块的问题可以一起交流&#xff01; &#x1f495;&…...

编程日记 2023/9/14 4:59:27

Si3262 一款低功耗刷卡+触摸+mcu 三合一SOC芯片

Si3262是-款高度集成的低功耗soC芯片&#xff0c;其集成了基于RISC-V 核的低功耗MCU和工作在13.56MHz的非接触式读写器模块。 该芯片ACD模式下刷卡距离可达4-5cm&#xff08;天线决定&#xff09;&#xff0c;适用于智能门锁&#xff0c;电子锁&#xff0c;柜锁&#xff0c;桑拿…...

编程日记 2023/9/14 4:58:25

[H5动画制作系列] 奔跑的豹子的四种Demo演化

资源: bg.jpg: leopard.png: 背景透明 peopard2.png 背景不透明 参考代码1: leopard.js: (function(window) {ma function() {this.initialize();}ma._SpriteSheet new createjs.SpriteSheet({images: ["leopard.png"], frames: [[0,0,484,207],[486,0,484,207]…...

编程日记 2023/9/14 4:57:24

如何实现让一个函数能返回多个值的效果

在C语言中&#xff0c;一个函数通常只能返回一个值。但是可以通过指针参数或结构体来模拟返回多个值的效果。 使用指针参数&#xff1a;你可以将需要返回的值作为函数的参数&#xff0c;通过指针的形式传入&#xff0c;让函数将结果写入指针所指向的内存位置。 void multiple…...

编程日记 2023/9/14 4:54:20

End-to-end 3D Human Pose Estimation with Transformer

基于Transformer的端到端三维人体姿态估计 摘要 基于Transformer的架构已经成为自然语言处理中的常见选择&#xff0c;并且现在正在计算机视觉任务中实现SOTA性能&#xff0c;例如图像分类&#xff0c;对象检测。然而&#xff0c;卷积方法在3D人体姿态估计的许多方法中仍然保…...

编程日记 2023/9/14 4:53:19

状态管理Pinia

Vue3 状态管理 - Pinia 1. 什么是Pinia Pinia 是 Vue 的专属的最新状态管理库 &#xff0c;是 Vuex 状态管理工具的替代品 2. 手动添加Pinia到Vue项目 后面在实际开发项目的时候&#xff0c;Pinia可以在项目创建时自动添加&#xff0c;现在我们初次学习&#xff0c;从零开始…...

编程日记 2023/9/14 4:52:17

maven运行报错解决

在IDEA上运行较大项目时&#xff0c;编译量很大&#xff0c;可能会报出 Error:java: java.lang.OutOfMemoryError: Java heap space 的错误&#xff0c;解决方法如下&#xff1a; java.lang.OutOfMemoryError是内存不足导致的&#xff0c;因此需要修改Idea运行项目的内存大小。…...

编程日记 2023/9/14 4:50:15

在线会计软件推荐：高效实用的选择解析

如果您始终在密切关注Zoho&#xff0c;您一定知道&#xff0c;我们的软件在一个接一个的增加&#xff0c;为的是构建出一套可以全面在线协作、提升业务生产力的应用系统&#xff0c;我们始终致力于为各类企业构建完整的业务应用&#xff0c;以便他们在Zoho上运行整个业务系统。…...

编程日记 2023/9/14 4:49:14

vue监听Enter键

目录 keydown.enter 方法1: 使用keydown.enter指令 方法2: 在keydown事件处理函数中检查按下的键 keyup.enter.native keydown.enter与keyup.enter.native区别 1. 触发时机&#xff1a; 2. 事件类型&#xff1a; 3. 事件冒泡&#xff1a; keydown.enter 在Vue中监听En…...

编程日记 2023/9/14 4:48:13

ADS中带通滤波器模型参数含义学习笔记

ADS中带通滤波器模型参数含义 1、 Fcenter 中心频率 2、 BWpass 通带带宽 3、 Apass 衰减量时的通带带宽 这两个是对应的&#xff0c;比如说是80MHz&#xff0c;3dB&#xff0c;那么就是3dB时的带宽为80MHz&#xff0c;如果改为0.1dB&#xff0c;那么带宽就是0.1dB时的带宽为80…...

编程日记 2023/9/14 4:47:12

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2026/2/5 14:15:13

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2026/1/26 12:50:00

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

编程新知 2025/11/9 14:40:17

适应性Java用于现代 API：REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

编程新知 2025/11/10 19:07:59

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...

编程新知 2026/2/4 16:04:11

土建施工员考试：建筑施工技术重点知识有哪些？

《管理实务》是土建施工员考试中侧重实操应用与管理能力的科目&#xff0c;核心考查施工组织、质量安全、进度成本等现场管理要点。以下是结合考试大纲与高频考点整理的重点内容&#xff0c;附学习方向和应试技巧&#xff1a; 一、施工组织与进度管理 核心目标&#xff1a; 规…...

编程新知 2025/9/12 3:11:17

RabbitMQ 各类交换机

为什么要用交换机&#xff1f; 交换机用来路由消息。如果直发队列&#xff0c;这个消息就被处理消失了&#xff0c;那别的队列也需要这个消息怎么办&#xff1f;那就要用到交换机 交换机类型 1&#xff0c;fanout&#xff1a;广播 特点 广播所有消息​​&#xff1a;将消息…...

编程新知 2026/2/7 17:39:49