Question

我已经仔细阅读了这段代码，对此我感到非常积极。话虽这么说，但是显然缺少了一些东西，因为程序本身在浏览器中运行时会出现一个空时钟。我知道方括号和括号都具有匹配的集合，并且我对自己的功能非常有信心。 chrome开发人员工具无济于事。任何对Java有良好了解的人都可以看到这里缺少什么？

"use strict";
var $ = function(id) {
  return document.getElementById(id);
};

var displayCurrentTime = function() {
  var today = new Date();
  var hour = today.getHours();
  var min = today.getMinutes();
  var sec today.getSeconds();

  var ap = "AM";

  if (hour > 12) {
    h = h - 12;
    ap = "PM";
  } else {
    switch (hour) {
      case 12:
        ap = "PM";
        break;
      case 0:
        ap = "AM";
        break;
    }
  }

  $("hours").firstChild.nodeValue = padSingleDigit(hours);
  $("minutes").firstChild.nodeValue = padSingleDigit(min);
  $("seconds").firstChild.nodeValue = padSingleDigit(sec);
  $("ap").firstChild.nodeValue = padSingleDigit(ap);
};


var padSingleDigit = function(num) {
  if (num < 10) {
    return "0" + num;
  } else {
    return num;
  }
};

window.onload = function() {
  displayCurrentTime();
  setInterval(displayCurrentTime, 1000);
};

<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="hours">&nbsp;</span>:
                <span id="minutes">&nbsp;</span>:
                <span id="seconds">&nbsp;</span>&nbsp;
                <span id="ampm">&nbsp;</span>
            </fieldset>
        </main>
    </body>
    </html>

Answer 1

您只是有很多（3）个错字...

"use strict";
var $ = function(id) {
  return document.getElementById(id);
};

var displayCurrentTime = function() {
  var today = new Date();
  var hour = today.getHours();
  var min = today.getMinutes();
  var sec = today.getSeconds();

  var ap = "AM";

  if (hour > 12) {
    hour = hour - 12;
    ap = "PM";
  } else {
    switch (hour) {
      case 12:
        ap = "PM";
        break;
      case 0:
        ap = "AM";
        break;
    }
  }

  $("hours").firstChild.nodeValue = padSingleDigit(hour);
  $("minutes").firstChild.nodeValue = padSingleDigit(min);
  $("seconds").firstChild.nodeValue = padSingleDigit(sec);
  $("ampm").firstChild.nodeValue = padSingleDigit(ap);
};


var padSingleDigit = function(num) {
  if (num < 10) {
    return "0" + num;
  } else {
    return num;
  }
};

window.onload = function() {
  displayCurrentTime();
  setInterval(displayCurrentTime, 1000);
};

<main>
  <h1>Digital clock</h1>
  <fieldset>
    <legend>Clock</legend>
    <span id="hours">&nbsp;</span>:
    <span id="minutes">&nbsp;</span>:
    <span id="seconds">&nbsp;</span>&nbsp;
    <span id="ampm">&nbsp;</span>
  </fieldset>
</main>

*此代码中还有其他（非功能性）问题，但由于它不是Q，因此我不会更改它们以使答案正确。

Javascript Clock-尽管程序已满，但时钟为空

1 个答案: