| 本文实例为大家分享了vue.js实现简单计时器功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html><html lang="en"><head> <title>抬腿计数器</title> <script src="/static/vue/vue.js"></script> <script src="/static/vue/index.js"></script> <script src="/static/vue/vue-resource.min.js"></script> <link rel="stylesheet" href="/static/vue/index.css" ></head><style type="text/css"> .el-container { margin:100px 30px 30px 30px ; height:1800px; background-color: #B3C0D1; } .el-button{ height:1800px; width:100%; font-size:300px; }</style><body> <div id="app"> <el-container> <el-button type="primary" :disabled="!canclick" @click="add"> {{ num }} <el-divider></el-divider> {{ content }} </el-button> </el-container> <video ref="notify"> <source src="countdown.m4a" /> </video> </div> <script> new Vue({ el: '#app', data: function () { return { num:0, canclick:true, content:"计数器", count:10 } }, mounted(){ this.getnum() //获取所有选择项 }, methods:{ getnum:function(){ this.$http.get('/api/count/count.php').then(function(res){ this.num=res.data },function(){ console.log('请求失败处理') }); }, add:function(){ this.canclick=false this.$refs.notify.play() this.content=this.count+'s后结束' let clock=setInterval(()=>{ this.count-- this.content=this.count+'s后结束' if(this.count==0){ this.content="计数器" clearInterval(clock) this.canclick=true this.count=10 } },850); this.$http.get('/api/count/add.php?num='+this.num).then(function(res){ this.num=res.data },function(){ console.log('请求失败处理') }); } } }) </script></body></html>效果如下 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
React翻页器的实现(包含前后端)
使用vue实现计时器功能 |
