首页 > 其他分享 >使用HTML+JS实现国庆节倒计时网页实例代码

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

时间:2024-09-20 19:20:57浏览次数:13  
标签:60 网页 JS 倒计时 国庆节 HTML const 1000

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

国庆节倒计时.jpg

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);

5. 测试和部署

在本地或服务器上部署这个网页后,你应该能看到一个动态更新的国庆节倒计时。确保在不同的浏览器和设备上测试,以确保兼容性和用户体验。

6. 扩展功能

虽然这个示例提供了基本的倒计时功能,但你可以进一步扩展它,例如添加节日相关的图片、动画效果或者社交媒体分享按钮,以增加互动性和趣味性。

总结

通过使用HTML、CSS和JavaScript,我们可以创建一个简单而有效的国庆节倒计时网页。这不仅增加了节日的氛围,也提供了一个实用的功能,让访问者能够实时了解国庆节的倒计时。随着技术的发展,我们还可以探索更多创新的方式来增强网页的互动性和吸引力。

标签:60,网页,JS,倒计时,国庆节,HTML,const,1000
From: https://blog.csdn.net/kingsley99/article/details/142393119

相关文章

  • python模块之json
    json模块(1)python中的json格式是轻量级的文本数据交互格式(2)json和字典以一样一、将python数据类型换成字典json.dump  json.dumps二、将json格式转换成python类型(1)dumps 将python类型转换成json格式importjsond={"name":"zs","age":18}print(type(d))#<class'di......
  • 流浪动物领养系统网站设计与实现[SSM+MySQL+JSP]
    目录系统展示项目背景系统设计总结系统展示项目背景当前社会各行业领域竞争压力非常大,随着当前时代的信息化,科学化发展,让社会各行业领域都争相使用新的信息技术,对行业内的各种相关数据进行科学化,规范化管理。这样的大环境让那些止步不前,不接受信息改革带来的信息技术......
  • 基于JSP客户关系管理系统的设计与实现的计算机毕设源码+论文
    摘要:本客户关系管理系统是使用JSP编程语言和SQLServer2000数据库共同来完成的,采用面向对象方法,对客户关系管理系统进行设计与实现。分析设计了客户关系管理系统的静态模型和动态模型,完成了系统开发的分析、设计和实现的工作。本客户关系管理系统通过Web方式完成用户与系统的交互,系......
  • js实现网页端录音功能
    1、代码首先安装依赖包:recorderxnpminstallrecorderx-S<template><divclass="container"><divclass="mt-30"><el-button@click="onStartRecord">开始录音</el-button><el-button@click......
  • asp.net webapi 控制器中获取appsettings.json 中的数组对象
    appsettings.json文件内容: {"Logging":{"LogLevel":{"Default":"Information","Microsoft.AspNetCore":"Warning"}},"MyConfigKey":"MyConfigValue"......
  • 基于JSP+SQL英语在线考试系统毕业设计整套的计算机毕设源码+论文
    摘要伴随着Internet技术在各个领域的广泛应用,当今社会已经进入信息时代,信息技术革命使社会的各个领域都发生了翻天覆地的变化,计算机,网络技术也渗透到了学校的日常管理当中去。而且网络化的管理也适合现在人的生活需求。在线考试系统以其较高的实用功能、高效率的管理手段深受各......
  • 快速上手高德JS API——以可视化公交站点线路为例
    前言在利用高德地图进行开发时,我们经常需要使用不同的API来实现特定的功能。为了帮助开发者快速定位所需API并掌握正确的使用方法,本文将以可视化任意公交站点路线为例,分享相关经验。根据需求粗略匹配参考示例在开始写代码我都会思考一下该功能的实现逻辑是什么:1、通过什么方式......
  • jsp大学生四六级在线测试平台u7026
    jsp大学生四六级在线测试平台本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容一、项目背景与意义随着全球化和信息化的发展,英语已成为国际交流的重要工具。对于大学生而言,四六级考试不仅是衡量其......
  • jsp大学生素质拓展学分系统t474y
    jsp大学生素质拓展学分系统t474本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表项目功能学生,教师,活动申请,活动展示,学分排行,学分明细开题报告内容一、项目背景与意义在当今高等教育体系中,大学生素质拓......
  • jsp大学生收书系统j7k68
    jsp大学生收书系统j7k68本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表项目功能学生,收书站点,书籍分类,书籍信息,上门取书,二手书籍,捐赠中心,图书捐赠技术要求:   开发语言:JSP前端使用:HTML5,CSS,JSP......