编程笔记 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()启动倒计时功能。
与d2l.train_ch3缺失的简单解决方式)
