vue组件 - 实现时间倒计时效果（多数据、多个倒计时处理）

待我称王封你为后i 2023-01-02 08:25 1043阅读 0赞

# Ⅰ- 壹 - 效果展示 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70]

# Ⅱ - 贰 - 代码文件 #

## 一 创建文件showTime.js ##

用于处理 时间

// 倒计时
    var day = 0
    var hour = '00'
    var min = '00'
    var second = '00'
    function countTime (timeSrt) { 
       
        // 获取当前时间
        let date = new Date()
        let now = date.getTime()
        // 设置截止时间
        let endDate = new Date(timeSrt) // 需要倒计时的日期
        let end = endDate.getTime()
        // 时间差
        let leftTime = end - now
        // 定义变量 d,h,m,s保存倒计时的时间
    
        if (leftTime >= 0) { 
          // 天
          day = Math.floor(leftTime / 1000 / 60 / 60 / 24)
          // 时
          let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
          hour = h < 10 ? '0' + h : h
          // 分
          let m = Math.floor(leftTime / 1000 / 60 % 60)
          min = m < 10 ? '0' + m : m
          // 秒
          let s = Math.floor(leftTime / 1000 % 60)
          second = s < 10 ? '0' + s : s
          
        } else { 
          day = 0
          hour = '00'
          min = '00'
          second = '00'
        }
        // 等于0的时候不调用
        if (Number(hour) === 0 && Number(day) === 0 && Number(min) === 0 && Number(second) === 0) { 
          return
        } else { 
        // 递归每秒调用countTime方法，显示动态时间效果,
        
          setTimeout(countTime, 1000)
        
        }
    
        return {   day,
          hour,
          min,
          second}
      }
    
      export default function countTimeFun(ck,t){ 
        setInterval((t)=>{ 
          let x = countTime(t);  
          // console.log(x); 
          ck(x)
        },
        1000,
        t
        )
      }

## 二 创建timeCon.vue ##

我们的组件文件

<template>
      <div class="viewallItem_top_l_b_time">
        { {  dataTime.day }}天
        <span class="viewallItem_top_l_b_timesty">{ {  dataTime.hour }}</span>
        :
        <span class="viewallItem_top_l_b_timesty">{ {  dataTime.min }}</span>
        :
        <span class="viewallItem_top_l_b_timesty">{ {  dataTime.second }}</span>
      </div>
    </template>
    <script>
    import countTimeFun from "../js/showTime";
    export default { 
      props: { 
        itemTime: { 
          type: String,
        },
      },
      data() { 
        return { 
          dataTime: { },
        };
      },
    
      mounted() { 
        // console.log(this.itemTime);
        countTimeFun(this.TimeNum, this.itemTime);
      },
      methods: { 
        //时间计算
        TimeNum(val) { 
          this.dataTime = val;
          // console.log(val,"倒计时组件时间计算");
          return val;
        },
      },
    };
    </script>
    
    
    <style lang="scss" scoped>
    .viewallItem_top_l_b_time { 
      color: #bb0a30;
      font-size: 22rpx;
    }
    .viewallItem_top_l_b_timesty { 
      width: 30rpx;
      height: 32rpx;
      line-height: 32rpx;
      text-align: center;
      background: #bb0a30;
      border-radius: 4rpx;
      color: #ffffff;
      display: inline-block;
    }
    </style>

timeCon.vue中就是按照自己的需求来写的，这种写法应该很好理解

## 三 使用说明 ##

先在使用的文件（.vue） 先引入在声明 这不用解释了吧

import timeCon from "./components/timeCon.vue";
    components: {  timeCon },

这个组件就接受一个参数itemTime 是一个日期格式就可以，时间戳也行

<time-con :itemTime="2021-01-05 23:59:59"></time-con>

# Ⅲ - 叁 - 总结 #

## 献给需要的朋友 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70]: /images/20221120/77314acfb03e47a1a9f9b8b9e693ae98.png