编程笔记 html5cssjs 004 网页基本结构 2035年倒计时

2024-03-09 10:52

本文主要是介绍编程笔记 html5cssjs 004 网页基本结构 2035年倒计时,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

编程笔记 html5&css&js 004 网页基本结构 2035年倒计时

  • 一、代码
  • 二、解释

这段HTML代码实现了一个倒计时页面,倒计时的目标日期是2035年1月1日。页面中使用一个<div>元素显示倒计时的天数、小时数、分钟数和秒数。

一、代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body {text-align: center;background-color: #333333;color: #66ff66;}h1 {font-size: 40px; /* 字体大小 */text-align: center; /* 文本居中 */position: absolute; /* 绝对定位 */top: 25%;left: 50%;transform: translate(-50%, -50%); /* 定位调整 */}/* 设置倒计时样式 */#countdown {font-size: 75px; /* 字体大小 */text-align: center; /* 文本居中 */position: absolute; /* 绝对定位 */top: 50%; /* 顶部位置 */left: 50%; /* 左侧位置 */transform: translate(-50%, -50%); /* 定位调整 */}</style><title>2035年倒计时</title>
</head>
<body>
<h1>2035年倒计时</h1>
<div id="countdown"></div>
<script>// 设置目标日期const targetDate = new Date('2035-01-01T00:00:00').getTime();/*** 计算并显示倒计时* 该函数无参数和返回值*/function countdown() {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("countdown").innerText = `${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;// 每秒调用一次该函数以更新倒计时setTimeout(countdown, 1000);}// 启动倒计时countdown();
</script>
</body>
</html>

二、解释

这段HTML代码实现了一个倒计时页面,倒计时的目标日期是2035年1月1日。页面中使用一个<div>元素显示倒计时的天数、小时数、分钟数和秒数。页面加载完成后,通过JavaScript脚本计算当前时间与目标时间的差值,并动态更新<div>元素的内容来显示倒计时。
首先,在<head>标签中定义了一个CSS样式,用于设置倒计时文本的样式,包括字体大小、文本居中、绝对定位等。
接着,在<body>标签中添加了一个<div>元素,其id属性为countdown,用于显示倒计时内容。
在页面加载完成后,通过<script>标签中的JavaScript脚本设置了目标日期,并定义了一个名为countdown的函数来计算并显示倒计时。
countdown函数首先获取当前时间戳,并计算目标时间与当前时间的差值。
然后,根据差值计算天、小时、分钟和秒,并将结果显示在<div>元素中。
最后,使用setTimeout函数每秒调用一次countdown函数以更新倒计时。
最后,通过调用countdown()启动倒计时功能。

这篇关于编程笔记 html5cssjs 004 网页基本结构 2035年倒计时的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/790466

相关文章

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

C#连接SQL server数据库命令的基本步骤

《C#连接SQLserver数据库命令的基本步骤》文章讲解了连接SQLServer数据库的步骤,包括引入命名空间、构建连接字符串、使用SqlConnection和SqlCommand执行SQL操作,... 目录建议配合使用:如何下载和安装SQL server数据库-CSDN博客1. 引入必要的命名空间2.

Java中的数组与集合基本用法详解

《Java中的数组与集合基本用法详解》本文介绍了Java数组和集合框架的基础知识,数组部分涵盖了一维、二维及多维数组的声明、初始化、访问与遍历方法,以及Arrays类的常用操作,对Java数组与集合相... 目录一、Java数组基础1.1 数组结构概述1.2 一维数组1.2.1 声明与初始化1.2.2 访问

Go语言数据库编程GORM 的基本使用详解

《Go语言数据库编程GORM的基本使用详解》GORM是Go语言流行的ORM框架,封装database/sql,支持自动迁移、关联、事务等,提供CRUD、条件查询、钩子函数、日志等功能,简化数据库操作... 目录一、安装与初始化1. 安装 GORM 及数据库驱动2. 建立数据库连接二、定义模型结构体三、自动迁

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹

MySQL中的索引结构和分类实战案例详解

《MySQL中的索引结构和分类实战案例详解》本文详解MySQL索引结构与分类,涵盖B树、B+树、哈希及全文索引,分析其原理与优劣势,并结合实战案例探讨创建、管理及优化技巧,助力提升查询性能,感兴趣的朋... 目录一、索引概述1.1 索引的定义与作用1.2 索引的基本原理二、索引结构详解2.1 B树索引2.2

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动