编程笔记 html5&css&js 004 2035年倒计时

• 一、代码
• 二、解���

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

  （）

  一、代码

                      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%); /* 定位调整 */        }        2035年倒计时
  2035年倒计时
      // 设置目标日期    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();

  二、解释

  这段HTML代码实现了一个倒计时页面，倒计时的目标日期是2035年1月1日。页面中使用一个元素显示倒计时的天数、小时数、分钟数和秒数。页面加载完成后，通过JavaScript脚本计算当前时间与目标时间的差值，并动态更新元素的内容来显示倒计时。

  首先，在标签中定义了一个CSS样式，用于设置倒计时文本的样式，包括字体大小、文本居中、绝对定位等。

  （）

  接着，在标签中添加了一个元素，其id属性为countdown，用于显示倒计时内容。

  在页面加载完成后，通过标签中的JavaScript脚本设置了目标日期，并定义了一个名为countdown的函数来计算并显示倒计时。

  countdown函数首先获取当前时间戳，并计算目标时间与当前时间的差值。

  然后，根据差值计算天、小时、分钟和秒，并将结果显示在元素中。

  最后，使用setTimeout函数每秒调用一次countdown函数以更新倒计时。

  最后，通过调用countdown()启动倒计时功能。