JavaScript时钟

我在代码中遇到了一个障碍，下面的代码是一个JavaScript时钟，它可以完美地工作：

function renderTime() {
    var currentTime = new Date();
    var diem = "AM";
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();

    if(h == 0) {
        h = 12;
    } else if(h > 12) {
        h = h - 12;
        diem = "PM";
    }
    if(h < 10) {
        h = "0" + h;
    }
    if(m < 10) {
        m = "0" + m;
    }
    if(s < 10) {
        s = "0" + s;
    }
    var myClock = document.getElementById('clockDisplay');
    myClock.textContent = h + ":" + m + ":" + s + " " + diem;
    myClock.innerHTML = h + ":" + m + ":" + s + " " + diem;
    myClock.innerText = h + ":" + m + ":" + s + " " + diem;
    setTimeout('renderTime()',1000);

}
renderTime();

函数renderTime（）{
var currentTime=新日期（）；
var diem=“AM”；
var h=currentTime.getHours（）；
var m=currentTime.getMinutes（）；
var s=currentTime.getSeconds（）；
如果（h==0）{
h=12；
}否则，如果（h>12）{
h=h-12；
diem=“PM”；
}
if（h<10）{
h=“0”+h；
}
如果（m<10）{
m=“0”+m；
}
如果（s<10）{
s=“0”+s；
}
var myClock=document.getElementById（'clockDisplay'）；
myClock.textContent=h+“：“+m+”：“+s+”+diem；
myClock.innerHTML=h+“：“+m+”：“+s+”+diem；
myClock.innerText=h+“：”+m+“：“+s+”+diem；
setTimeout（'renderTime（）'，1000）；
}
renderTime（）；

然而，我现在尝试着做一些不同的事情，比如：

function makeTime() {
    var currentTime = new Date();
    var diem = "AM";
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();

    if(h == 0) {
        h = 12;
    } else if(h > 12) {
        h = h - 12;
        diem = "PM";
    }
    if(h < 10) {
        h = "0" + h;
    }
    if(m < 10) {
        m = "0" + m;
    }
    if(s < 10) {
        s = "0" + s;
    }
    var clock = document.getElementById('clock');
    clock.innerHTML = "<h1>"+h+":"+m+":"+s+":"+diem+"</h1>";
    myClock.textContent = "<h1>"+h+":"+m+":"+s+":"+diem+"</h1>";
    myClock.innerText = "<h1>"+h+":"+m+":"+s+":"+diem+"</h1>";
    setTimeout('makeTime()',1000);
}
makeTime();

函数makeTime（）{
var currentTime=新日期（）；
var diem=“AM”；
var h=currentTime.getHours（）；
var m=currentTime.getMinutes（）；
var s=currentTime.getSeconds（）；
如果（h==0）{
h=12；
}否则，如果（h>12）{
h=h-12；
diem=“PM”；
}
if（h<10）{
h=“0”+h；
}
如果（m<10）{
m=“0”+m；
}
如果（s<10）{
s=“0”+s；
}
var clock=document.getElementById（'clock'）；
clock.innerHTML=“+h+”：“+m+”：“+s+”：“+diem+”；
myClock.textContent=“+h+”：“+m+”：“+s+”：“+diem+”；
myClock.innerText=“+h+”：“+m+”：“+s+”：“+diem+”；
setTimeout（'makeTime（）'，1000）；
}
makeTime（）；

这一个可以工作，但是没有像另一个一样更新，您必须手动刷新页面

---

我做错了什么？

将变量重命名为

clock

后，您在第二个版本中继续引用

myClock

：

var clock = ...
clock.innerHtml = ...
myClock.textContent = "<h1>"+h+":"+m+":"+s+":"+diem+"</h1>";
myClock.innerText = "<h1>"+h+":"+m+":"+s+":"+diem+"</h1>";
setTimeout('makeTime()',1000);

var时钟=。。。
clock.innerHtml=。。。
myClock.textContent=“+h+”：“+m+”：“+s+”：“+diem+”；
myClock.innerText=“+h+”：“+m+”：“+s+”：“+diem+”；
setTimeout（'makeTime（）'，1000）；

这会导致错误（

参考错误：未定义myClock

），从而阻止执行流到达

setTimeout

调用

---

你应该学会使用可用的工具。每个浏览器都有一种向开发人员报告JavaScript错误的方法。打开Webkit/IE10中的开发者控制台或Firefox中的Firebug，您将看到这些错误以及它们在代码中发生的确切位置。

Sidenote:use

setTimeout（makeTime，1000）而不是传递字符串（这是eval的一种形式，应该避免）