JavaScript输出至HTML问题：Unix纪元时长计算页面无数据显示

我是JavaScript入门课程的学员，首次在此提问，请予以指导。我正在制作一个显示Unix纪元（1970年1月1日午夜）以来流逝时长（涵盖毫秒、秒、分、时、天、年）的网页，但无法将JavaScript计算结果输出至HTML页面。

我的HTML代码 #

<body>
    <h1>Welcome to my Time Calculator</h1>
    <main>
        <p>Below is the time that has elapsed since the
            Unix Epoch: 1/1/1970 at midnight. Hit refresh
            to update the calculation.</p>
        <div>
            <label>Milliseconds</label>
            <span id="millis"></span>
        </div>
        <div>
            <label>Seconds</label>
            <span id="seconds"></span>
        </div>
        <div>
            <label>Minutes</label>
            <span id="minutes"></span>
        </div>
        <div>
            <label>Hours</label>
            <span id="hours"></span>
        </div>
        <div>
            <label>Days</label>
            <span id="days"></span>
        </div>
        <div>
            <label>Years</label>
            <span id="years"></span>
        </div>
    </main>
    <script src="scripts/time.js"></script>
</body>

我的JavaScript代码 #

let millis = new Date().getTime;
let millisInSeconds = millis / 1000;
let secondsInMinutes =  millisInSeconds * 60;
let minutesInHours = secondsInMinutes * 60;
let hoursInDays = minutesInHours * 24;
let daysInYears = hoursInDays * 365;

millis = parseFloat(millis);
millisInSeconds = parseFloat(millisInSeconds);
secondsInMinutes = parseFloat(secondsInMinutes);
minutesInHours = parseFloat(minutesInHours);
hoursInDays = parseFloat(hoursInDays);
daysInYears = parseFloat(daysInYears);

const millisDoc = document.querySelector("#millis").innerHTML = millis;
const secondsDoc = document.querySelector("#seconds").innerHTML = millisInSeconds;
const minutesDoc = document.querySelector("#minutes").innerHTML = secondsInMinutes;
const hoursDoc = document.querySelector("#hours").innerHTML = minutesInHours;
const daysDoc = document.querySelector("#days").innerHTML = hoursInDays;
const yearsDoc = document.querySelector("#years").innerHTML = daysInYears;

代码中的核心错误 #

1. 方法调用遗漏括号：new Date().getTime 是引用函数本身，没有触发执行，导致millis不是时间戳数值，后续所有计算都基于无效值。必须改为new Date().getTime()调用方法获取毫秒数。
2. 时间转换逻辑完全颠倒：计算分钟、小时等单位时，应该是除以进制数（比如总秒数÷60得到分钟数），你写成了乘法，结果完全错误。
3. 冗余的类型转换：getTime()返回的本身就是数值，不需要用parseFloat重复转换，属于无效操作。

修正后的JavaScript代码 #

// 获取Unix纪元至今的毫秒数
const millis = new Date().getTime();
// 转换为秒
const seconds = millis / 1000;
// 转换为分钟
const minutes = seconds / 60;
// 转换为小时
const hours = minutes / 60;
// 转换为天
const days = hours / 24;
// 转换为年（按365天简化计算）
const years = days / 365;

// 将结果插入到对应HTML元素中
document.querySelector("#millis").textContent = millis.toLocaleString();
document.querySelector("#seconds").textContent = seconds.toFixed(2);
document.querySelector("#minutes").textContent = minutes.toFixed(2);
document.querySelector("#hours").textContent = hours.toFixed(2);
document.querySelector("#days").textContent = days.toFixed(2);
document.querySelector("#years").textContent = years.toFixed(2);

额外优化说明 #

• 用textContent替代innerHTML：仅插入纯文本时，textContent更安全，避免XSS风险，性能也更好。
• 添加格式化处理：toLocaleString()让毫秒数显示千分位，toFixed(2)保留两位小数，结果更易读。
• 变量命名更语义化：比如millisInSeconds改为seconds，直观反映变量代表的单位。

内容的提问来源于stack exchange，提问作者Haylee Raile