Question

有人可以看看这个并告诉我我做错了什么吗？我想将这些其他技术用作练习。

例如使用元素id /使用单独的js文件来重新创建显示当前日期的时钟应用程序。但是，它一直显示为空白：

"use strict";
var $ = function(id) { return document.getElementById(id); };
var padSingleDigit = function(num) {
return (num < 10) ? "0" + num : num;
};
// callback function for displaying clock time
var displayTime = function(now) {
$("hours").firstChild.nodeValue = now.hours;
$("minutes").firstChild.nodeValue = padSingleDigit(now.minutes);
$("seconds").firstChild.nodeValue = padSingleDigit(now.seconds);
$("ampm").firstChild.nodeValue = now.ampm;
// display date in "m/d/yyyy" format - correct for zero-based month
var date = (now.getMonth() + 1) + "/" + now.getDate() + "/" + now.getFullYear();
$("date").firstChild.nodeValue = date;
};

// onload event handler
window.onload = function() {
var clock = createClock(displayTime);

  
// start clock
clock.start();

};

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 450px;
    border: 3px solid blue;
    padding: 0 2em 1em;
}
h1 {
    color: blue;
}
label {
    float: left;
    width: 11em;
    text-align: right;
    padding-bottom: .5em;
}
input {
    margin-left: 1em;
    margin-bottom: .5em;
}
fieldset {
    margin-bottom: 1em;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">	
    <title>Clock</title>
    <link rel="stylesheet" href="clock.css">
    <script src="clock.js"></script>
</head>
<body>
    <main>
        <h1>Digital clock</h1>
        <fieldset>
            <legend>Clock</legend>
            <span id="date">&nbsp;</span>:
            <span id="minutes">&nbsp;</span>:
            <span id="seconds">&nbsp;</span>&nbsp;
            <span id="ampm">&nbsp;</span>
            
        </fieldset>
    </main>
</body>
</html>

Answer 1

问题是您引用的是不存在的元素。代码中没有id为“hours”的元素。

javascript应用程序显示的时间为空白

1 个答案: