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

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

news 2025/12/10 13:14:19
  • 💂 个人网站:【工具大全】【游戏大全】【神级源码资源网】
  • 🤟 前端学习课程：👉【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

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/12/7 12:19:22

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2025/12/7 10:35:30

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/12/6 15:11:15

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2025/12/8 0:37:17

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...

编程新知 2025/12/8 16:58:20

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...

编程新知 2025/10/31 16:09:12

在golang中如何将已安装的依赖降级处理，比如：将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7

在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤&#xff1a; 第一步&#xff1a; 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为&#xff1a; // 改为 v…...

编程新知 2025/10/20 16:05:17