vue 倒计时 天:时:分:秒


```javascript
<template>
  <div class="position_list">
    <p>距离2020年除夕夜还剩{{time.D}}天{{time.h}}时{{time.m}}分{{time.s}}秒</p>
  </div>
</template>
<script>
export default {
  name: "position_list",
  data() {
    return {
      time: {
        D: "",
        h: "",
        s: "",
        m: ""
      },
      isEnd: false,
      endTime: "2020-01-24 00:00:00"
    };
  },
  created() {
    let that = this;
    that.setEndTime();
  },
  methods: {
    setEndTime() {
      let that = this;
      let interval = setInterval(function timestampToTime() {
        var date = new Date(that.endTime) - new Date(); //计算剩余的毫秒数
        if (date < 0) {
          that.isEnd = true;
          that.time = {
            D: "00",
            h: "00",
            s: "00",
            m: "00"
          };
          clearInterval(interval);
        } else {
          that.time.D = parseInt(date / 1000 / 60 / 60 / 24, 10); //计算剩余的天
          if (that.time.D < 10) {
            that.time.D = "0" + that.time.D;
          }
          that.time.h = parseInt((date / 1000 / 60 / 60) % 24, 10); //计算剩余的小时
          if (that.time.h < 10) {
            that.time.h = "0" + that.time.h;
          }
          that.time.m = parseInt((date / 1000 / 60) % 60, 10); //计算剩余的分钟
          if (that.time.m < 10) {
            that.time.m = "0" + that.time.m;
          }
          that.time.s = parseInt((date / 1000) % 60, 10); //计算剩余的秒数
          if (that.time.s < 10) {
            that.time.s = "0" + that.time.s;
          }
          return that.time.D + that.time.h + that.time.m + that.time.s;
        }
      }, 1000);
    }
  }
};
</script>
<style lang="less" scoped>
.position_list {
  width: 100%;
  height: 100%;
}
</style>

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值