基于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 相关文章推荐
input的focus方法使用
Mar 13 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
js Dialog 实践分享
Oct 22 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
详解vue项目构建与实战
Jun 27 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 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
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
python with (as)语句实例详解
2020/02/04 Python
python不同版本的_new_不同点总结
2020/12/09 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
大学生水果店创业计划书
2014/01/28 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