js实现倒计时

wxml文件

<view class="countdown" style="padding:{{data.content.padding}}px 0;">
	<view class="custom-countdown" style="background-color:{{data.content.bg_type == 1?data.content.bg_color:''}};background-image:url({{data.content.bg_type != 1?data.content.bg_image:none}});">
		<view class="countdown-box" class="{{data.content.css_type == 1 ?'countdown-style-1':'countdown-style-2'}}" style="color:{{data.content.font_color}};">
			<span class="text" wx:if="{{isEnd}}">已结束</span>
			<sapn class="text">{{text}}</sapn>
				<sapn class="num" wx:if="{{data.content.data_count}}">{{timelist[0]}}</sapn>
				<sapn class="text" wx:if="{{data.content.data_count}}">天</sapn>
				<sapn class="num">{{timelist[1]}}</sapn>
				<sapn class="text">时</sapn>
				<sapn class="num">{{timelist[2]}}</sapn>
				<sapn class="text">分</sapn>
				<sapn class="num">{{timelist[3]}}</sapn>
				<sapn class="text">秒</sapn>
		</view>
	</view>
</view>

js文件

/**
   * 组件的属性列表
   */
  properties: {
    data: {
      type: Object,
      value: {}
    }
  },

data数据

data: {
    start: '', // 开始时间
    end: '', // 结束时间
    timelist: [], // 存储时间的数组
    time: '', // 存储时间的数组
    isEnd: false, // 是否结束
    text: '', // 距开始，距结束
    data_count: true // 是否按天计算
  }

attached: function () {
    this.setData({
      start: this.data.data.content.start_time, //获取倒计时开始时间
      end: this.data.data.content.end_time, //获取倒计时结束时间
      data_count: this.data.data.content.data_count //是否按天算
    })
  },
  // 进入组件启动计时器
  created: function () {
    this.setTime()
  },
  /**
   * 组件的方法列表
   */
  methods: {
    updateEndTime: function () {

      // 开始时间
      var start_ = new Date(this.data.start).getTime()
      // 结束时间
      var end_ = new Date(this.data.end).getTime()
      // 当前时间
      var date = new Date().getTime()
      var lag = ''
      var html = '距结束'

      if (start_ > date) {
        end_ = start_ // 如果开始时间大于当前时间，结束时间等于当前时间
        html = '距开始'
      }
      lag = end_ - date //计算时间差
      if (lag > 0) {
        // this.data.data_count为true按天倒计时，否则按小时计算
        var second = Math.floor(lag / (1000 * 60 * 60 * 24)); //计算天数
        var minite = this.data.data_count ? Math.floor(lag / (1000 * 60 * 60) % 24) : Math.floor(lag / (60 * 60 * 1000)); //计算小时数
        var hour = this.data.data_count ? Math.floor(lag / (1000 * 60) % 60) : Math.floor((lag - minite * 60 * 60 * 1000) / (60 * 1000)); //计算分钟数
        var day = this.data.data_count ? Math.floor(lag / 1000 % 60) : Math.floor((lag - minite * 60 * 60 * 1000 - hour * 60 * 1000) / 1000); //计算秒
        // 计算是否补0
        second = second < 10 ? "0" + second : second
        minite = minite < 10 ? "0" + minite : minite
        hour = hour < 10 ? "0" + hour : hour
        day = day < 10 ? "0" + day : day
        this.setData({
          text: html
        })
      } else {
        this.setData({
          isEnd: true
        })
      }
      return [second, minite, hour, day]
    },
    // 开启倒计时
    setTime: function () {
      var _this = this
      _this.data.time = setInterval(() => {
        _this.setData({
          timelist: _this.updateEndTime()
        })
        // 清空计时器
        if (_this.data.timelist[0] == "00" && _this.data.timelist[1] == "00" && _this.data.timelist[2] == "00" && _this.data.timelist[3] == "00") {
          clearInterval(_this.data.time)
        }
      }, 1000);
    }
  }