【vue2】分秒毫秒倒计时

最新推荐文章于 2024-03-18 14:59:51 发布

小程想努力变瘦

最新推荐文章于 2024-03-18 14:59:51 发布

阅读量321

点赞数

文章标签： javascript 前端开发语言 vue.js

本文链接：https://blog.csdn.net/userFriends/article/details/132626667

版权

（一）、父组件

<template>
	<doeloadTime ></doeloadTime>
</template>

<script>
import doeloadTime from xxx
 export default {
	 components: {
	      doeloadTime
	  }
  }
</script>

（二）、子组件：

<template>
  <span>
    <span class="flex timebgBox">
      <span class="timebgBox-item">{{timeCutObj.m}}</span>
      <span class="u-m-l-2 u-m-r-2">:</span>
      <span class="timebgBox-item">{{timeCutObj.s}}</span>
      <span class="u-m-l-2 u-m-r-2">:</span>
      <span class="timebgBox-item">{{timeCutObj.hs||'00'}}</span>
    </span>

  </span>
</template>

<script>
  var timer = null
  export default {
    // props:{
    // 	dataObj3:{
    // 		type:Object
    // 	}
    // },
    data() {
      return {
        timeCutObj: {},
        today: ''
      };
    },
    created() {

      this.today = this.timestampToTime(new Date().getTime())

      this.countDown(this.today, 5)
    },

    methods: {
      /**
       * 把时间戳转换为：时分秒
       *
       * @param timeData ：倒计时传入时间  // let endTimeList = "2021-10-28 10:10:21";
       * @param timeCut ： 订单创建时间+30分钟的时间  分钟
       */

      countDown(timeData, timeCut) {
        let newTime = new Date().getTime(); //当前时间戳
        let endTimeList = timeData; //倒计时传入时间
        // let endTimeList = "2021-10-28 10:10:21";
        let endTime = null;
        if (endTimeList) {
          // endTime = new Date(endTimeList.replace(/-/g, '/')).getTime()+1800000; //订单创建时间+30分钟的时间戳
          endTime = Number(new Date(endTimeList.replace(/-/g, '/')).getTime()) + Number(timeCut * 60 *
          1000); //订单创建时间+30分钟的时间戳
        }

        // console.log('倒计时开启了',endTime - newTime)
        let obj = null;
        if (endTime - newTime > 0) {
          let time = (endTime - newTime) / 1000;
          let day = parseInt(time / 3600 / 24);
          let hou = parseInt(time % (60 * 60 * 24) / 3600);
          let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
          let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
          let hs = parseInt(time * 1000 % 60);
          obj = {
            d: this.timeFormat(day),
            h: this.timeFormat(hou),
            m: this.timeFormat(min),
            s: this.timeFormat(sec),
            hs: this.timeFormat(hs),

          }
          // var timer = setTimeout(that.coutDown, 1000);
          this.timeCutObj = obj;
          timer = setTimeout(() => {
            this.countDown(timeData, timeCut)
          }, 100);
          // callback && callback(obj);
        } else {
          this.timeCutObj = {
            d: '00',
            h: '00',
            m: '00',
            s: '00',
            hs:'00'
          }
          // callback2 && callback2(obj);
        }
        // console.log('时间组件',this.timeCutObj)
      },
      //倒计时
      timeFormat(param) { //小于10的格式化函数
        return param < 10 ? '0' + param : param;
      },
      //  时间戳转年月日时分秒
      timestampToTime(cjsj) {
        //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var date = new Date(cjsj);
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
        var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return Y + M + D + h + m + s;
        // return Y + M + D;
      }

    }
  };
</script>

<style lang="scss" scoped>
  .timebgBox {
    &-item {
      background-color: #fff;
      color: #0d6a00;
      border-radius: 4px;
      display: inline-block;
      padding: 0px 4px;
      // height: 20px;
      line-height: 20px;
    }
  }
</style>