数字时钟脚本
在学习JavaScript时，我认为制作一个数字时钟程序是个好主意。我遵循了youtube教程(对我的偏好做了一些调整)，并提出了我的最终代码。我来到CodeReview是为了得到脚本的审查，并询问脚本是否有什么问题和/或任何方法来改进它作为一个整体。使脚本更短(但性能也很高)的方法也被接受。我也很好奇我现在是否有“红旗”。我会给出最好的答案绿色标号。谢谢!
function showTime() {
const date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
let session = (hours < 12) ? "AM" : "PM";
if (hours === 0) {
hours = 12;
} else if (hours > 12) {
hours -= 12;
}
hours = (hours < 10) ? '0' + hours : hours;
minutes = (minutes < 10) ? '0' + minutes : minutes;
seconds = (seconds < 10) ? '0' + seconds : seconds;
const time = `${hours} : ${minutes} : ${seconds} ${session}`;
document.querySelector('div').innerHTML = time;
setTimeout(showTime,1000)
}
showTime() Digital ClockTL;DR:我是一个JavaScript程序员，而且CSS目前不是我的套件，因此我知道时钟可以使用一些样式。如何改进JavaScript代码？
回答 4
Code Review用户
发布于 2020-06-12 06:31:55
一些重复的代码，即( < 10) ? '0' + : ;，可以将其分解到实用程序中，以便变得更枯燥。使用字符串:padStart，您可以确保返回最小长度的字符串，填充字符串的开头，直到达到该长度为止。
padStart()方法将当前字符串替换为另一个字符串(如果需要的话，多次)，直到得到的字符串达到给定的长度。填充从当前字符串的开始应用。
当hours/minutes/seconds足够小，一个值可以变成一个个位数时，这个值会将它恢复到“两位数”。我们通过String构造函数运行它，使它成为一个字符串，并能够使用string函数。
const padTime = value => String(value).padStart(2, '0');你也可以通过模数12预先计算进入范围的小时。hours === 0检查会将小时移到范围内。
使用setInterval而不是setTimeout，并将其移出函数体。最初需要调用函数一次，但间隔将处理每次后续调用以更新显示。通过移出主体，您将避免时钟倾斜，即1000超时过期到下一个超时实例化之间的时间。
将您想要的时间注入到特定的div中，这样您就可以确定地知道它在哪里。我用了一个time的id。
function showTime() {
const date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
let session = (hours < 12) ? "AM" : "PM";
// Modulus 12 "places" the hours into 1 of 12 "bins" [0-11]
// Checking for 0 and setting to 12 shifts "bins" to [1-12]
// hours = hours % 12 || 12; is more succinct using the fact
// that `0` is a falsey value.
hours = hours % 12; // hours one of [0,1,2,3,4,5,6,7,8,9,10,11]
if (hours === 0) {
hours = 12; // hours one of [1,2,3,4,5,6,7,8,9,10,11,12]
}
const padTime = value => String(value).padStart(2, '0');
const time = `${padTime(hours)} : ${padTime(minutes)} : ${padTime(seconds)} ${session}`;
document.querySelector('#time').innerHTML = time;
}
showTime();
setInterval(showTime, 1000); Digital ClockCode Review用户
发布于 2020-06-12 06:26:14
1
您正在重复condition ? '0' + integer : integer 3次。
这可以通过const zeroPad = (num, places) => String(num).padStart(places, '0')来减少
和做
hours = zeroPad(hours, 2);
minutes = zeroPad(minutes, 2);
seconds = zeroPad(seconds, 2);现在，2是一个重复的幻数，您可能希望将其存储在一个具有描述性名称的变量中。
2
通常，等号周围没有空格：
3
我不熟悉JavaScript，但我会替换嵌套的setTimeout：
function showTime() {
// ...
setTimeout(showTime, 1000)
}使用setInterval：
setInterval(showTime, 1000);
我也会在逗号后面放一个空格。
4
要格式化时间，请查看这个回答，它建议使用：
hours = hours % 12;
hours = hours ? hours : 12;5
您使用的是document.querySelector('div')，但是这个“返回与指定选择器匹配的文档中的第一个元素”。
我建议使用
和document.getElementById
Code Review用户
发布于 2020-06-12 14:56:47
我假定，您正在正确地执行格式化和处理时间，因此我不提，您可以使用现有的api接口在"oneliner“中完成此操作(有关选项，请参见这里)：
let options = {
hour12: true,
hour: "2-digit",
minute: "2-digit",
second: "2-digit"
};
function showTime() {
container.textContent = (new Date()).toLocaleTimeString("en-US", options);
}
setInterval(showTime, 1000);另一种按数字格式化的方法是再次使用现有的api而不是String.padStart()：
let x = 42;
console.log(x.toLocaleString("en-US", { minimumIntegerDigits: 3 }));在这里，选项本身就说明了问题，输出是"042"。
其他答案是关于您的代码的最重要的答案。有一件事没有提到，你的手表可能会比实际时间慢近1秒，如果它在两秒钟内启动的话。若要与系统时间保持一致，可以执行以下操作：
setTimeout(() => setInterval(showTime, 1000), 1000 - (new Date()).getMilliseconds());
在这里，setTimeout()正在等待下一个系统的第二个出现，然后通过调用setInterval()启动监视。
https://codereview.stackexchange.com/questions/243748
复制相似问题
腾讯云开发者
