基于vue、react实现倒计时效果

本文实例为大家分享了基于vue、react实现倒计时效果的具体代码，供大家参考，具体内容如下

Vue

方案一：俩个元素

HTML：

  
   {{time+'秒后获取'}}
   send
  

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：

//倒计时按钮禁用: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);
  };

{this.state.btnText}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。