在 div 和 javascript 中显示时钟

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 中查看控制台，您将看到此错误

Uncaught ReferenceError: require is not defined

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

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

现在 clock.js 中的代码将在任何地方可用 app.js 你可以调用不需要函数的方法

clock()

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

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

here you can learn more about global events

在 div 和 javascript 中显示时钟

Displaying clock in div with javascript

javascript

dom

selectors-api