vue实现倒计时,vue组件里的倒计时定时器

　　这篇文章主要为大家详细介绍了某视频剪辑软件实现倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件实现倒计时功能的具体代码，供大家参考，具体内容如下

　　通过父组件传入的结束时间减去当前日期得到剩余时间

1.子组件部分

　　div class=itemend

　　p class= itemss 倒计时span{{day}}/span天span{{hour}}/span时span{{minute}}/span分span{{second}}/span秒/p

　　/div

　　代码：

　　data() {

　　返回{

　　日期： ,//天

　　小时： ,//时

　　分钟： ,//分

　　第二个： ,//秒

　　标志：假，

　　};

　　},

　　已安装(){

　　设time=setInterval(()={

　　if (this.flag==true) {

　　间隙(时间);

　　}

　　这个。time down()；

　　}, 500);

　　},

　　道具：{

　　结束时间：{

　　类型：字符串，

　　},

　　},

　　方法：{

　　timeDown() {

　　常量结束时间=新日期(这个。结束时间)；

　　const now time=new Date()；

　　设left time=parse int((结束时间。gettime()-现在是时候了。gettime())/1000)；

　　设d=parse int(左时间/(24 * 60 * 60))；

　　设h=这个。格式(parse int((left time/(60 * 60))% 24))；

　　设m=这个。格式(parse int((left time/60)% 60))；

　　让s=这个。格式(parse int(left time % 60))；

　　if (leftTime=0) {

　　this.flag=true

　　这个emit(" time-end ")；

　　}

　　这个。日=d；//天

　　这个。小时=h；//时

　　这个。分钟=m；//分

　　这个。秒=s；//秒

　　},

　　格式（时间){

　　如果（时间=10) {

　　返回时间；

　　}否则{

　　返回` 0 $ { time } `；

　　}

　　},

　　}

2.父组件引用

　　模板

　　差异

　　Times :endTime=timeEnd/Times

　　/div

　　/模板

　　从" @/组件/时间"导入时间；

　　导出默认值{

　　姓名：家，

　　data() {

　　返回{

　　时间结束： 2021-3-30 9:50 //结束时间（苹果手机无法解析- 可以将格式改为2021/3/30)

　　},

　　组件：{

　　次，

　　},

　　};

　　更多关于倒计时的文章请查看专题： 《倒计时功能》

　　更多Java脚本语言时钟特效点击查看：JavaScript时钟特效专题

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。