html5cssjs代码 004 2035年倒计时

html5&css&js代码 004 2035年倒计时

  • 一、代码
  • 二、解释
      • DOCTYPE声明:
      • head部分:
      • body部分:
      • script标签:

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

一、代码

<!DOCTYPE html>
<html lang="zh-cn">
<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年的倒计时。以下是该网页的基本结构和功能的详细解释:

DOCTYPE声明:

<!DOCTYPE html> 表明这是遵循HTML5标准的文档。
html标签:<html lang="zh-cn"> 定义了整个HTML文档,并指定了语言为中文。

head部分:

<meta charset="UTF-8"> 指定网页字符编码为UTF-8。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 设置响应式布局,确保页面在不同设备上自适应显示。
<style> 标签内包含CSS样式,对body、h1和id为countdown的元素进行样式设置,如背景颜色、文本颜色、居中显示以及定位等。
title标签:定义了浏览器标签页上的网页标题——“2035年倒计时”。

body部分:

<h1>2035年倒计时</h1> 在网页主体中添加一个一级标题,显示“2035年倒计时”。
<div id="countdown"></div> 创建一个空div元素,其id为"countdown",用于动态显示倒计时信息。

script标签:

JavaScript代码段实现倒计时功能:
定义目标日期 const targetDate = new Date('2035-01-01T00:00:00').getTime();
countdown 函数负责计算当前距离目标日期的时间差,并以天、小时、分钟和秒的形式显示在id为 “countdown” 的div中。
使用 setTimeout(countdown, 1000) 实现每秒更新一次倒计时。
当用户打开这个网页时,将启动倒计时函数并实时显示距离2035年1月1日00:00:00剩余的天数、小时数、分钟数和秒数。同时,网页整体风格采用深灰色背景与亮绿色字体,所有内容居中显示。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024计算机软考基本介绍、考试时间、考试科目等2024年软考新变化政策 证书的作用

专栏系列文章推荐&#xff1a; 2024高级系统架构设计师备考资料&#xff08;高频考点&真题&经验&#xff09;https://blog.csdn.net/seeker1994/category_12593400.html 【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】&#xff08;2024年软考高级…

【考研数学】张宇学习包

张宇的授课侧重于启发学生的综合思维能力。对于基础较好的学生而言&#xff0c;在听完他的课后&#xff0c;解题通常不会构成太大问题&#xff0c;而且可以学到许多解题技巧&#xff0c;其中包括张宇老师创造的易记的“点火公式”。 然而&#xff0c;对于基础较薄弱的学生来说…

无人机手持地面站软件功能详解,无人机手持地面站软件开发人员组成及成本分析

无人机手持地面站软件是专为无人机操控和任务管理设计的移动应用&#xff0c;它通常集成在智能手机、平板电脑或其他便携式设备上&#xff0c;使得用户可以在远离无人机的地方对飞行器进行实时监控与远程控制。 主要功能详解&#xff1a; 1. 飞行控制与姿态显示&#xff1a; …

基于springboot+vue实现乌鲁木齐南山冰雪旅游服务网管理系统项目【项目源码+论文说明】计算机毕业设计

基于springbootvue实现南山冰雪旅游服务网演示 摘要 随着2022年北京冬奥会的成功举办&#xff0c;在冬天进行冰雪运动已经逐渐流行起来&#xff0c;人们慢慢享受到了冰雪活动给大家带来的欢乐&#xff0c;除此之外人们的身体素质也可以得到提升。虽然已经有一部分人可以接受并…

关于yolov8文档的记录,补充一些整理的知识点

2023年由Ultralytics 提供了YOLOv8开源项目。YOLOv8 支持全方位的视觉 AI 任务&#xff0c;包括检测、分割、姿态估计、跟踪和分类。这种多功能性使用户能够在各种应用和领域中利用YOLOv8 的功能。安装yolov8开源项目 pip install githttps://github.com/ultralytics/ultralyti…

Kafka整理-Consumer Group(消费者群组)

在Apache Kafka中,消费者群组(Consumer Group)是一种强大的机制,用于实现消息的分发和负载均衡。以下是消费者群组的关键概念和工作原理: 消费者群组的基本概念 1、组成: 消费者群组由一系列的消费者(Consumers)组成,这些消费者共同订阅一个或多个主题(Topics)。2、…

C语言输出时间——解释01

库文件 time.h #include <stdio.h> #include <time.h> int main() { // 设置本地化环境为中文&#xff0c;以便输出中文格式的时间 // 获取当前时间 time_t rawtime; //时间变量 struct tm *timeinfo; // struct tm 时间的结构体时间库自带的 /*结构 stru…

微信小程序开发系列(二十四)·wxml语法·列表渲染·wx:for-item 和 wx:for-index

