这里因项目的原因,我把时间都分隔开来了,可以自己组合在一块!废话不多说,直接上代码。
/**
* 日期模块——格式化日期
*/
/**
* 获取时间
* @param time
* @returns
*/
export function formateDate(time) {
if(!time) return ''
let date = new Date(time)
return (date.getHours() < 10 ? '0' + date.getHours() : date.getHours())
+ ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
+ ':' + (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds())
}
/**
* 获取年月日
* @param time
* @returns
*/
export function formateDateYue(time) {
if(!time) return ''
let date = new Date(time)
return date.getFullYear() + '.' +
((date.getMonth()+1) < 10 ? '0' +(date.getMonth()+1) : (date.getMonth()+1))
+ '.' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
}
/**
* 获取周几
*/
export function formateDateWeek(time) {
let now = new Date();
let day = now.getDay();
let weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
let week = weeks[day];
return week;
}
封装好了,那怎么用呢?
注意这里我是react框架写的
// 引入时间模块
import { formateDate, formateDateYue, formateDateWeek } from '../../utils/getTime'
state = {
currentTime: formateDate(Date.now()), // 当前时间字符串
currentYue: formateDateYue(Date.now()),
currentWeek: formateDateWeek(Date.now()),
}
//获取当前时间
getTime() {
this.timer = setInterval(() => {
const currentTime = formateDate(Date.now())
const currentYue = formateDateYue(Date.now())
const currentWeek = formateDateWeek(Date.now())
this.setState({ currentTime, currentYue, currentWeek })
}, 1000)
}
//挂载
componentDidMount() {
this.getTime()
}
//卸载
componentWillUnmount() {
clearInterval(this.timer);
}
<div className='left-top'>
<div className='left-top-box'>
<div className='left-top-box-weather'>
<div>{this.state.weather}</div>
</div>
<div className='left-top-box-yue'>
<div>{this.state.currentYue}</div>
<div className='left-top-box-yue-box'>
<div>{this.state.temperature}°</div>
<div>{this.state.currentWeek}</div>
</div>
</div>
</div>
<div className='left-top-time'>{this.state.currentTime}</div>
</div>