vue点击时间,vue组件里的倒计时定时器

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

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

　　实现效果：

　　1.点击开始按钮启动计时

　　2.点击重置按钮计时恢复到00:00:00

　　3.点击暂停按钮暂停计时

　　某视频剪辑软件代码：

　　模板

　　差异

　　div class=时间容器“{ time } }/div

　　a-button style= margin-right:20px type= primary @ click= start

　　开始/a按钮

　　a按钮style= margin-right:20px type= primary @ click= reset

　　重置/a按钮

　　a按钮type=primary @click=end 暂停/a按钮

　　/div

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　标志：空，

　　小时：0,

　　分钟：0,

　　秒：0,

　　时间："00:00:00",

　　};

　　},

　　方法：{

　　//开始计时

　　start() {

　　this.flag=setInterval(()={

　　这个。秒=这个。第二个1；

　　if (this.second=60) {

　　这个。秒=0；

　　这个。分钟=这个。分钟1；

　　}

　　如果(this.minute=60) {

　　这个。分钟=0；

　　这个。小时=这个。第一小时；

　　}

　　this.time=

　　this.complZero(this.hour)

　　:

　　this.complZero(this.minute)

　　:

　　这个。compl zero(这个。第二)；

　　}, 1000);

　　},

　　//重新计时

　　重置(){

　　窗户。清除间隔(这个。旗帜)；

　　这个。小时=0；

　　这个。分钟=0；

　　这个。秒=0；

　　这个。time= 00:00:00 ；

　　},

　　//暂停计时

　　end() {

　　这个。flag=清除间隔(this。旗帜)；

　　},

　　//补零

　　完成零（名词)

　　返回n 10？0 n:" " n；

　　},

　　},

　　};

　　/脚本

　　风格。时间容器{

　　字体大小：40px

　　边距-底部：10px

　　}

　　/风格

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

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