在dom [React]上显示当前时间和实时更新

Question

我想在我的应用程序中显示时间。然而，我想自动更新时间，而不需要用户刷新页面。

我想要的是显示时间示例: 11:59，然后1分钟后自动显示12:00，无需浏览器刷新。就像普通的时钟一样。

知道如何显示当前秒数也会很有趣。

时间应为用户位置的当前实时时间。

Answer 1

​

function theTime() {
    let Datte = new Date();
    let H = Datte.getHours();
    let m = Datte.getMinutes();``
    let s = Datte.getSeconds();
    if (H < 10 ){
        H = "0" + H;
    }
    if (m < 10 ){
        m = "0" + m;
    }
    if (s < 10 ){
        s = "0" + s;
    }
    document.getElementById("time").textContent = `${H} : ${m} : ${s}`
}
 setInterval(theTime);

<div id="time"></div>

​

setInterval(theTime)；

Answer 2

现在，您可以使用Date()

​

const timeEL = document.getElementById('time');

setInterval(setTime, 1000);

function setTime() {
  let date = new Date();
  timeEL.innerText = `${date.getHours()}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`;
}

<div id="time">
</div>

​

通过使用ReactJS，您可以使用Refs and the DOM调用此函数并设置值。

​

class Times extends React.Component {

  constructor(props) {
    super(props);
    this.timeElement = React.createRef();
  }

  componentDidMount = () => {
    setInterval(this.setTime, 1000);
  }


  setTime = () => {
    let date = new Date();
    this.timeElement.current.innerText = `${date.getHours()}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`;
  }

  render = () => { 
    return (
      <div ref={this.timeElement}></div>
    )
  }

}

ReactDOM.render( <Times/> , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="app">
</div>

​