vue中显示实时时间

vue项目中显示实时时间

<template>
  <div>
    {{nowTime}}
  </div>
</template>

<script>
export default {
  name: 'ShowTime',
  components: {},
  props: {},
  data () {
    return {
      nowTime:''
    };
  },
  methods: {
    //显示当前时间（年月日时分秒）
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
      let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
      let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
      let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
      let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
      this.nowTime = year + "年" + month + "月" + date + "日" + " " + hh + ":" + mm + ':' + ss ;
    },
    nowTimes(){
      this.timeFormate(new Date());
      setInterval(this.nowTimes,1000);
      this.clear()
    },
    clear(){
      clearInterval(this.nowTimes)
      this.nowTimes = null;
    }
  },
}
</script>

<style  lang="scss" scoped>

</style>

引用在vue项目中显示实时时间（年月日时分秒）

vue中销毁定时器的两种写法

推荐第一种写法：

第二种在销毁钩子函数中：

  countDown(time){
            // 将传递过来的时间戳差值转化为时分形式
            let ts = time
            let days = parseInt(ts / (1000 * 60 * 60 * 24));
            let hours = parseInt((ts % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let minutes = parseInt((ts % (1000 * 60 * 60)) / (1000 * 60));
            let seconds = (ts % (1000 * 60)) / 1000;
            let str = `${seconds}秒`;
            if(seconds < 10){
                seconds = '0' + str
            }
            if(minutes > 0){
                str = `${minutes}分钟${seconds}秒`
            }else{
                str = `00分钟${seconds}秒`
            }
            if(hours > 0){
                str = `${hours}时${minutes}分钟${seconds}秒`
            }
            if(days > 0){
                str = `${days}天${hours}时${minutes}分钟${seconds}秒`
            }
            this.timeStr = str
            console.log(this.timeStr)
            return this.timeStr
        },
        // 倒计时
        timer() {
            // createTime
            // orderLatePayTime
            // let times = Date.parse(new Date()) //当前时间，本来应该由后台传回服务器时间，但是后台没有传，暂时已浏览器本机时间来计算
            // console.log(times)
            // let orderTimes = 1606617582000
            // let expires = 10*60*1000 //有效时长，默认是10分钟，本来应该由后台给出，但是后台没给，暂时写死
            // let endTime = orderTimes + expires
            
            let orderLatePayTime = new Date(this.orderDetailData.orderLatePayTime) //date日期类型 后端给的数据格式："2020-12-12 11:23:32" 
            let orderLatePayTime_ms = orderLatePayTime.getTime();   //毫秒时间戳
            let currentTimes = Date.parse(new Date())  //获取当前时间
            let timediff = orderLatePayTime_ms - currentTimes
            if(orderLatePayTime_ms == currentTimes || timediff < 0){
                clearInterval(this.orderTimer)
                console.log(1)
                // 修改页面状态
                this.waitPay = false
                // 取消订单
                this.changeStatue('5')
                // 倒计时之后发送请求 修改页面数据
                this.getOrderDetailData(this.orderDetailData.orderId)
                return 
            } else {
                this.orderTimer = setTimeout(this.timer, 1000);
                this.countDown(orderLatePayTime_ms - currentTimes)
                // 第一种写法：
                this.$once('hook:beforeDestroy',()=>{
                    clearInterval(this.orderTimer);
                    this.orderTimer = null;
                })
            }
        },
        
  // 销毁定时器 第二种写法：
    beforeDestroy() {
        clearInterval(this.orderTimer)  //关闭定时器
        this.orderTimer = null
        // 调整手机上的状态栏颜色  
        // this.getBarColor('#FFFFFF')
    },