大屏显示数字时钟

一、时钟效果

二、代码

1、获取日期

dateTime:function(cFormat, time){
   time = time || new Date()
   var format = cFormat || '{y}-{m}-{d} {h}:{i}'
   var date
   if (typeof time === 'object') {
       date = time
   } else {
       if (('' + time).length === 10) time = parseInt(time) * 1000
       date = new Date(time)
   }
   var formatObj = {
       y: date.getFullYear(),
       m: date.getMonth() + 1,
       d: date.getDate(),
       h: date.getHours(),
       i: date.getMinutes(),
       s: date.getSeconds(),
       a: date.getDay()
   }
   var time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, function (result, key) {
       var value = formatObj[key]
       if (key === 'a') return ['日','一', '二', '三', '四', '五', '六'][value]
       if (result.length > 0 && value < 10) {
           value = '0' + value
       }
       return value || 0
   })
   return time_str
},

2、调用日期函数（vue）

data: function () {
   return {
        data: ztx.dateTime('{y}-{m}-{d}'), // 日期
        time: ztx.dateTime('{h}:{i}:{s}'), // 时间
        day: ztx.dateTime('{a}'), // 星期
        name: '', // 标题
        title: '',
        isactive: false
    }
},
 created () {
    interval = setInterval(() =>{
        this.data = ztx.dateTime('{y}-{m}-{d}');
        this.time = ztx.dateTime('{h}:{i}:{s}')
        this.day = ztx.dateTime('{a}')
    }, 1000)
},
 beforeDestroy () {
    clearInterval(interval);
}

3、react中时间展示

constructor(props) {
    super(props);
    this.state = {
        date:this.getLocalTime('{y}-{m}-{d}'),//日期
        time:this.getLocalTime('{h}:{i}:{s}'),//时间
        day:this.getLocalTime('{a}'),//星期            
    }
}
 componentDidMount() {
    this.interval = setInterval(() =>{
        this.setState({
            date:this.getLocalTime('{y}-{m}-{d}'),
            time:this.getLocalTime('{h}:{i}:{s}'),
            day:this.getLocalTime('{a}'),
        })
    }, 1000)
}
componentWillUnmount() {
   window.clearInterval(this.interval)
}
//获取本地时间、星期
getLocalTime(cFormat, time){
    time = time || new Date()
    var format = cFormat || '{y}-{m}-{d} {h}:{i}'
    var date
    if (typeof time === 'object') {
        date = time
    } else {
        if (('' + time).length === 10) time = parseInt(time) * 1000
        date = new Date(time)
    }
    var formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
    }
    var time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, function (result, key) {
        var value = formatObj[key]
        if (key === 'a') return ['日','一', '二', '三', '四', '五', '六'][value]
        if (result.length > 0 && value < 10) {
            value = '0' + value
        }
        return value || 0
    })
    return time_str
}
render() {
        return (
            <div className={HeaderComClass.mainWrap}>                
                <div className="head">
                    <div className="yjgb-head-time">
                        <div className="yjgb-head-time-left">{this.state.time}</div>
                        <div className="yjgb-head-time-right">
                            <div>星期{this.state.day} </div>
                            <div>{this.state.date}</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}