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

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

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

一、代码

html 复制代码
<!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剩余的天数、小时数、分钟数和秒数。同时,网页整体风格采用深灰色背景与亮绿色字体,所有内容居中显示。

相关推荐
青皮桔20 分钟前
CSS实现百分比水柱图
前端·css
失落的多巴胺20 分钟前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear23 分钟前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息25 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
样子201831 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿31 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘32 分钟前
vue文本插值
javascript·vue.js·ecmascript
明月看潮生2 小时前
青少年编程与数学 02-022 专业应用软件简介 07 国产工业软件
青少年编程·工业软件·编程与数学·应用软件·国产软件
海的诗篇_2 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
牧杉-惊蛰3 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app