vue.js實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器功能
更新時(shí)間：2021年08月06日 11:26:26 作者：chaodaibing
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue.js實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器功能的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<title>抬腿計(jì)數(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:"計(jì)數(shù)器",
count:10
}
},
mounted(){
this.getnum() //獲取所有選擇項(xiàng)
},
methods:{
getnum:function(){
this.$http.get('/api/count/count.php').then(function(res){
this.num=res.data
},function(){
console.log('請(qǐng)求失敗處理')
});
},
add:function(){
this.canclick=false
this.$refs.notify.play()
this.content=this.count+'s后結(jié)束'
let clock=setInterval(()=>{
this.count--
this.content=this.count+'s后結(jié)束'
if(this.count==0){
this.content="計(jì)數(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('請(qǐng)求失敗處理')
});
}
}
})
</script>
</body>
</html>
效果如下
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于Vue方法實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器
- 使用vue實(shí)現(xiàn)計(jì)時(shí)器功能
- vue實(shí)現(xiàn)簡(jiǎn)易計(jì)時(shí)器組件
- vue計(jì)時(shí)器的實(shí)現(xiàn)方法
- Vue計(jì)時(shí)器的用法詳解
- 解決vue組件銷毀之后計(jì)時(shí)器繼續(xù)執(zhí)行的問題
- 在Vue環(huán)境下利用worker運(yùn)行interval計(jì)時(shí)器的步驟
- Vue 使用計(jì)時(shí)器實(shí)現(xiàn)跑馬燈效果的實(shí)例代碼
- vue 計(jì)時(shí)器組件的實(shí)現(xiàn)代碼
- Vue.js實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器應(yīng)用
相關(guān)文章
這篇文章主要介紹了vue如何將對(duì)象中所有的key賦為空值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了Vue中$refs和$nextTick的使用方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下2022-03-03
vue3使用elementPlus進(jìn)行table合并處理的示例詳解
虛擬數(shù)據(jù)中公司下有多個(gè)客戶,公司一樣的客戶,公司列需要合并,客戶如果一樣也需要合并進(jìn)行展示,所以本文給大家介紹了vue3使用elementPlus進(jìn)行table合并處理的實(shí)例,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
vue中keep-alive組件使用和一些基礎(chǔ)配置方法
本文主要介紹了Vue中keep-alive組件的使用方法和一些基礎(chǔ)配置,keep-alive是Vue中的一個(gè)抽象組件,可以緩存組件實(shí)例,提高性能,本文給大家介紹vue中keep-alive組件使用和一些基礎(chǔ)配置方法,感興趣的朋友一起看看吧2024-10-10
parcel-vue 一個(gè)基于Parcel打包工具的 VueJS急速開發(fā)腳手架解決方案,強(qiáng)烈建議使用node8.0以上。下面通過本文給大家介紹全新打包工具parcel零配置vue開發(fā)腳手架的相關(guān)知識(shí)，感興趣的朋友一起看看吧2018-01-01
vue3中el-table實(shí)現(xiàn)表格合計(jì)行的示例代碼
這篇文章主要介紹了vue3中el-table實(shí)現(xiàn)表格合計(jì)行,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
調(diào)度器是vue3響應(yīng)式系統(tǒng)中一個(gè)非常重要的特性，可調(diào)度性指的是當(dāng)trigger 動(dòng)作觸發(fā)副作用函數(shù)重新執(zhí)行時(shí)，有能力決定副作用函數(shù)執(zhí)行的時(shí)機(jī)、次數(shù)以及方式，本文通過代碼示例給大家介紹調(diào)度器是什么，有什么功能，怎么使用,感興趣的同學(xué)可以借鑒閱讀2023-06-06
這篇文章主要介紹了Vue狀態(tài)管理工具Pinia的安裝與使用,一步一步學(xué)習(xí)如何將pinia運(yùn)用到項(xiàng)目實(shí)戰(zhàn)中去,文中有詳細(xì)的安裝教程和使用方法,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
vue中如何實(shí)時(shí)監(jiān)聽本地存儲(chǔ)
這篇文章主要介紹了vue中如何實(shí)時(shí)監(jiān)聽本地存儲(chǔ)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-router 中router-view不能渲染的解決方法
本篇文章主要結(jié)合了vue-router 中router-view不能渲染的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05