当前位置：首页 > news >正文

练习小项目：倒数日小工具

news 2025/7/3 21:56:10

功能描述：

输入一个未来日期（使用 <input type="date">）
点击“计算倒计时”按钮后
页面显示「还剩 XX 天！」

你要完成的逻辑点提示：

获取日期输入框的值
用 new Date() 获取今天的时间
用 JS 算出两个日期相差的天数
把结果渲染到页面中

你可以假设 HTML 结构如下（也可自定义）：

<input type="date" id="targetDate">
<button id="calcBtn">计算倒计时</button>
<div id="result"></div>

实践代码如下：

const targetDate = document.getElementById('targetDate');
const calcBtn = document.getElementById('calcBtn');
const result = document.getElementById('result');calcBtn.addEventListener('click', () => {const inputDate = new Date(targetDate.value);const today = new Date();// 判断日期是否合法if (isNaN(inputDate.getTime())) {alert("请选择有效日期");return;}// 计算剩余天数// 时间差计算：日期对象可以直接相减，结果是以毫秒为单位的时间差。const timeDifference = inputDate - today;//转换为天数：将毫秒数除以一天的毫秒数(1000 * 60 * 60 * 24)，用Math.ceil向上取整，确保结果是正整数。const dayDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));// 清空旧结果result.innerHTML = '';// 展示结果const p1 = document.createElement('p');p1.textContent = `目标日期: ${targetDate.value}`;const p2 = document.createElement('p');if (dayDifference < 0) {p2.textContent = '目标日期已过去 🎉';} else if (dayDifference === 0) {p2.textContent = '就是今天！🎯';} else {p2.textContent = `还有 ${dayDifference} 天！`;}result.appendChild(p1);result.appendChild(p2);
});

关于为什么用 isNaN()来判断targetDate.value是否为空

如果new Date()传入的是一个空字符串 ''。虽然我们可能期望它返回 null 或 undefined，但实际上它返回的是一个 Date 实例对象，只是这个对象的值是 "Invalid Date"。

所以：

new Date('') 不是 null。

new Date('') 不是 undefined。

它是一个 Date 对象，只是这个对象无效。

如果你调用 .getTime() 或 .valueOf()，它会返回 NaN。

isNaN() 就是用来判断这个 NaN 的。