zoukankan      html  css  js  c++  java
  • 当天时间小案例--时间戳,获取年月日星期时分秒

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

     更多关于时间戳的写法,请点击  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     }

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

  • 相关阅读:
    对Spring <context:annotation-config/>的理解
    Javascript this指针
    go 打造世界最快的go模板引擎gorazor 2.0
    swagger 部署(Mac )
    Ab测试
    Nginx tcp限制并发、IP、记日志
    Nginx proxy_protocol协议与realip模块
    数据结构之回溯
    数据结构之分治
    数据结构之二分查找
  • 原文地址:https://www.cnblogs.com/rong88/p/12073225.html
Copyright © 2011-2022 走看看