這篇文章主要介紹vue、react如何實現(xiàn)倒計時效果,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
我們提供的服務有:成都網站建設、成都網站設計、微信公眾號開發(fā)、網站優(yōu)化、網站認證、長沙縣ssl等。為上千多家企事業(yè)單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務,是有科學管理、有技術的長沙縣網站制作公司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ā)送驗證碼倒計時 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> //倒計時按鈕禁用:disabled="sendMsgDisabled
JS:
var vm = new Vue({ el: '#example', data() { return { time: 60, // 發(fā)送驗證碼倒計時 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ā)送驗證碼' this.sendMsgDisabled= false; //按鈕可用 window.clearInterval(interval); } }, 1000); } })
React
引用塊內容
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ā)送驗證碼', // 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>
以上是“vue、react如何實現(xiàn)倒計時效果”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
當前題目:vue、react如何實現(xiàn)倒計時效果-創(chuàng)新互聯(lián)
轉載來于:http://bm7419.com/article4/dicsie.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供Google、建站公司、網站導航、響應式網站、全網營銷推廣、營銷型網站建設
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)