用javascript在div中显示时钟

Posted 2023-05-09

【中文标题】用javascript在div中显示时钟

【英文标题】：Displaying clock in div with javascript

【发布时间】：2018-06-04 10:30:03

【问题描述】：

我的头发变白了，因为我无法在我的 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>

【问题讨论】：

How to add onload event to a div element?的可能重复

除了 onload 问题，您还在每次调用 clock 时附加一个新的时间戳。相反，您可能只想做target.textContent = h + ':' + m + ':' + s。此外，您调用setInterval，这将使调用爆炸。你可能想要setTimeout。

fiddle.jshell.net/v1yjftoj

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

【参考方案1】：

浏览器不明白什么

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

当您使用 webpack 之类的东西来捆绑和使用 commonjs 模块时，这将起作用 如果你在 chrome 中查看 devtools 中的控制台，你会看到这个错误

Uncaught ReferenceError: require is not defined

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

<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