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

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

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

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/7/7 6:59:35

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/8/10 21:01:28

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2025/8/4 18:55:37

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/8/22 3:04:59

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2025/9/2 5:02:44

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/8/19 6:29:21

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/8/12 1:19:44

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/8/9 13:14:15

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/6/17 5:18:28