h5和RN倒计时实现方法

工作中我们经常遇到需要倒计时的功能，那么具体如何实现呢，下面我把自己写过的几种方法提供给大家，希望大家能共同进步，转载要注明出处哦！

第一种写法：
html：

<div class="">
   <div class="">
     距结束剩余
     <b v-if="time.day>0">
       <span v-text="time.day"></span>天
     </b>
   </div>
   <div class="">
     <center>
       <span class="block" v-text="time.hour">00</span>
       <span class="icon">:</span>
       <span class="block" v-text="time.minute">00</span>
       <span class="icon">:</span>
       <span class="block" v-text="time.second">00</span>
     </center>
   </div>
 </div>

这里我用的回掉函数

let subtime = 后端反给的时间 - new Date().getTime(); //后端反给的结束时间-当前时间
// 倒计时 48小时 172800
  countDown(
    subtime,
    function(day, hour, minute, second) {
      this.time.day = day;
      this.time.hour = hour > 9 ? hour : "0" + hour;
      this.time.minute = minute > 9 ? minute : "0" + minute;
      this.time.second = second > 9 ? second : "0" + second;
    }.bind(this)
  );

/**
 *  function 倒计时
 *  参数：intDiff 时间
 *  单位：s 秒
 */
export function countDown(intDiff, fn) {
  let time = setInterval(function () {
    //计算出相差天数
    let day = Math.floor(intDiff / (24 * 3600 * 1000))
    //计算出小时数
    let leave1 = intDiff % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
    let hour = Math.floor(leave1 / (3600 * 1000))
    //计算相差分钟数
    let leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
    let minute = Math.floor(leave2 / (60 * 1000))
    //计算相差秒数
    let leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
    let second = Math.round(leave3 / 1000)
    // console.log(" 相差 "+day+"天 "+hour+"小时 "+minute+" 分钟"+second+" 秒")
    intDiff -= 1000;
    if (intDiff <= 0) {
      day = 0; hour = 0; minute = 0; second = 0;
      clearInterval(time);
    }
    fn(day, hour, minute, second);
  }, 1000);
}

第二种写法：同时有多个倒计时

html：

<span class="grey-time">
	剩余
   <span v-text="endTime[index]==''?'00:00:00':endTime[index]"></span>
 </span>

timeList.push({ time: ‘’ });  //剩余时间的数组
timeDown(
   timeList,
   function(dateTime) {
     this.endTime[i] = dateTime;
   }.bind(this)
 );

/**
 * function 多个倒计时
 * list 时间数组
 * fn 回调函数
 * time 2018-03-02
 */
export function timeDown(list, fn) {
  for (let i in list) {
    let intDiff = list[i].time;
    let time = setInterval(function () {
      //计算出相差天数
      let day = Math.floor(intDiff / (24 * 3600 * 1000))
      //计算出小时数
      let leave1 = intDiff % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
      let hour = Math.floor(leave1 / (3600 * 1000))
      //计算相差分钟数
      let leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
      let minute = Math.floor(leave2 / (60 * 1000))
      //计算相差秒数
      let leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
      let second = Math.round(leave3 / 1000)
      // console.log(" 相差 "+day+"天 "+hour+"小时 "+minute+" 分钟"+second+" 秒")
      intDiff -= 1000;
      if (intDiff <= 0) {
        day = 0; hour = 0; minute = 0; second = 0;
        clearInterval(time);
      }
      let dateTime;
      if (day) {
        dateTime = day + "天 " + (hour > 9 ? hour : "0" + hour) + ":" + (minute > 9 ? minute : "0" + minute) + ":" + (second > 9 ? second : "0" + second);
      } else {
        dateTime = (hour > 9 ? hour : "0" + hour) + ":" + (minute > 9 ? minute : "0" + minute) + ":" + (second > 9 ? second : "0" + second);
      }
      fn(dateTime);
    }, 1000);
  }
}

第三种方法：Taro，你可以按照RN来看，把包引用改成RN就行了

import { Component } from "@tarojs/taro";
import { View, Text } from "@tarojs/components";

import "./index.scss";

export default class Countdown extends Component {
  constructor(props) {
    super(props);

    this.state = {
      seconds: null
    };
  }

  static defaultProps = {
    data: {}
  };

  startCountDown(seconds = 0) {
    clearInterval(this.timer);
    this.timer = setInterval(() => {
      const _seconds = this.state.seconds ? this.state.seconds : seconds;
      if (_seconds === 0) {
        clearInterval(this.timer);
      } else {
        this.setState({
          seconds: _seconds - 1
        });
      }
    }, 1000);
  }

  transformTime(seconds, type) {
    const day = Math.floor(seconds / 3600 / 24);
    const hour = Math.floor((seconds - day * 24 * 3600) / 3600);
    const minute = Math.floor((seconds - day * 24 * 3600 - hour * 3600) / 60);
    const second = Math.floor(
      seconds - day * 24 * 3600 - hour * 3600 - minute * 60
    );
    if (type === "day") {
      return day;
    } else if (type === "hour") {
      return hour < 10 ? `0${hour}` : hour;
    } else if (type === "minute") {
      return minute < 10 ? `0${minute}` : minute;
    } else {
      return second < 10 ? `0${second}` : second;
    }
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    const { data } = this.props;
    const { seconds } = this.state;
    this.startCountDown(
      data.endTime ? (data.endTime - new Date().getTime()) / 1000 : 0
    );
    return (
      <View className="desc-card">
        <View className="">
          <View className="txt">
            <Text>距拼团结束剩余</Text>
            <Text>{this.transformTime(seconds, "day")}天</Text>
          </View>
          <View className="time-wrap">
            <View className="item">{this.transformTime(seconds, "hour")}</View>
            <View className="colon">:</View>
            <View className="item">
              {this.transformTime(seconds, "minute")}
            </View>
            <View className="colon">:</View>
            <View className="item">
              {this.transformTime(seconds, "second")}
            </View>
          </View>
        </View>
      </View>
    );
  }
}