当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 基于vue、react实现倒计时效果

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

2019年09月06日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了基于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>

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网