如何在JavaScript倒计时器中添加年份显示？当前仅展示天数

实现步骤 #

1. 新增年份显示容器：在页面中添加用于展示剩余年份的HTML元素，示例：

<div id="years"></div>

2. 修改JavaScript逻辑：
   • 获取年份元素的DOM节点
   • 基于总剩余天数计算剩余年份（按一年365天估算）
   • 计算扣除年份后的剩余天数
   • 更新对应DOM元素的内容

修改后的完整代码 #

// 获取所有倒计时显示元素
let yearsItem = document.querySelector("#years");
let daysItem = document.querySelector("#days");
let hoursItem = document.querySelector("#hours");
let minItem = document.querySelector("#min");
let secItem = document.querySelector("#sec");

let countDown = () => {
    // 修正为25年倒计时的终点日期（2022+25）
    let futureDate = new Date("17 august 2047 9:59:59");
    let currentDate = new Date();
    let timeDiff = futureDate - currentDate;

    // 计算总剩余天数
    let totalDays = Math.floor(timeDiff / 1000 / 60 / 60 / 24);
    // 拆分剩余年份和剩余天数
    let years = Math.floor(totalDays / 365);
    let days = totalDays % 365;

    // 计算时分秒
    let hours = Math.floor(timeDiff / 1000 / 60 / 60) % 24;
    let min = Math.floor(timeDiff / 1000 / 60) % 60;
    let sec = Math.floor(timeDiff / 1000) % 60;

    // 更新页面显示
    yearsItem.innerHTML = years;
    daysItem.innerHTML = days;
    hoursItem.innerHTML = hours;
    minItem.innerHTML = min;
    secItem.innerHTML = sec;
}

// 初始化执行+每秒更新
countDown();
setInterval(countDown, 1000);

补充说明 #

• 代码默认按一年365天计算，若需要更精确的闰年适配，可以通过逐年判断闰年并累加天数实现，但25年倒计时场景下，365天的估算足以满足日常需求。
• 已将原代码的终点日期从2022年修正为2047年，对应25年的倒计时周期。

内容的提问来源于stack exchange，提问作者sanishma shylendran