在岁月中跋涉,每个人都有自己的故事,看淡心境才会秀丽,看开心情才会明媚。累时歇一歇,随清风漫舞,烦时静一静,与花草凝眸,急时缓一缓,和自己微笑。
本文实例为大家分享了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" rel="nofollow noopener noreferrer" 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>
效果如下
到此这篇关于vue.javascript如何实现简单计时器功能就介绍到这了。自得时应善待他人,由于你失意时会须要他们。更多相关vue.javascript如何实现简单计时器功能内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!