前端vue倒计时组件【模块化开发】

本文详细介绍了如何使用Vue.js编写一个活动倒计时组件,包括组件代码展示、页面使用方法以及实际展示效果。通过这个组件,开发者可以方便地在项目中实现动态倒计时功能,适用于各种活动或截止日期的提示。此外,文章还分享了前端开发的相关技巧和经验。
摘要由CSDN通过智能技术生成

剑阁峥嵘而崔嵬,一夫当关,万夫莫开 –‰


📌博主介绍

💒首页:水香木鱼

🛫专栏:后台管理系统

简介: 博主姓:,名:春波。花名 “水香木鱼”,星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”

🔰 格言: 生活是一面镜子。 你对它笑, 它就对你笑; 你对它哭, 它也对你哭。

🔋 小目标: 成为 会设计 、会开发的 “万能钥匙”

📝文章内容

一、组件代码

<!--活动倒计时组件-->
<style lang="less" scoped>
.CountDown{
  width: 280px;
  height: 20px;
  display: flex;
  border-top-left-radius: 10px;
  border: 1px solid red;


  .CountDown_p1{
    width: 120px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color:red;
    color: floralwhite;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 16px;
    font-weight: bold;
  }
  .CountDown_p2{
    width: 190px;
    height: 20px;
    line-height: 20px;
    color: red;
    font-size: 14px;
    margin-left: 14px;
  }
}
</style>
<template>
  <div class="CountDown">
    <p class="CountDown_p1">活动倒计时:</p>
    <p class="CountDown_p2">{{time}}</p>
  </div>
</template>
<script>
export default{
  data () {
    return {
      time : '',
      flag : false
    }
  },
  mounted () {
    //setInterval 开启定时器
    let time = setInterval(() => {
      if (this.flag == true) {
        //clearInterval()方法能够取消setInterval()方法设置的定时器
        clearInterval(time);
      }
      this.countDown();
    }, 500);
  },
  props : {
    endTime : {
      type: String
    }
  },
  methods : {
    //倒计时函数
    countDown () {
      //剩余时间
      const endTime = new Date(this.endTime);
      //系统时间
      const nowTime = new Date();

      let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);

      let d = parseInt(leftTime / (24 * 60 * 60));//天数
      let h = this.formate(parseInt(leftTime / (60 * 60) % 24));//时间
      let m = this.formate(parseInt(leftTime / 60 % 60));//分钟
      let s = this.formate(parseInt(leftTime % 60));//秒

      if(leftTime <= 0){
        this.flag = true;
        this.$emit('time-end');
        this.time = '活动已结束';
      }else{
        // 需要修改时间样式的话 ,比如需要什么30分钟倒计时,就只保留分和秒
        this.time = `${d}${h} 小时 ${m}${s}`;
      }
    },

    formate(time) {
      if (time >= 10) {
        return time;
      } else {
        return `0${time}`;
      }
    }
  }
}
</script>

二、页面使用

<template>
  <div>
    <countdown :endTime='endTime'></countdown>
  </div>
</template>
<script>
import countdown from './components/CountDown'   //  引入倒计时组件
export  default {
  components:{
    countdown
  },
  data(){
    return{
      //剩余时间
      endTime : '2022-07-1 11:59:00'
    }
  }

}
</script>

三、展示效果

在这里插入图片描述

📢博主致谢

非常感谢小伙伴们阅读到结尾,本期的文章就分享到这里,总结了前端vue倒计时组件【模块化开发】,希望可以帮到大家,谢谢。
如果你觉得本篇文章有帮助到您,鼓励一下木鱼吧! 点击关注+点赞+收藏+评论+转发 】支持一下哟
🙏您的支持就是我更新的最大动力。⭐⭐⭐记得一键三连呦!⭕


💡往期精彩

🈯前端快速排序算法【JavaScript 与vue通用】

🈯前端冒泡排序算法【javaScript与vue通用】

🈯vue快速实现锚点功能【简单版与高级版】

🈯前端vue实现高级检索小案例

🈯UI设计指南之可视化大屏【快速理解版】

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码 ui设计师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值