react实现时间按秒变化

最新推荐文章于 2024-08-23 09:35:15 发布

我的小狗很很可爱

最新推荐文章于 2024-08-23 09:35:15 发布

阅读量1k

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/chhpearl/article/details/113917929

版权

reactjs javascript

React 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

>>>> react实现时间按秒变化

实现一个小功能，显示当前的系统时间，且时间根据秒变化。这个很容易实现的，实现思路如下：

componentDidMount() {
    this.interval = setInterval(() => this.setState({ time: this.timestampToTime(new Date().getTime()) }), 1000);
}

componentWillUnmount() {
    clearInterval(this.interval);
}

/**
* 将时间戳转为年月日时分秒格式
* @param {*} timestamp 
*/
timestampToTime(timestamp) {
    var date = new Date();//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
    var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());

    let strDate = Y + M + D + h + m + s;
    return strDate;
}

最后在render里面显示time即可： {this.state.time}