JavaScript 时钟无法正确显示

发布于 2024-11-30 03:42:55 字数 1610 浏览 1 评论 0原文

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

原文

I've been teaching myself JavaScript and i'm still fairly new, i've tried to make a clock feature to add to my site, however, I can't see to get it to display, this is my full code:

<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>

As I said, I run it and as far as I can see, it should run fine, as I said i'm a bit new, so maybe someone could help me out.

Thanks again people.

EDIT: Before anyone says, I am fully aware that there are premade working examples of this kind of thing, such as jQuery clocks etc, but I wanted to make one myself from scratch.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南城追梦 2024-12-07 03:42:55

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

tick();

无论你从哪里学习 HTML 和 JavaScript，立即停止从那里学习；你正在学习的代码习惯和方法是非常非常差和过时的。

问题包括：

没有 DOCTYPE：
将 div#Clock 作为全局变量 Clock 访问，该变量已弃用，以及应该是 document.getElementById('Clock');
使用字符串来 setTimeout，而实际上应该是 setTimeout(tick, 100);
使用已弃用的 align 属性，而您应该在
使用“旧浏览器”JavaScript 注释技巧，这导致表现和内容的分离不佳
的 CSS 中使用 text-align: center;通过 style 属性使用内联 CSS 的

It is not starting, mainly because you need to call the function at least once initially:

tick();

Where ever you are learning HTML and JavaScript from, stop learning from there immediately; the code habits and methods you are learning are very, very poor and outdated.

Problems include:

not having a DOCTYPE: <!DOCTYPE html>
accessing div#Clock as a global variable Clock, which is deprecated, and should be document.getElementById('Clock');
using a string to setTimeout, when it should really be setTimeout(tick, 100);
using the deprecated align attribute, when you should use text-align: center; in CSS
using the 'old-browser' JavaScript comment-out trick
using inline CSS via the style attribute, which constitutes poor separation of presentation and content

回复收藏 0 原文

凉薄对峙 2024-12-07 03:42:55

首先，您需要在某处运行函数 tick() 。如果你只定义它，它不会做任何事情。以正文 onLoad 事件为例。

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

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

First, you need to run your function tick() somewhere. It doesn't do anything if you only define it. In the body onLoad event for example.

Second, your element should be properly set in a var. You should get the element by id:

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

回复收藏 0 原文

云淡月浅 2024-12-07 03:42:55

只需将最后两行更改为
<罢工>

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

> <罢工>
演示

}    
window.setInterval(tick, 1000);

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

更新：错过document.getElementById 部分:)

Just change your last two lines from

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

}    
window.setInterval(tick, 1000);

Demo: http://jsfiddle.net/naveen/3PQ8B/1/

Update: missed the document.getElementById part :)

回复收藏 0 原文

金兰素衣 2024-12-07 03:42:55

<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>

<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>

回复收藏 0 原文

~没有更多了~