目录 1. 如果需要对默认的变量名和下标进行修改&#xff0c;可以使用wx:for-item 和 wx:for-index 2. 将 wx:for 用在 标签上&#xff0c;以渲染一个包含多个节点的结构块 方法一 方法二 3. 总结 3.1 wx:for-item 和 wx:for-index总结 3.2 总结 1. 如果需要对默…

新品发布:广州大彩科技COF系列2.1寸480*480 IPS 串口屏发布!

一、产品介绍 该产品是一款2.1寸分辨率为 480480的医用级工业组态串口屏&#xff0c;拥有2.1寸IPS液晶屏&#xff0c;分辨率有480480&#xff08;实际显示为R240内切圆区域&#xff09;&#xff0c;支持电容触摸。采用COF超薄结构工艺设计&#xff0c;用户安装便捷灵活&#x…

力扣hot100:240.搜索二维矩阵II(脑子)

吉大21级算法分析与设计的一道大题&#xff0c;由于每一行都是排好序的直接逐行二分 可以达到&#xff1a;O(mlogn)。但是这里追求更广的思路可以使用其他方法。 矩阵四分&#xff1a; 在矩阵中用中心点比较&#xff0c;如果target大于中心点的值&#xff0c;则由于升序排列&am…

【顺序表】

//#########顺序表的定义############// 定义结构体 typedef struct {int* data; //动态//int data[sizemax]; // 静态int Maxsize; //最大容量int length; //当前长度 } sqlist;lnode* getelem(linklist l, int i) //返回一个结点 l是单链表 {int j 1;lnode* p l->…

【C++】string类(介绍、常用接口)

&#x1f308;个人主页&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343&#x1f525; 系列专栏&#xff1a;http://t.csdnimg.cn/eCa5z 目录 string类的常用接口说明 string类对象的常见构造 ​编辑 string字符串的遍历&#xff08;迭代器&#xf…

Python网站的搭建和html基础

1.Python网站代码及讲解 一般我们搭建小型的网站就用flask库就行了。 &#xff08;1&#xff09;安装flask库 安装完python后&#xff0c;按住windows徽标键和r,弹出“运行”&#xff0c;在里面输入cmd。 回车打开&#xff0c;输入“pip install flask”。 &#xff08;2&am…

地平线旭日x3派部署yolov5--全流程

地平线旭日x3派部署yolov5--全流程 前言一、深度学习环境安装二、安装docker三、部署3.1、安装工具链镜像3.2、配置天工开物OpenExplorer工具包3.3、创建深度学习虚拟空间&#xff0c;安装依赖&#xff1a;3.4、下载yolov5项目源码并运行3.5、pytorch的pt模型文件转onnx3.6、最…

要先学会 “面向对象编程” 就得学会类和对象(Java篇)

本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…

HIVE 大数据学习

参考视频 黑马程序员Hive全套教程&#xff0c;大数据Hive3.x数仓开发精讲到企业级实战应用_哔哩哔哩_bilibili 介绍 Apache Hive是一款建立在Hadoop之上的开源数据仓库系统&#xff0c;可以将存储在Hadoop文件中的结构化、半结构化数据文件映射为一张数据库表&#xff0c;基于…

ReactNative进阶(五):React Native与原生通信

文章目录 一 、前言二、RN与安卓通信2.1 RN 调用安卓原生组件2.2 RN 应用消息机制方式与安卓原生代码切换2.3 RN 应用 Promise 机制与安卓原生代码通信2.4 RN 应用 callback 回调方式与安卓原生代码通信 三、RN与IOS通信3.1 定义导出的方法名3.2 promise 实现回调函数3.3 继承 …

LeetCode hot 100 —— 哈希表 by python

什么是哈希表 散列表&#xff08;Hash table&#xff0c;也叫哈希表&#xff09;&#xff0c;是根据关键码值(Key和value)而直接进行访问的数据结构。也就是说&#xff0c;它通过把关键码值映射到表中一个位置来访问记录&#xff0c;以加快查找的速度。这个映射函数叫做散列函…

快速排序和堆排序模板总结

堆排序以及快速排序模板 堆排序使用&#xff0c;215.数组中的第k个最大元素&#xff1a;https://leetcode.cn/problems/kth-largest-element-in-an-array 快速排序使用&#xff0c; 75.颜色分类&#xff1a; https://leetcode.cn/problems/sort-colors/ 堆排序模板 public …

【AI学习指南】九、PaddlePaddle自然语言处理-PaddleNLP SKEP情感分析定制化训练(万字长文附代码)

目录 加载预训练模型到指定位置 加载分词器 准备数据集 train.tsv 文件内容示例: dev.tsv 文件