Question

我一直在教自己JavaScript，我还是比较新的，我试图将时钟功能添加到我的网站，但是，我看不到要显示它，这是我的全部代码：

<html>
<head>
<script type="text/javascript">
    function tick() {
        var hours, minutes, seconds, ap;
        var intHours, intMinutes, intSeconds;
        var today;

        today = new Date();

        intHours = today.getHours();
        intMinutes = today.getMinutes();
        intSeconds = today.getSeconds();

        if (intHours == 0) {
            hours = "12:";
            ap = "Midnight";
        } else if (intHours < 12) {
            hours = intHours + ":";
            ap = "a.m";
        } else if (intHours == 12) {
            hours = "12:";
            ap = "noon";
        } else {
            intHours = intHours - 12
            hours = intHours + ":";
            ap = "p.m.";
        }
        if (intMinutes < 10) {
            minutes = "0" + intMinutes + ":";
        } else {
            minutes = intMinutes + ":";
        }
        if (intSeconds < 10) {
            seconds = "0" + intSeconds + " ";
        } else {
            seconds = intSeconds + " ";
        }
        timeString = hours + minutes + seconds + ap;

        Clock.innerHTML = timeString;

        window.setTimeout("tick();", 100);
    }

    //--></script>
</head>
<body>
<div id="Clock" align="center" style="font-family: Verdana; font-size: 10px; color:#000000"></div>
 </body>
 </html>

正如我所说的，我运行它，据我所知，它应该运行良好，因为我说我有点新，所以也许有人可以帮助我。

再次感谢别人。

编辑：在任何人说之前，我完全清楚有这种事情的预制工作示例，例如jQuery时钟等，但我想从头开始制作一个。

Answer 1

它没有启动，主要是因为你需要在最初调用该函数至少一次：

tick();

从哪里学习HTML和JavaScript，立即停止学习;你正在学习的代码习惯和方法非常非常差，而且已经过时了。

问题包括：

没有DOCTYPE：<!DOCTYPE html>
访问div#Clock作为全球变量Clock，已弃用，且应为document.getElementById('Clock');
使用字符串setTimeout，它应该是setTimeout(tick, 100);
使用已弃用的align属性，何时应在CSS

text-align: center;

使用'旧浏览器'JavaScript注释技巧
通过style属性使用内联CSS，这会导致表示和内容分离不佳

Answer 2

首先，你需要在某个地方运行你的函数tick（）。如果只定义它，它什么都不做。例如，在正文onLoad事件中。

其次，你的元素应该在var中正确设置。你应该通过id获取元素：

var Clock = document.getElementById('Clock');

Answer 3

只需改变你的最后两行 <击>

<击>

    window.setTimeout("tick();", 100);
}

<击> 到

}    
window.setInterval(tick, 1000);

演示：http://jsfiddle.net/naveen/3PQ8B/1/

更新：错过了document.getElementById部分：）

Answer 4

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

JavaScript时钟无法正确显示

4 个答案: