Javascript中的数字时钟
Javascript中的数字时钟
提问于 2018-06-05 08:35:41
代码用于制作数字时钟，在showTime函数中放入setTimeout函数有什么作用，同时设置textcontent和Innertext有什么作用
function showTime(){
var date = new Date();
var h = date.getHours();// 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if(h == 0){
h = 12;
}
if(h > 12){
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();<div id="MyClockDisplay" class="clock"></div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-05 08:45:29
您需要在showTime的底部调用setTimeout，以便每次调用showTime都会将函数排入队列，以便在1秒内再次运行-在运行时，函数将在另一秒后再次排队，依此类推。使用setTimeout递归调用函数本身是使用setInterval的另一种选择。
textContent通常比innerText更可取-参见The poor, misunderstood innerText，尽管如果你只是赋值而不是获取，这并不重要。这里不适合使用innerHTML，因为您要分配的是文本，而不是HTML标记。
使用setInterval而不是递归setTimeout将如下所示，实现完全相同的功能：
function showTime() {
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if (h == 0) {
h = 12;
}
if (h > 12) {
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
}
showTime();
setInterval(showTime, 1000);<div id="MyClockDisplay" class="clock"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50690499
复制相关文章
相似问题