基于vue、react實(shí)現(xiàn)倒計(jì)時(shí)效果
本文實(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)文章
element-ui table組件如何使用render屬性的實(shí)現(xiàn)
這篇文章主要介紹了element-ui table組件如何使用render屬性的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11Message組件實(shí)現(xiàn)發(fā)財(cái)U(kuò)I?示例詳解
這篇文章主要為大家介紹了Message組件實(shí)現(xiàn)發(fā)財(cái)U(kuò)I的手寫示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08關(guān)于vue中的ajax請(qǐng)求和axios包問題
大家在vue中,經(jīng)常會(huì)用到數(shù)據(jù)請(qǐng)求問題,常用的有vue-resourse、axios ,今天小編給大家介紹下axios的post請(qǐng)求 ,感興趣的朋友跟隨腳本之家小編一起看看吧2018-04-04vue項(xiàng)目如何修改title旁邊的icon圖片
這篇文章主要介紹了vue項(xiàng)目如何修改title旁邊的icon圖片,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12vue mint-ui 實(shí)現(xiàn)省市區(qū)街道4級(jí)聯(lián)動(dòng)示例(仿淘寶京東收貨地址4級(jí)聯(lián)動(dòng))
本篇文章主要介紹了vue mint-ui 實(shí)現(xiàn)省市區(qū)街道4級(jí)聯(lián)動(dòng)(仿淘寶京東收貨地址4級(jí)聯(lián)動(dòng)),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10vue調(diào)用本地?cái)z像頭實(shí)現(xiàn)拍照功能
這篇文章主要介紹了vue調(diào)用本地?cái)z像頭實(shí)現(xiàn)拍照功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08vue頁面監(jiān)聽是否置為后臺(tái)或可見狀態(tài)問題
這篇文章主要介紹了vue頁面監(jiān)聽是否置為后臺(tái)或可見狀態(tài)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10