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 您可以调用不需要函数的方法

clock()

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

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

here you can learn more about global events

用javascript在div中显示时钟

1 个答案: