时间戳

首页 > 解决方案 > html中的数据没有变化

javascript - html中的数据没有变化

问题描述

我想使用 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)

...秒数没有变化。那么，为什么在第一次渲染应用程序后秒数仍然相同以及如何解决这个问题？

标签： javascript

解决方案

有几个问题：

  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>

推荐阅读