vue.js實現(xiàn)簡單計時器功能
更新時間：2021年08月06日 11:26:26 作者：chaodaibing
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)簡單計時器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue.js實現(xiàn)簡單計時器功能的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<title>抬腿計數(shù)器</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:"計數(shù)器",
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="計數(shù)器"
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>
效果如下
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue如何將對象中所有的key賦為空值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了Vue中$refs和$nextTick的使用方法，文中的示例代碼講解詳細，對我們學習Vue有一定幫助，需要的可以參考一下2022-03-03
vue3使用elementPlus進行table合并處理的示例詳解
虛擬數(shù)據(jù)中公司下有多個客戶,公司一樣的客戶,公司列需要合并,客戶如果一樣也需要合并進行展示,所以本文給大家介紹了vue3使用elementPlus進行table合并處理的實例,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2024-02-02
本文主要介紹了Vue中keep-alive組件的使用方法和一些基礎配置,keep-alive是Vue中的一個抽象組件,可以緩存組件實例,提高性能,本文給大家介紹vue中keep-alive組件使用和一些基礎配置方法,感興趣的朋友一起看看吧2024-10-10
parcel-vue 一個基于Parcel打包工具的 VueJS急速開發(fā)腳手架解決方案,強烈建議使用node8.0以上。下面通過本文給大家介紹全新打包工具parcel零配置vue開發(fā)腳手架的相關知識，感興趣的朋友一起看看吧2018-01-01
vue3中el-table實現(xiàn)表格合計行的示例代碼
這篇文章主要介紹了vue3中el-table實現(xiàn)表格合計行,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
調(diào)度器是vue3響應式系統(tǒng)中一個非常重要的特性，可調(diào)度性指的是當trigger 動作觸發(fā)副作用函數(shù)重新執(zhí)行時，有能力決定副作用函數(shù)執(zhí)行的時機、次數(shù)以及方式，本文通過代碼示例給大家介紹調(diào)度器是什么，有什么功能，怎么使用,感興趣的同學可以借鑒閱讀2023-06-06
這篇文章主要介紹了Vue狀態(tài)管理工具Pinia的安裝與使用,一步一步學習如何將pinia運用到項目實戰(zhàn)中去,文中有詳細的安裝教程和使用方法,并通過代碼示例講解的非常詳細,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue中如何實時監(jiān)聽本地存儲，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-router 中router-view不能渲染的解決方法
本篇文章主要結合了vue-router 中router-view不能渲染的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05