用javascript在div中显示时钟

Question

我在这里变得头发灰白，因为我无法在我的SPA上显示这个时钟。我有一个应该在页面上显示的时钟，但我似乎无法做到正确。我已经尝试过我们在课程中学到的东西，但我似乎无法做到正确。你能不能看看它并伸出援助之手。甚至没有打印出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

app.js中的代码：

const clock = require('./clock.js')

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

在HTML中我有：

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

  </div>
</footer>

Answer 1

浏览器不明白是什么

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

当你使用像webpack这样的东西进行捆绑和使用commonjs模块时，如果你在chrome中的devtools中查看控制台，你会看到这个错误

未捕获的ReferenceError：未定义require

请注意：当您使用html开发网站时，您应该将任何脚本放在脚本标记中，如下所示

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

现在，clock.js中的代码将可用于任何地方，所以在app.js中你可以调用没有require函数的方法

clock()

你也需要使用window.onload而不是

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

here you can learn more about global events