Question

我有以下代码作为教导我的孩子如何阅读时间的想法的一部分。我正在尝试获取时钟程序的输出并将其插入到不正确的时间列表中。这个想法是，与模拟时钟相比，正确的时间表明这样说。

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .clock {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
    }
  </style>
</head>

<body onLoad="startclock()">
  <div id="changeTime" class="clock"></div>
  <script type="text/javascript">
    var timerID = null
    var timerRunning = false

    function stopclock() {
      if (timerRunning)
        clearTimeout(timerID)
      timerRunning = false
    }

    function startclock() {
      stopclock()
      showtime()
    }

    function showtime() {
      var now = new Date()
      var hours = now.getHours()
      var minutes = now.getMinutes()
      var timeValue = "" + ((hours > 12) ? hours - 12 : hours)
      timeValue += ((minutes < 10) ? ":0" : ":") + minutes
      timeValue += (hours >= 12) ? " P.M." : " A.M."
      document.getElementsByClassName("clock").value = timeValue
      timerID = setTimeout("showtime()", 1000)
      timerRunning = true
    }

    var myTime = ['08:07 A.M.', '10:15 A.M.', '03:43 P.M.', '07:44 P.M.', '11:59 A.M.', '01:19 P.M.', '01:21 A.M.'];
    myTime.push(timerID);
    var counter = 0;
    var elem = document.getElementById("changeTime");
    setInterval(change, 3000);

    function change() {
      var counter = Math.floor(Math.random() * myTime.length);
      elem.innerHTML = myTime[counter];
    }
  </script>
</body>

</html>

我已经尝试使用我认为正确的变量并使用push将其插入列表但是当正确的时间显示它变为空白时。我的另一个问题是，当最初激活前三秒时它始终是空白的。任何修复这两个问题的帮助都会非常感激，因为我还在学习javascript。

请查看www.testing12audio.com到目前为止我所拥有的内容。

Answer 1

有两个问题：

事情变得空白
前3秒无效

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .clock {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
    }
  </style>
</head>

<body onLoad="startclock()">
  <div id="changeTime" class="clock"></div>
  <script type="text/javascript">
    var timerID = null
    var timerRunning = false

    function stopclock() {
      if (timerRunning)
        clearTimeout(timerID)
      timerRunning = false
    }

    function startclock() {
      stopclock()
      showtime()
    }
    var myTime = ['08:07 A.M.', '10:15 A.M.', '03:43 P.M.', '07:44 P.M.', '11:59 A.M.', '01:19 P.M.', '01:21 A.M.'],
      timeVal;

    function showtime() {
      var now = new Date()
      var hours = now.getHours()
      var minutes = now.getMinutes()
      var timeValue = "" + ((hours > 12) ? hours - 12 : hours)
      timeValue += ((minutes < 10) ? ":0" : ":") + minutes
      timeValue += (hours >= 12) ? " P.M." : " A.M.";
      timerID = setTimeout(showtime, 1000);
      if (timeValue != timeVal) {
        if (timeVal !== undefined) {
          myTime.pop();
        }
        myTime.push(timeValue);
        timeVal = timeValue;
      }
      timerRunning = true
    }

    var counter = 0;
    var elem = document.getElementById("changeTime");

    (function change() {
      var counter = Math.floor(Math.random() * myTime.length),
        time = myTime[counter];
      elem.innerHTML = myTime[counter];
      if (time === timeVal) {
        // if displayed the correct time, its pushed out of the array.
        myTime.pop();
        timeVal = undefined;
      }
      setTimeout(change, 1500);
    })();
  </script>
</body>


</html>

如何将函数输出插入到另一个函数的数组中

1 个答案: