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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了基于vue、react实现倒计时效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1920字，纯文字阅读大概需要3分钟。

内容图文

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

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

内容总结

以上是互联网集市为您收集整理的基于vue、react实现倒计时效果全部内容，希望文章能够帮你解决基于vue、react实现倒计时效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---