本文實例為大家分享了基于vue、react實現倒計時效果的具體代碼，供大家參考，具體內容如下

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, // 發送驗證碼倒計時    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, // 發送驗證碼倒計時    sendMsgDisabled: false //按鈕可用   }  },  methods: {   time(){      this.sendMsgDisabled= true; //按鈕不可用      let interval = window.setInterval(()=> {        this.btnText = this.time + 's重新發送'        if ((this.time--) <= 0) {          this.time = 120;          this.btnText ='發送驗證碼'          this.sendMsgDisabled= false; //按鈕可用          window.clearInterval(interval);        }      }, 1000);    } }) 

React

引用塊內容

time = () => {    this.setState({       times: this.state.times-1,      btnText: '' + this.state.times + 's重新發送)',      // discodeBtn: false,      clearInterval:true    })    var siv = setInterval(() => {      this.setState({         times: this.state.times-1,        btnText: '' + this.state.times + 's重新發送)',        // discodeBtn: false,        clearInterval:true      }, () => {        if (this.state.times === 0) {          clearInterval(siv);          this.setState({             times: 60,            btnText: '發送驗證碼',             // 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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。