vue实现倒计时功能,vue 时钟
这篇文章主要为大家详细介绍了某视频剪辑软件计时器的用法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现计时器的具体代码，供大家参考，具体内容如下
功能简介：
1、初始值为0,点击【加】按钮，数字自1;连续点击【加】,不影响数字一
2、点击【停】按钮，停止一
源码：
！声明文档类型
html add=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题文档/标题
！- 1.导入某视频剪辑软件包-
脚本src= ./lib/vue-2.4.0.js/script
/头
身体
！- 2.创建一个要控制的区域-
div id=应用程序
输入类型=按钮值=加@click=add
输入类型=按钮值=停@click=stop
h4{{ count }}/h4
/div
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
计数：0,
intervalId: null
},
方法：{
add() {
//计时器正在进行中，退出函数
if (this.intervalId！=null) {
返回
};
//计时器为空，操作
这个。intervalid=setInterval(()={
this.count=1
}, 400)
},
//停止定时器
stop() {
清除间隔(这个。intervalid)//清除计时器
this.intervalId=null//设置为空
}
}
})
/脚本
/body
/html
之前小编收藏了一个开始计时的组件，这个组件可直接引入到项目中使用，谢谢原作者分享。
模板
div class=计时器
div ref=startTimer/div
/div
/模板
脚本
导出默认值{
名称：计时器，
data () {
返回{
计时器： ,
内容： ,
小时：0,
分钟：0,
秒：0
}
},
已创建(){
这个。timer=setInterval(这个。启动定时器，1000)；
},
销毁(){
清除间隔(这个。定时器)；
},
方法：{
startTimer () {
这个。秒=1；
if (this.seconds=60) {
这个。秒=0；
这个。分钟=这个。分钟1；
}
如果(this.minute=60) {
这个。分钟=0；
这个。小时=这个。第一小时；
}
这个参考文献。启动计时器。innerhtml=(this。10分钟？ 0 这个。分钟：这个。分钟):(这个。秒10？ 0 这个。秒：这个。秒)；
}
}
}
/脚本
风格
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。