vue.js實現簡單計時器功能
本文實例為大傢分享瞭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>
效果如下
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。