在计算出倒计时到期前的总毫秒数后，你需要将毫秒数转换为更易读的形式。在进行此操作之前，你需要创建一个 if 语句：
function countdownTimer() {
const difference = +new Date("2020-01-01") - +new Date();
let remaining = "Time's up!";
if (difference > 0) {
}
}
如果 difference 大于 0（如果不是元旦），则执行后续代码。
现在你可以将毫秒转换为天、小时、分钟和秒。为此，你需要进行一些除法、乘法运算，并使用取模运算符 %。
创建一个常量变量名为 parts 的对象。该对象的键应为 days、hours、minutes 和 seconds，对应的值应匹配将毫秒转换为相应时间单位的方程。下方的代码片段将展示这些方程：
if (difference > 0) {
const parts = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
};
}
Math.floor 函数用于将数字向下取整。这样，你就可以丢弃余数，获得每个时间单位的整数值。
包含剩余天、数、小时、分钟和秒的对象需要格式化为字符串。为此，将 remaining 重新赋值，并将其设置为 parts 中键的数组。使用 Object.keys 方法来实现：
if (difference > 0) {
const parts = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
};
remaining = Object.keys(parts)
}
remaining 现在被设置为 parts 中键的数组。由于 remaining 现在是一个数组，你可以使用 .map() 方法。.map() 方法将遍历 remaining 中的每个项目，并允许你对每个项目执行一个函数。
if (difference > 0) {
const parts = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
};
remaining = Object.keys(parts).map(part => {
})
}
你希望将每个项目转换为字符串。每个时间单位都应遵循以下格式：“X days。”part 对应时间单位。要获取实际数字，你需要使用 parts 对象的方括号表示法。创建一个 if 语句，检查对应时间单位是否没有数字。如果没有数字，则添加 return 语句：
remaining = Object.keys(parts).map(part => {
if (!parts[part]) return;
})
如果没有对应的数字，.map() 方法将跳到下一个时间单位并再次检查。
如果有数字，则返回数字连同时间单位。记住，它应遵循“X days”格式：
remaining = Object.keys(parts).map(part => {
if (!parts[part]) return;
return `${parts[part]} ${part}`;
})
${parts[part]} 将返回数字，而 ${part} 将返回时间单位。现在，remaining 是天、小时、分钟和秒的数组。这个数组需要转换为字符串。remaining 中的每个项目应由空格分隔。使用 .join(" ") 方法来实现：
remaining = Object.keys(parts).map(part => {
return `${parts[part]} ${part}`;
}).join(" ");
现在，你的 countdownTimer() 函数将如下所示：
function countdownTimer() {
const difference = +new Date("2020-01-01") - +new Date();
let remaining = "Time's up!";
if (difference > 0) {
const parts = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
};
remaining = Object.keys(parts).map(part => {
return `${parts[part]} ${part}`;
}).join(" ");
}
}
剩余时间现在已被格式化为易懂的字符串和时间单位。然而，剩余时间尚未显示在页面上。要实现这一点，你需要使用 DOM 操作。
步骤 4 — 在页面上显示剩余时间
将时间部分组装成字符串后，你可以更新你的 <div> 来包含该值。为此，你需要使用 DOM 操作。
在你的 countdownTimer() 函数中，在 if 语句下方，使用 getElementById DOM 选择器来引用 id 为 "countdown" 的 <div>：
function countdownTimer() {
const difference = +new Date("2020-01-01") - +new Date();
let remaining = "Time's up!";
if (difference > 0) {
const parts = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60),
};
remaining = Object.keys(parts).map(part => {
return `${parts[part]} ${part}`;
}).join(" ");
}
document.getElementById("countdown")
}
要更改这个 <div> 的内容，你还需要使用附加到 document.getElementById("countdown") 的 .innerHTML 属性。将这个 DOM 选择器设置为 remaining：
document.getElementById("countdown").innerHTML = remaining;
现在，countdownTimer() 函数已经完成。调用该函数使其运行：
function countdownTimer() {
const difference = +new Date("2020-01-01") - +new Date();
let remaining = "Time's up!";
if (difference > 0) {
const parts = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) %