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


Posted in Javascript onAugust 26, 2019

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

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

Javascript 相关文章推荐
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
Js经典案例的实例代码
May 10 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 #Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 #Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 #Javascript
小程序实现层叠卡片滑动效果
Aug 26 #Javascript
微信小程序 数据缓存实现方法详解
Aug 26 #Javascript
使用typescript构建Vue应用的实现
Aug 26 #Javascript
微信小程序实现手势滑动卡片效果
Aug 26 #Javascript
You might like
ZF等常用php框架中存在的问题
2008/01/10 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
vue debug 二种方法
2018/09/16 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
Python生成随机验证码的两种方法
2015/12/22 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
应届护士推荐信
2013/11/16 职场文书
网络技术专业求职信
2014/02/18 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
诚实守信演讲稿
2014/09/01 职场文书
依法行政工作汇报
2014/10/28 职场文书
2015年班组长工作总结
2015/04/10 职场文书
工地食品安全责任书
2015/05/09 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书