html5cssjs代码 004 2035年倒计时

2024-03-12 11:36

本文主要是介绍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剩余的天数、小时数、分钟数和秒数。同时,网页整体风格采用深灰色背景与亮绿色字体,所有内容居中显示。

这篇关于html5cssjs代码 004 2035年倒计时的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/801129

相关文章

使用Dify访问mysql数据库详细代码示例

《使用Dify访问mysql数据库详细代码示例》:本文主要介绍使用Dify访问mysql数据库的相关资料,并详细讲解了如何在本地搭建数据库访问服务,使用ngrok暴露到公网,并创建知识库、数据库访... 1、在本地搭建数据库访问的服务,并使用ngrok暴露到公网。#sql_tools.pyfrom

Java springBoot初步使用websocket的代码示例

《JavaspringBoot初步使用websocket的代码示例》:本文主要介绍JavaspringBoot初步使用websocket的相关资料,WebSocket是一种实现实时双向通信的协... 目录一、什么是websocket二、依赖坐标地址1.springBoot父级依赖2.springBoot依赖

讯飞webapi语音识别接口调用示例代码(python)

《讯飞webapi语音识别接口调用示例代码(python)》:本文主要介绍如何使用Python3调用讯飞WebAPI语音识别接口,重点解决了在处理语音识别结果时判断是否为最后一帧的问题,通过运行代... 目录前言一、环境二、引入库三、代码实例四、运行结果五、总结前言基于python3 讯飞webAPI语音

什么是 Java 的 CyclicBarrier(代码示例)

《什么是Java的CyclicBarrier(代码示例)》CyclicBarrier是多线程协同的利器,适合需要多次同步的场景,本文通过代码示例讲解什么是Java的CyclicBarrier,感... 你的回答(口语化,面试场景)面试官:什么是 Java 的 CyclicBarrier?你:好的,我来举个例

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

Flutter监听当前页面可见与隐藏状态的代码详解

《Flutter监听当前页面可见与隐藏状态的代码详解》文章介绍了如何在Flutter中使用路由观察者来监听应用进入前台或后台状态以及页面的显示和隐藏,并通过代码示例讲解的非常详细,需要的朋友可以参考下... flutter 可以监听 app 进入前台还是后台状态,也可以监听当http://www.cppcn

Python使用PIL库将PNG图片转换为ICO图标的示例代码

《Python使用PIL库将PNG图片转换为ICO图标的示例代码》在软件开发和网站设计中,ICO图标是一种常用的图像格式,特别适用于应用程序图标、网页收藏夹图标等场景,本文将介绍如何使用Python的... 目录引言准备工作代码解析实践操作结果展示结语引言在软件开发和网站设计中,ICO图标是一种常用的图像