Question

我浏览了一些javascript时钟项目，并做了一些自己的项目，但我无法显示时钟。不知道我缺少什么，但我无法在页面上显示实际的时钟。这就是我所需要的，但是堆栈溢出使我的写作更多了，因为显然我不能发表大部分为代码的文章。

<script>
        function updateClock() {
            var currentTime = new Date();
            var currentHours = currentTime.getHours();
            var currentMinutes = currentTime.getMinutes();
            var currentSeconds = currentTime.getSeconds();
        
            // Add a 0 if # is under 10 instead of leaving a blank space
            currentMinutes = ( currentMinutes < 10 ? "0" : "") + currentMinutes;
            currentSeconds = ( currentSeconds < 10 ? "0" : "") + currentSeconds;
            
            // Conversion to 12-hour time instead of 24-hour time
            var timeOfDay = ( currentHours < 12) ? "AM" : "PM";
            currentHours = ( currentHours > 12) ? currentHours - 12 : currentHours;
            currentHours = ( currentHours == 0) ? 12 : currentHours;

            document.getElementById('.clock')[0].innerHTML = 
            currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
            
           

        }
    </script>

body{
    background: rgb(238, 216, 216);
}

#header {
    text-align: center;
    color: black;
    text-shadow: 2px 2px 2px rgb(136, 181, 230);
    font-size: 35px;
}

.container {
    text-align: center;
}

#clock {
    font-size: 4em;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    
</head>
<body>
    <div id="header">
        <h1>Clock Project</h1>
    </div>
    
    <span class="clock"></span>
    
</body>

Answer 1

您不能将document.getElementById与类名一起使用。

将跨度的id设置为“时钟”（<span id="clock"></span>）并获得如下元素：document.getElementById("clock")

或使用document.getElementsByClassName获取如下元素：document.getElementsByClassName("clock")[0]

由于您的CSS使用id cssRule用#clock为时钟设置元素的样式，因此您可能打算将id的{{1}}设置为“ clock “。

您应该使用setInterval每隔1000毫秒更新一次时钟（实际上您从未调用过span函数）。

updateClock

body{
    background: rgb(238, 216, 216);
}

#header {
    text-align: center;
    color: black;
    text-shadow: 2px 2px 2px rgb(136, 181, 230);
    font-size: 35px;
}

.container {
    text-align: center;
}

#clock {
    font-size: 4em;
}

您可能要使用Date.prototype.toLocaleTimeString()，这样就不必进行太多计算即可获得日期。

在这种情况下，<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> </head> <body> <div id="header"> <h1>Clock Project</h1> </div> <span id="clock"></span> <script> function updateClock() { var currentTime = new Date(); var currentHours = currentTime.getHours(); var currentMinutes = currentTime.getMinutes(); var currentSeconds = currentTime.getSeconds(); // Add a 0 if # is under 10 instead of leaving a blank space currentMinutes = ( currentMinutes < 10 ? "0" : "") + currentMinutes; currentSeconds = ( currentSeconds < 10 ? "0" : "") + currentSeconds; // Conversion to 12-hour time instead of 24-hour time var timeOfDay = ( currentHours < 12) ? "AM" : "PM"; currentHours = ( currentHours > 12) ? currentHours - 12 : currentHours; currentHours = ( currentHours == 0) ? 12 : currentHours; document.getElementById('clock').innerHTML = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay; } setInterval(function(){updateClock()}, 1000); </script> </body>应该做您想做的事。

new Date().toLocaleTimeString("en-US")

body{
    background: rgb(238, 216, 216);
}

#header {
    text-align: center;
    color: black;
    text-shadow: 2px 2px 2px rgb(136, 181, 230);
    font-size: 35px;
}

.container {
    text-align: center;
}

#clock {
    font-size: 4em;
}

Answer 2

问题出在：

document.getElementById('.clock')[0].innerHTML = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

.clock不是id，而是一个类。 document.getElementById将搜索ID。
对于类，您可以使用getElementsByClassName：

document.getElementsByClassName("clock")[0];

或者您也可以将class更改为id。

@ hev1的答案要好得多

javascript时钟项目未显示到页面

2 个答案: