基于vue、react實(shí)現(xiàn)倒計(jì)時(shí)效果
更新時(shí)間：2019年08月26日 10:48:39 作者：非凡主力
這篇文章主要為大家詳細(xì)介紹了基于vue、react實(shí)現(xiàn)倒計(jì)時(shí)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了基于vue、react實(shí)現(xiàn)倒計(jì)時(shí)效果的具體代碼，供大家參考，具體內(nèi)容如下
Vue
方案一：倆個(gè)元素
HTML：
<div id="example">
<button @click="send">
<span v-if="sendMsgDisabled">{{time+'秒后獲取'}}</span>
<span v-if="!sendMsgDisabled">send</span>
</button>
</div>
JS：
var vm = new Vue({
el: '#example',
data() {
return {
time: 60, // 發(fā)送驗(yàn)證碼倒計(jì)時(shí)
sendMsgDisabled: false
}
},
methods: {
send() {
let me = this;
me.sendMsgDisabled = true;
let interval = window.setInterval(function() {
if ((me.time--) <= 0) {
me.time = 60;
me.sendMsgDisabled = false;
window.clearInterval(interval); //停止
}
}, 1000);
}
}
})
方案二：一個(gè)元素，改變文字
HTML：
<button type="button" @click='delusercache()' :disabled="sendMsgDisabled" v-text="btnText"></button> //倒計(jì)時(shí)按鈕禁用:disabled="sendMsgDisabled
JS：
var vm = new Vue({
el: '#example',
data() {
return {
time: 60, // 發(fā)送驗(yàn)證碼倒計(jì)時(shí)
sendMsgDisabled: false //按鈕可用
}
},
methods: {
time(){
this.sendMsgDisabled= true; //按鈕不可用
let interval = window.setInterval(()=> {
this.btnText = this.time + 's重新發(fā)送'
if ((this.time--) <= 0) {
this.time = 120;
this.btnText ='發(fā)送驗(yàn)證碼'
this.sendMsgDisabled= false; //按鈕可用
window.clearInterval(interval);
}
}, 1000);
}
})
React
引用塊內(nèi)容
time = () => {
this.setState({
times: this.state.times-1,
btnText: '' + this.state.times + 's重新發(fā)送)',
// discodeBtn: false,
clearInterval:true
})
var siv = setInterval(() => {
this.setState({
times: this.state.times-1,
btnText: '' + this.state.times + 's重新發(fā)送)',
// discodeBtn: false,
clearInterval:true
}, () => {
if (this.state.times === 0) {
clearInterval(siv);
this.setState({
times: 60,
btnText: '發(fā)送驗(yàn)證碼',
// discodeBtn: true,
clearInterval:false,
phone:false,
isDisabled:false
})
}
});
}, 1000);
};
<button
className={(this.state.clearInterval ? 'send-btn-disabled-m' : 'send-btn-default')}
disabled={this.state.isDisabled}
onClick={this.getPhone} >
{this.state.btnText}
</button>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何通過(guò)props方式在子組件中獲取相應(yīng)的對(duì)象
這篇文章主要介紹了vue如何通過(guò)props方式在子組件中獲取相應(yīng)的對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問(wèn)題
這篇文章主要介紹了vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue之beforeEach非登錄不能訪問(wèn)的實(shí)現(xiàn)（代碼親測(cè)）
這篇文章主要介紹了Vue之beforeEach非登錄不能訪問(wèn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue?draggable組件實(shí)現(xiàn)拖拽及點(diǎn)擊無(wú)效問(wèn)題的解決
這篇文章主要介紹了vue?draggable組件實(shí)現(xiàn)拖拽及點(diǎn)擊無(wú)效問(wèn)題的解決,只需要在設(shè)置handle屬性就可以了，.defaultTypeTag 是要拖拽的塊的類(lèi)名，要注意的是需要做點(diǎn)擊事件的項(xiàng)不能包含在這個(gè)類(lèi)名里面，不然會(huì)無(wú)法觸發(fā)點(diǎn)擊事件，詳細(xì)解決辦法跟隨小編一起學(xué)習(xí)吧2022-05-05
解決Can''t find variable: SockJS vue項(xiàng)目的問(wèn)題
這篇文章主要介紹了解決Can't find variable: SockJS vue項(xiàng)目的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
一篇文章教會(huì)你部署vue項(xiàng)目到docker
在前端開(kāi)發(fā)中,部署項(xiàng)目是我們經(jīng)常發(fā)生的事情,下面這篇文章主要給大家介紹了關(guān)于部署vue項(xiàng)目到docker的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
Vue.js列表渲染綁定jQuery插件的正確姿勢(shì)
這篇文章主要為大家詳細(xì)介紹了Vue.js列表渲染綁定jQuery插件的正確姿勢(shì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
本篇文章主要介紹了Vue.js 2.0 如何使用axios，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
使用Vue.js實(shí)現(xiàn)一個(gè)循環(huán)倒計(jì)時(shí)功能
在Web應(yīng)用中,倒計(jì)時(shí)功能常用于各種場(chǎng)景,如活動(dòng)倒計(jì)時(shí)、定時(shí)任務(wù)提醒等,Vue.js作為一款輕量級(jí)的前端框架,提供了豐富的工具和API來(lái)實(shí)現(xiàn)這些功能,本文將詳細(xì)介紹如何使用Vue.js實(shí)現(xiàn)一個(gè)循環(huán)倒計(jì)時(shí)功能,需要的朋友可以參考下2024-09-09
vue router-link傳參以及參數(shù)的使用實(shí)例
下面小編就為大家?guī)?lái)一篇vue router-link傳參以及參數(shù)的使用實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11