用javascript在div中显示时钟

我头发都白了，因为我的水疗中心不能显示这个时钟。我有一个时钟，应该显示在页面上，但我似乎不能得到它的权利。我尝试了课程中教给我们的东西，但我似乎做不好。请你看一下，也许可以帮我一把。甚至console.log也没有打印出来

Clock.js中的代码：

function clock () {
  let now = new Date()
  let h = now.getHours()
  let m = now.getMinutes()
  let s = now.getSeconds()

  m = checkTime(m)
  s = checkTime(s)

  let target = document.querySelector('#footer-clock')
  let clockText = document.createTextNode(h + ':' + m + ':' + s)
  target.appendChild(clockText)

  setInterval(clock, 500)
}

function checkTime (i) {
  if (i < 10) {
    i = '0' + i
  }
  return i
}

module.exports = clock

在HTML中，我有：

footer>
  <div id="footer-clock">

  </div>
</footer>

footer>

浏览器不明白是什么

module.exports = {}
const clock = require('./clock.js')

当您使用类似的东西进行捆绑和使用commonjs模块时，这将起作用 此外，如果您查看chrome中devtools中的控制台，您将看到此错误

未捕获引用错误：未定义require

注意：当您使用html开发站点时，您应该将任何脚本放在脚本标记中 像这样

<script src="app.js"></script>
<script src="clock.js"></script>

您还需要使用window.onload而不是

document.querySelector('#footer-clock').onload = function () {
clock()
console.log('Loaded')
}

---

除了onload问题之外，您还将在每次调用

clock

时附加一个新的时间戳。相反，您可能只想执行

target.textContent=h+'：'+m+'：'+s

。此外，调用

setInterval

，这将使调用爆炸。你可能想要

setTimeout

@Roy工作正常，现在我只需要在加载页面时开始加载。。。

clock()

document.querySelector('#footer-clock').onload = function () {
clock()
console.log('Loaded')
}