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

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

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

react代码

 1 import React, { Component } from 'react'
 2 import { Icon } from "antd";
 3 import styles from "./index.less";
 5 
 6 export default class Today extends Component {
 7 
 9     constructor(props) {
10         super(props)
11         this.state = {
12 
13 
14         };
15     }
16 
18    formatDateTime=()=> {
19         var date = new Date();
20         var y = date.getFullYear();
21         var m = date.getMonth() + 1;
22         m = m < 10 ? ('0' + m) : m;
23         var d = date.getDate();
24         d = d < 10 ? ('0' + d) : d;
25         const day = date.getDay();
26         var h = date.getHours();
27         h = h < 10 ? ('0' + h) : h;
28         var minute = date.getMinutes();
29         var second = date.getSeconds();
30         minute = minute < 10 ? ('0' + minute) : minute;
31         second = second < 10 ? ('0' + second) : second;
32         const arr_week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
33         const week = arr_week[day];
34         return y + '年' + m + '月' + d + '日 '  + " " + week + " " + h + ':' + minute + ':' + second;
37     }

38     render() {
39         
40         const time = this.formatDateTime()
41         return (
42             <div className={styles.displayData}>
43                 <Icon type="calendar" style={{ paddingRight: '40px' }} /> {time}
44             </div>
45         )
46     }
47 }

css样式

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

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