数据在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

有几个问题：

1. 你的定时器只是调用getSeconds。getSeconds不执行任何更新 HTML 的操作。为此，您需要重复该document.querySelector(".app").innerHTML = runClock.renderHTML();部分。（事实上，该Clock#getSectonds方法没有做任何有用的事情，你可以摆脱它。）

2. 您的代码确实如此this.time = new Date()，然后仅this.time在整个过程中使用。该Date对象是不变的，它不会不断更新自己。this.time你根本不需要，只需使用new Date()in renderHTML。

3. 您的代码从不设置小时或分钟，因此它只显示0s 。

下面是一个修改构造函数的示例，它接受要更新的元素，然后调用renderHTML计时器回调，使用new DateinrenderHTML获取当前日期/时间。（我还添加了各种缺失的分号。您应该使用它们，或者不使用它们并依赖 ASI，但不要偶尔使用它们。）

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(element) { 

        this.element = element;

        setInterval(()=> {

           this.element.innerHTML = this.renderHTML();

        },1000);

    }

    renderHTML() {

        const dt = new Date();

        return htmlMarkup(dt.getHours(), dt.getMinutes(), dt.getSeconds());

    }

}

const runClock = new Clock(document.querySelector(".app"));

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

Answer 2

    我做了以下更改：

setInterval(()=> {

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

},1000)

和

getSeconds() {

          return (new Date()).getSeconds()

    }

现在只有秒数在变化。您将不得不处理几分钟和几小时。

Answer 3

你不会再打电话了new Date()。检查这个。

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() {

    setInterval(() => {

      this.getSeconds();

    }, 1000);

  }

  renderHTML() {

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

  }

  getSeconds() {

    this.time = new Date();

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

    console.log(this.time);

  }

}

const runClock = new Clock();

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