React项目中的倒计时功能

React项目中的倒计时

	简单粗暴，照猫画虎, CV大法无所不能。

一、 html布局

				  <em>
                    <span>{this.state.day}天</span>
                    <span>{this.state.hour}时</span>
                    <span>{this.state.minute}分</span>
                    <span>{this.state.second}秒 </span>
                  </em>

二、 构造函数声明

constructor(props) {
    super(props)
    this.state = {
      day: 0,     //倒计时--天
      hour: 0,    //倒计时--时
      minute: 0,  //倒计时--分
      second: 0,   //倒计时--秒
    }
  }

三、 js倒计时封装赋值

  // 倒计时方法封装
  countFun = (end) => {
    let now_time = Date.parse(new Date());
    var remaining = end - now_time; // 转化成毫秒数
    this.timer = setInterval(() => {
      //防止出现负数
      if (remaining > 1000) {
        remaining -= 1000;
        let day = Math.floor((remaining / 1000 / 3600) / 24);
        let hour = Math.floor((remaining / 1000 / 3600) % 24);
        let minute = Math.floor((remaining / 1000 / 60) % 60);
        let second = Math.floor(remaining / 1000 % 60);

        this.setState({
          day: day,
          hour: hour < 10 ? "0" + hour : hour,
          minute: minute < 10 ? "0" + minute : minute,
          second: second < 10 ? "0" + second : second
        })
      } else {
        clearInterval(this.timer);
        //倒计时结束时触发父组件的方法
        //this.props.timeEnd();         
      }
    }, 1000);
  }

四、 方法调用

	this.countFun(end); // 倒计时
	## end 为截止时间

❤ ~ 别爱我没结果，除非CV快过我 ~ ❤