本文實(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í)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
