当天时间小案例--时间戳，获取年月日星期时分秒

最终效果（用于监控页面）显示此刻的时间

 

 更多关于时间戳的写法，请点击  js对时间戳的处理 获取时间，昨天，今天，明天，时间不同格式

react代码

import React, { Component } from 'react'
import { Icon } from "antd";
import styles from "./index.less";

export default class Today extends Component {

    constructor(props) {
        super(props)
        this.state = {


        };
    }

   formatDateTime=()=> {
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        const day = date.getDay();
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        const arr_week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
        const week = arr_week[day];
        return y + '年' + m + '月' + d + '日 '  + " " + week + " " + h + ':' + minute + ':' + second;
    }

    render() {
        
        const time = this.formatDateTime()
        return (
            <div className={styles.displayData}>
                <Icon type="calendar" style={{ paddingRight: '40px' }} /> {time}
            </div>
        )
    }
}

css样式

.displayData {
        height: 43px;
        background: linear-gradient(360deg, rgba(119, 200, 50, 1) 0%, rgba(153, 213, 87, 1) 100%);
        box-shadow: 0px 6px 10px 1px rgba(145, 163, 195, 0.12);
        border-radius: 22px;
        margin-bottom: 12px;
        line-height: 43px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        text-align: center;
    }

而且秒会根据当前时间进行改变