基于vue、react實(shí)現(xiàn)倒計(jì)時效果
本文實(shí)例為大家分享了基于vue、react實(shí)現(xiàn)倒計(jì)時效果的具體代碼,供大家參考,具體內(nèi)容如下
Vue
方案一:倆個元素
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ì)時
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);
}
}
})
方案二:一個元素,改變文字
HTML:
<button type="button" @click='delusercache()' :disabled="sendMsgDisabled" v-text="btnText"></button> //倒計(jì)時按鈕禁用:disabled="sendMsgDisabled
JS:
var vm = new Vue({
el: '#example',
data() {
return {
time: 60, // 發(fā)送驗(yàn)證碼倒計(jì)時
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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
element-ui table組件如何使用render屬性的實(shí)現(xiàn)
這篇文章主要介紹了element-ui table組件如何使用render屬性的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Message組件實(shí)現(xiàn)發(fā)財(cái)U(kuò)I?示例詳解
這篇文章主要為大家介紹了Message組件實(shí)現(xiàn)發(fā)財(cái)U(kuò)I的手寫示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
vue項(xiàng)目如何修改title旁邊的icon圖片
這篇文章主要介紹了vue項(xiàng)目如何修改title旁邊的icon圖片,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12
vue mint-ui 實(shí)現(xiàn)省市區(qū)街道4級聯(lián)動示例(仿淘寶京東收貨地址4級聯(lián)動)
本篇文章主要介紹了vue mint-ui 實(shí)現(xiàn)省市區(qū)街道4級聯(lián)動(仿淘寶京東收貨地址4級聯(lián)動),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10
vue調(diào)用本地?cái)z像頭實(shí)現(xiàn)拍照功能
這篇文章主要介紹了vue調(diào)用本地?cái)z像頭實(shí)現(xiàn)拍照功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08
vue頁面監(jiān)聽是否置為后臺或可見狀態(tài)問題
這篇文章主要介紹了vue頁面監(jiān)聽是否置為后臺或可見狀態(tài)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10

