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

 更新时间:2019年08月26日 10:48:39   作者:非凡主力  
这篇文章主要为大家详细介绍了基于vue、react实现倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

相关文章

  • vue3中vite的@路径别名与path中resolve实例详解

    vue3中vite的@路径别名与path中resolve实例详解

    这篇文章主要给大家介绍了关于vue3中vite的@路径别名与path中resolve的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2023-02-02
  • Element ui table表格内容超出隐藏显示省略号问题

    Element ui table表格内容超出隐藏显示省略号问题

    这篇文章主要介绍了Element ui table表格内容超出隐藏显示省略号问题,具有很好的参考价值,希望对大家有所帮助,
    2023-11-11
  • vue使用element-ui的el-image的问题分析

    vue使用element-ui的el-image的问题分析

    这篇文章主要介绍了vue使用element-ui的el-image的问题分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Vue关于Element UI中的文本域换行问题

    Vue关于Element UI中的文本域换行问题

    这篇文章主要介绍了Vue关于Element UI中的文本域换行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue+Antv F2实现混合图表

    Vue+Antv F2实现混合图表

    这篇文章主要为大家详细介绍了Vue+Antv F2实现混合图表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 深度解析 Vue3 的响应式机制

    深度解析 Vue3 的响应式机制

    这篇文章主要介绍了深度解析 Vue3 的响应式机制,今天就带大家深入了解一下 Vue 3 的响应式机制,相信学完今天的内容,会对响应式机制有更深地体会;文章会结合代码示例,帮大家掌握响应式机制的进阶用法,让我们正式开始学习吧
    2022-09-09
  • 关于vue中的时间格式转化问题

    关于vue中的时间格式转化问题

    这篇文章主要介绍了关于vue中的时间格式转化问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue更多筛选项小组件使用详解

    vue更多筛选项小组件使用详解

    这篇文章主要为大家详细介绍了vue更多筛选项小组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • vue学习之mintui picker选择器实现省市二级联动示例

    vue学习之mintui picker选择器实现省市二级联动示例

    本篇文章主要介绍了vue学习之mintui picker选择器实现省市二级联动示例,非常具有实用价值,需要的朋友可以参考下
    2017-10-10
  • 如何使用Vue3实现文章内容中多个"关键词"标记高亮显示

    如何使用Vue3实现文章内容中多个"关键词"标记高亮显示

    高亮显示是我们日常开发中经常会遇到的需求,下面这篇文章主要给大家介绍了关于如何使用Vue3实现文章内容中多个"关键词"标记高亮显示的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11

最新评论