import React, { Component } from 'react';
import dayjs from "dayjs";
import duration from 'dayjs/plugin/duration';
import './App.css';
dayjs.extend(duration);
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
timerState: 0
}
}
componentDidMount = () => {
let timer = 5000; // 5000是后端接受的数据
const begin = setInterval(() => {
timer = timer - 1000;
this.setState({
timer
}, () => {
if (this.state.timer <= 0) { clearInterval(begin) }
})
}, 1000)
}
render() {
const { timer } = this.state;
return (
<div className='wrap'>
{timer > 0 && <div>
<span>{dayjs.duration(timer).format("HH")}</span>
:
<span>{dayjs.duration(timer).format("mm")}</span>
:
<span>{dayjs.duration(timer).format("ss")}</span>
</div>}
</div>
)
}
}
dayjs指定剩余时间的倒计时
最新推荐文章于 2024-01-25 14:32:49 发布