JavaScript时钟获胜'无法正确显示

JavaScript Clock won't display correctly

本文关键字：显示 时钟 获胜 JavaScript      更新时间：2023-09-26

我一直在自学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时钟等，但我想自己从头开始做一个。

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

tick();

如果您正在学习HTML和JavaScript，请立即停止学习；您正在学习的代码习惯和方法非常非常差，而且已经过时了。

问题包括：

  • 没有DOCTYPE:<!DOCTYPE html>
  • 将div#Clock作为全局变量Clock访问，该变量已弃用，应为document.getElementById('Clock');
  • 使用字符串到setTimeout，而它实际上应该是setTimeout(tick, 100);
  • 使用不推荐使用的align属性，而应该在CSS中使用text-align: center;
  • 使用"旧浏览器"JavaScript注释技巧
  • 通过style属性使用内联CSS，这构成了演示和内容的不良分离

首先，您需要在某个地方运行函数tick((。如果你只定义它，它不会起任何作用。例如，在body onLoad事件中。

第二，你的元素应该在变量中正确设置。你应该通过id:获得元素

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

只需从

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

至

}    
window.setInterval(tick, 1000);

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

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

<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>
相关文章：