timeDown.vue

<template>
  <!-- 倒计时组件 -->
  <div class="days">
    <template v-if="days-0>0">
      <span class="item">{{days}}</span>
      <span class="label">天</span>
    </template>
    <template v-if="hours-0>0">
      <span class="item">{{hours}}</span>
      <span class="label">时</span>
    </template>
    <span class="item">{{minute}}</span>
    <span class="label">分</span>
  </div>
</template>

<script type="text/ecmascript-6">
let d = null;
// 倒计时方法
if (typeof xcsoft == "undefined") var xcsoft = new function() {}();
xcsoft.countdown = function(a, b, c) {
  d = new Object();
  var e = 0;
  if (typeof a == "object") {
    var f = parseInt(new Date().getTime() / 1000);
    var g = a.startTime ? parseInt(a.startTime) : 0;
    g = g == 0 ? f : g;
    var h = a.endTime;
    var x = g - f;
    d.decimal = parseInt(a.msec ? a.msec : 0);
  } else {
    var f = 0;
    var x = 0;
    d.decimal = 0;
    var h = a;
    var i = h.toString();
    if (i.indexOf(".") > 0) {
      d.decimal = i.split(".")[1];
      if (d.decimal > 3) {
        d.decimal = 3;
      }
    }
  }
  d.time = h;
  d.finish = false;
  if (isNaN(h)) {
    var j = h.substring(0, 19);
    j = j.replace(/-/g, "/");
    d.time = new Date(j).getTime() / 1000;
  }
  var k = d.decimal == 0 ? 100 : 100;
  d.day = 0;
  d.hour = 0;
  d.minute = 0;
  d.second = 0;
  d.t = setInterval(function() {
    e = new Date().getTime();
    f = parseInt(e / 1000 + x);
    var l = d.time - f;
    if (l <= 0) {
      e = 0;
      l = 0;
    }
    if (l >= 0) {
      d = xcsoft.getTimeObject(d, l);
    }
    if (d.decimal == 1) {
      d.msecZero = d.msec = parseInt(10 - (e % 1000) / 100);
      if (d.msec == 10 || l == 0) {
        d.msecZero = d.msec = 0;
      }
    } else if (d.decimal == 2) {
      d.msecZero = d.msec = parseInt(100 - (e % 1000) / 10);
      if (d.msec < 10) {
        d.msecZero = "0" + d.msec;
      } else if (d.msec == 100 || l == 0) {
        d.msec = 0;
        d.msecZero = "0" + d.msec;
      }
    } else {
      d.msecZero = d.msec = parseInt(1000 - e % 1000);
      if (d.msec < 10) {
        d.msecZero = "00" + d.msec;
      } else if (d.msec < 100) {
        d.msecZero = "0" + d.msec;
      } else if (d.msec == 1000 || l == 0) {
        d.msec = 0;
        d.msecZero = "00" + d.msec;
      }
    }
    if (b) {
      b(d);
    }
    if (l <= 0 || d.stop == true) {
      clearInterval(d.t);
      d.finish = true;
      if (c) c(d);
    }
  }, k);
};
xcsoft.getTimeObject = function(a, l) {
  var b = 60;
  var c = b * b;
  var d = 24 * c;
  a.days = Math.floor(l / d);
  a.year = Math.floor(a.days / 365);
  a.day = Math.floor(a.days % 365);
  a.hour = Math.floor((l % d) / c);
  a.minute = Math.floor((l - (a.days * d + a.hour * c)) / b);
  a.second = Math.floor(l % b);
  a.dayZero = a.day < 10 ? "0" + a.day : a.day;
  a.daysZero = a.days < 10 ? "0" + a.days : a.days;
  a.hourZero = a.hour < 10 ? "0" + a.hour : a.hour;
  a.minuteZero = a.minute < 10 ? "0" + a.minute : a.minute;
  a.secondZero = a.second < 10 ? "0" + a.second : a.second;
  return a;
};
export default {
  props: ["startTime"],
  name: "",
  data() {
    return {
      days: 0,
      hours: 0,
      minute: 0,
      second: 0
    };
  },
  onLoad() {
    let _this = this;
    console.log(this.startTime, "--------129");
    xcsoft.countdown(
      this.startTime,
      function(time) {
        // console.log(time.day,time.hourZero, time.minuteZero, time.secondZero,'--------39')
        _this.days = time.dayZero;
        _this.hours = time.hourZero;
        _this.minute = time.minuteZero;
        _this.second = time.secondZero;
      },
      function(time) {
        //倒计时结束后的操作
      }
    );
  },
  onUnload() {
    // 清除未开播倒计时
    d.stop = true;
  },
  components: {},
  computed: {},
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.days{
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  span{
    padding: 0 2px;
  }
}
</style>