基于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 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
详解javascript void(0)
Jul 13 Javascript
JavaScript 绘制饼图的示例
Feb 19 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
PHP基础知识介绍
2013/09/17 PHP
使用php清除bom示例
2014/03/03 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
python版百度语音识别功能
2019/07/09 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
自荐信的两点禁忌
2013/10/30 职场文书
影视制作岗位职责
2013/12/04 职场文书
找工作最新求职信
2013/12/22 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
个人思想政治总结
2015/03/05 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书