耀极客论坛

 找回密码
 立即注册
查看: 501|回复: 0

利用momentJs做一个倒计时组件(实例代码)

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 01:01:16 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了利用momentJs做一个倒计时组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  今天抽空给大家介绍下vue和moment做的一个倒计时,具体内容如下所示:
  展示样式:
  1. ‹template>
  2.     ‹div class="table-right flex-a-center">
  3.         ‹div class="time-text">
  4.             ‹span class="timeTextSpan" v-for="item,index of h" >{{item}}‹/span>
  5.             ‹span class="timeTextSpan1" >: ‹/span>
  6.             ‹span class="timeTextSpan" v-for="item,index of m" >{{item}}‹/span>
  7.             ‹span class="timeTextSpan1" >: ‹/span>
  8.             ‹span class="timeTextSpan" v-for="item,index of s" >{{item}}‹/span>
  9.         ‹/div>
  10.     ‹/div>
  11. ‹/template>
复制代码
  1. ‹script>
  2. import moment from 'moment'
  3. export default {
  4.   props: {
  5.     endTime: { }, //接收得最后时间 2021-12-17 16:29:20
  6.   },
  7.   data() {
  8.     //这里存放数据
  9.     return {
  10.       h:'00',
  11.       m:'00',
  12.       s:'00',
  13.       timer:null
  14.     };
  15.   },
  16.   watch: {
  17.     endTime: {
  18.       handler(e) {
  19.         if (e) {
  20.           let self = this
  21.           clearInterval(this.timer)
  22.           this.timer = setInterval(function(){self.init()},1000)
  23.         }
  24.       },
  25.       deep: true,
  26.       immediate: true
  27.     }
  28.   },
  29.   mounted() {
  30.     let self = this
  31.     self.init()
  32.     clearInterval(this.timer)
  33.     this.timer = setInterval(function(){self.init()},1000)
  34.   },
  35.   //方法集合
  36.   methods: {
  37.     init(){
  38.         let time =moment(this.endTime).diff(moment())
  39.         if(time ‹= 0){
  40.           clearInterval(this.timer)
  41.           this.onOver()
  42.           return
  43.         }
  44.         let t = time / 1000;
  45.         let d = Math.floor(t / (24 * 3600));  //剩余天数,如果需要可以自行补上
  46.         let h = Math.floor((t - 24 * 3600 * d) / 3600) + d*24;  //不需要天数,把天数转换成小时
  47.         let _h = Math.floor((t - 24 * 3600 * d) / 3600)  //保留天数后得小时
  48.         let m = Math.floor((t - 24 * 3600 * d - _h * 3600) / 60);
  49.         let s = Math.floor((t - 24 * 3600 * d - _h * 3600 - m * 60));
  50.       
  51.         this.h = String(h).length == 1? '0'+String(h):String(h)
  52.         this.m = String(m).length == 1? '0'+String(m):String(m)
  53.         this.s = String(s).length == 1? '0'+String(s):String(s)
  54.     },
  55.     onOver() {
  56.       this.$emit('over') //倒计时结束得回调
  57.     }
  58.   },
  59.   beforeDestroy(){
  60.     this.timer = null
  61.     clearInterval(this.timer)
  62.   }
  63. }
  64. ‹/script>
  65. ‹style lang='less' scoped>
  66. @import url("@/assets/css/supplier.less");
  67.   .table-right {
  68.     font-size: 12px;
  69.     color: #757e8a;
  70.     .timeTextSpan{
  71.       display: inline-block;
  72.       width: 14px;
  73.       height: 22px;
  74.       text-align: center;
  75.       background: #F1F0F0;
  76.       border-radius: 2px;
  77.       margin-right: 2px;
  78.       font-size: 16px;
  79.       color: #ff8a2b;
  80.       font-weight: bold;
  81.     }
  82.     .timeTextSpan1{
  83.       display: inline-block;
  84.       width: 14px;
  85.       text-align: center;
  86.       vertical-align: bottom;
  87.       color:#202D40;
  88.       font-size: 16px;
  89.       font-weight: bold;
  90.     }
  91.    
  92.     .time-text {
  93.       margin-left: 10px;
  94.     }
  95.   }
  96. ‹/style>
复制代码
  到此这篇关于利用momentJs做一个倒计时组件的文章就介绍到这了,更多相关momentJs倒计时组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 04:01 , Processed in 0.065242 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表