数据在html中没有改变

Question

我想使用 java 脚本创建一个时钟。为此，我正在使用课程。

const htmlMarkup = (hours = 0, minutes = 0, seconds = 0) => {

  console.log('render html')

  return (

    `<div class="clock">

           <h2>clock: ${hours} ${minutes} ${seconds}</h2>

        </div>`

  )

};

class Clock {

  constructor() {

    this.time = new Date();

    setInterval(() => {

      this.getSeconds()

    }, 1000)

  }

  renderHTML() {

    return htmlMarkup(this.hours, this.minutes, this.getSeconds())

  }

  getSeconds() {

    return this.seconds = this.time.getSeconds()

  }

}

const runClock = new Clock();

document.querySelector(".app").innerHTML = runClock.renderHTML();

<div class="app"></div>

即使我设置：

setInterval(() => {

  this.getSeconds()

}, 1000)

...秒数没有变化。那么，为什么在应用程序首次呈现后秒数仍然相同以及如何解决该问题？

Answer 1

有几个问题：你的定时器只是调用getSeconds。getSeconds不执行任何更新 HTML 的操作。为此，您需要重复该document.querySelector(".app").innerHTML = runClock.renderHTML();部分。（事实上，该Clock#getSectonds方法没有做任何有用的事情，你可以摆脱它。）您的代码确实如此this.time = new Date()，然后仅this.time在整个过程中使用。该Date对象是不变的，它不会不断更新自己。this.time你根本不需要，只需使用new Date()in&nbsp;renderHTML。您的代码从不设置小时或分钟，因此它只显示0s 。下面是一个修改构造函数的示例，它接受要更新的元素，然后调用renderHTML计时器回调，使用new DateinrenderHTML获取当前日期/时间。（我还添加了各种缺失的分号。您应该使用它们，或者不使用它们并依赖 ASI，但不要偶尔使用它们。）const htmlMarkup = (hours = 0, minutes = 0, seconds = 0) => {&nbsp; &nbsp; console.log('render html');&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; `<div class="clock">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h2>clock: ${hours} ${minutes} ${seconds}</h2>&nbsp; &nbsp; &nbsp; &nbsp; </div>`&nbsp; &nbsp; );};class Clock {&nbsp; &nbsp; constructor(element) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; this.element = element;&nbsp; &nbsp; &nbsp; &nbsp; setInterval(()=> {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.element.innerHTML = this.renderHTML();&nbsp; &nbsp; &nbsp; &nbsp; },1000);&nbsp; &nbsp; }&nbsp; &nbsp; renderHTML() {&nbsp; &nbsp; &nbsp; &nbsp; const dt = new Date();&nbsp; &nbsp; &nbsp; &nbsp; return htmlMarkup(dt.getHours(), dt.getMinutes(), dt.getSeconds());&nbsp; &nbsp; }}const runClock = new Clock(document.querySelector(".app"));<div class="app"></div>

Answer 2

&nbsp; &nbsp; 我做了以下更改：setInterval(()=> {&nbsp; document.querySelector(".app").innerHTML = runClock.renderHTML();},1000)和getSeconds() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (new Date()).getSeconds()&nbsp; &nbsp; }现在只有秒数在变化。您将不得不处理几分钟和几小时。

Answer 3

你不会再打电话了new Date()。检查这个。const htmlMarkup = (hours = 0, minutes = 0, seconds = 0) => {&nbsp; console.log("render html");&nbsp; return `<div class="clock">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h2>clock: ${hours} ${minutes} ${seconds}</h2>&nbsp; &nbsp; &nbsp; </div>`;};class Clock {&nbsp; constructor() {&nbsp; &nbsp; setInterval(() => {&nbsp; &nbsp; &nbsp; this.getSeconds();&nbsp; &nbsp; }, 1000);&nbsp; }&nbsp; renderHTML() {&nbsp; &nbsp; return htmlMarkup(this.hours, this.minutes, this.getSeconds());&nbsp; }&nbsp; getSeconds() {&nbsp; &nbsp; this.time = new Date();&nbsp; &nbsp; this.seconds = this.time.getSeconds();&nbsp; &nbsp; console.log(this.time);&nbsp; }}const runClock = new Clock();document.querySelector(".app").innerHTML = runClock.renderHTML();