vue2 时间倒计时

由于项目需要开发一个倒计时的功能，后台传送了一个结束时间的字段。
因此，这里封装了一个组件：

<template><p class="p2" :endTime="endTime" :callback="callback" :endText="endText"><i>{{hours}}</i>:<i>{{minutes}}</i>:<i>{{seconds}}</i>.<i>{{milliseconds}}</i></p>
</template>
<script>export default {data(){return {hours:0,minutes:0,seconds:0,milliseconds:0,pageTimer:{}}},props:{endTime:{type: String,default :'0'},endText:{type : String,default:'已结束'},callback : {type : Function,default :''}},mounted () {this.countdowm(this.endTime);},watch:{endTime(curVal,oldVal){if(this.pageTimer){   //清除所有的定时器，防止传过来的值变化出现闪烁的问题for(let each in this.pageTimer){clearInterval(this.pageTimer[each]);}}this.countdowm(curVal,oldVal);}},methods: {countdowm(timestamp,oldtime){let self = this;this.pageTimer["timer1"] = setInterval(function(){let nowTime = new Date();let endTime = new Date(timestamp * 1000);let t = endTime.getTime() - nowTime.getTime();if(t>0){let hour=Math.floor(t/3600000);let min=Math.floor((t/60000)%60);let sec=Math.floor((t/1000)%60);hour = hour < 10 ? "0" + hour : hour;min = min < 10 ? "0" + min : min;sec = sec < 10 ? "0" + sec : sec;self.hours = hour;self.minutes = min;self.seconds = sec;let millSeconds = 9;self.pageTimer["timer2"] = setInterval(function () {self.milliseconds = millSeconds;millSeconds--;if (millSeconds < 0) {millSeconds = 9}}, 100);}else{clearInterval(self.pageTimer["timer1"]);self.hours = 0;self.minutes = 0;self.seconds = 0;self.milliseconds = 0;self._callback();}},1000);},_callback(){if(this.callback && this.callback instanceof Function){this.callback(...this);}}}}
</script>

组件调用：

<count-down v-if="end_date" :endTime="1536981712" :callback="callback" endText="已经结束了"/>import countDown from '../../components/time.vue'

这样就完成了，效果图如下

vue2 时间倒计时相关推荐

倒计时或按任意键返回首页_超实用excel小技巧之时间倒计时及动态显示
一寸光阴一寸金,寸金难买寸光阴.浪费时间就等于浪费生命,所以时间的重要性不言而喻.我们经常会为一些重要的日子倒计时,准备着重要时刻的来临,例如考试,纪念日等. 我在这里设置现在到国庆节日的时间倒计时, ...
js实现倒计时，定时器--完成时间倒计时
js实现倒计时,定时器–完成时间倒计时 //每秒刷新一次 setInterval(function showtime() {//结束时间var endTime = document.getElemen ...
js实现指定时间倒计时时间效果
指定时间倒计时 div页 <div id="a">离2020还剩下<span></span><span></span>& ...
html5在线天数计时器,HTML倒计时效果：天、时、分、秒 | 固定时间倒计时
需求分析: 希望制作一个固定时间倒计时效果,比如某某活动在4小时之后结束,点开网页,触发倒计时事件,开始4小时倒计时.考虑使用setInterval定时器,在时间为0后,clearInterval清除 ...
QT QTimer定时器显示系统时间倒计时功能
QT定时器显示系统时间倒计时功能 lcdNumber控件显示 QTimer::singleShot(10000,this,&MainWindow6_6::close);//10秒后窗口自动关闭 ...
Android 时间倒计时
Android时间倒计时在网上一搜就一堆,而且也经常用到.备份一下,以便下次直接使用 1.首先我创建一个接口,为什么要创建一个接口呢?因为我是建立了一个类继承CountDownTimer.这样做的意义 ...
iapp进度条倒计时_人生进度条app(人生时间倒计时)V1.1 安卓版
人生进度条app(人生时间倒计时)是一个非常有趣的时间规划软件.可以提前知道您的生命时间.本软件可以根据您的年龄计算您的生命时间,主要含义是希望每个人都珍惜每一天的生活! 软件介绍人生进度条app是 ...
STC89C52 51单片机实现闹钟功能 #目前的时间倒计时 #选择位置闪烁 #计时 #清屏 #停止计时 #选择位置加减数字 #存储目前的数据 #读出目前的数据 #输入特定时间
前言下面是按键实现功能的解释本次内容主要是实现一般闹钟的基本功能, #目前的时间倒计时 #选择位置闪烁 #计时 #清屏 #停止计时 #选择位置加减数字 #存储目前的数据 #读出目前的数据 #输入特 ...
html怎么实现时间倒计时,Javascript实现时间倒计时功能
本文实例为大家分享了js实现时间倒计时的具体代码,供大家参考,具体内容如下这里使用的是Date日期类日期类倒计时 window.οnlοad=function(){ var odiv=docume ...

vue2 时间倒计时

vue2 时间倒计时相关推荐

最新文章

热门文章