直接贴效果图
时间小组件,定时器 + momentjs
import React, { useState, useEffect } from 'react';
import moment from 'moment';
import './index.less';
const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const WidgetTime = () => {
const [renderKey, setRenderKey] = useState(1);
useEffect(() => {
const timer = setInterval(() => {
setRenderKey(Math.random());
}, 1000);
// 组件卸载清除定时器
return () => clearInterval(timer);
}, []);
return (
// 获取当前时间 年-月-日 时:分:秒 moment().format('YYYY-MM-DD HH:mm:ss')
// 获取星期几,其中星期日为0、星期六为6 moment().day()
<div className="time-component">
<div className="time">{moment().format('HH:mm:ss')}</div>
<div className="date">
{moment().format('YYYY-MM-DD')} {weeks[moment().day()]}
</div>
</div>
);
};
export default WidgetTime;
结束,拜拜。