react倒计时组件

import React, { Component } from 'react';

/** ---倒计时组件---
    父组件传入剩余秒数：duration
*/
export default class CountDown extends Component {
  constructor(props) {
    super(props)
    let hour  = Math.floor(props.duration/3600)
    let minute = Math.floor((props.duration - hour * 3600) / 60)
    let second = (props.duration - hour * 3600 - minute * 60)
    this.state = {
      hour: hour < 10 ? '0' + hour : hour,
      minute: minute < 10 ? '0' + minute : minute,
      second: second < 10 ? '0' + second : second
    };
  }

  componentDidMount() {
    if (this.props.duration) {
      let date = new Date();
      let endTime = date.setSeconds(date.getSeconds() + Number(this.props.duration));
      this.countFun(endTime);
    }
  }

  //组件卸载取消倒计时
  componentWillUnmount() {
    clearInterval(this.timer);
  }

  countFun = (endTime) => {
    let time = endTime - new Date().getTime();
    this.timer = setInterval(() => {
      // 防止倒计时出现负数
      if (time > 1000) {
        time -= 1000;
        let hour = Math.floor((time / 1000 / 3600) % 24);
        let minute = Math.floor((time / 1000 / 60) % 60);
        let second = Math.floor((time / 1000) % 60);
        this.setState({
          hour: hour < 10 ? '0' + hour : hour,
          minute: minute < 10 ? '0' + minute : minute,
          second: second < 10 ? '0' + second : second,
        });
      } else clearInterval(this.timer);
      // 距离结束还有5分钟时，调用提示
      if(time == 300000) this.props.remind()
    }, 1000);
  };

  render() {
    return (
      <>
        {this.state.hour}:{this.state.minute}:{this.state.second}
      </>
    );
  }
}

调用

<CountDown duration={3600} remind={this.remind}/>

显示

最后

以上就是饱满哈密瓜为你收集整理的react倒计时组件的全部内容，希望文章能够帮你解决react倒计时组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。