<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
    var LikeButton = React.createClass({
      getInitialState: function(){
        return {
          count: 60,
          liked: true
        };
      },
      handleClick: function(){
        if(this.state.liked){
          this.timer = setInterval(function () {
            var count = this.state.count;
            this.state.liked = false;
            count -= 1;
            if (count < 1) {
              this.setState({
                liked: true
              });
              count = 60;
            }
            this.setState({
              count: count
            });
          }.bind(this), 1000);
        }

      },
      render: function(){
        var text = this.state.liked ? '获取验证码' : this.state.count + '秒后重发';
        return(
          <p>
            <button onClick={this.handleClick}>{text}</button>
          </p>
        )
      }
    })

    ReactDOM.render(
      <LikeButton />,
      document.getElementById('example')
    )
    </script>
  </body>
</html>

react验证码倒计时的更多相关文章

  1. react native中的聊天气泡以及timer封装成的发送验证码倒计时

    今天看来情书写的文章,研究了一下大佬写的文章,自己做一点总结. 其实,今天我想把我近期遇到的坑都总结一下:1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以 ...

  2. Flutter 实际开发常用工具类（全局提示，请求封装，token缓存，验证码倒计时、常用窗帘动画及布局）

    介绍: 一星期从入门到实际开发经验分享及总结           代码传送门github Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.未来App开发 ...

  3. jQuery获取短信验证码+倒计时实现

    jQuery 短信验证码倒计时 <script type="text/javascript" charset="utf-8"> $(function ...

  4. Andorid实现点击获取验证码倒计时效果

    这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文   我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...

  5. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

  6. js&jq 发送验证码倒计时

    <input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function t ...

  7. iOS-实现验证码倒计时功能（1）

    验证码倒计时按钮的应用是非常普遍的,该Blog就和你一起来写一个IDCountDownButton来实现验证码倒计时的效果.你可以想使用普通的UIButton类型按钮一样,只需要设置其倒计时时长(若未 ...

  8. iOS 短信验证码倒计时按钮的实现

    验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器, ...

  9. Android 获取验证码倒计时实现

    Android 获取验证码倒计时实现 2017年10月24日 09:55:41 FBY展菲 阅读数:2002    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

随机推荐

  1. discuz教程：discuz模板js与jQuery冲突的解决方案

    今天在做discuz模板的时候,用到jquery的时候和原来主题js冲突.这个主要是Discuz X使用了$(id)作为dom节点的获取方法,而$符号刚好与jQuery的默认符号相冲突. 以下是基于之 ...

  2. linux下用用iptables做端口映射的shell

    情形一:跨网络.跨主机的映射Full-Nat 我们想到达主机B的80端口,但是由于网络限制可能无法直接完成.但是我们可以到达主机A的8080端口,而主机A可以直接到达B的80端口.这时候可以使用ipt ...

  3. EF常用命令行

    启用迁移:指定迁移的目录和数据库上下文名称Enable-Migrations -MigrationsDirectory "MigrationsHis" -ContextTypeNa ...

  4. VC++ 回调函数及使用方法(转)

    转载:http://blog.csdn.net/vsooda/article/details/7435801 转载:http://blog.csdn.net/lincyang/article/deta ...

  5. VirtualBox 共享文件夾

    説明:host為window10,guest為centos7 一.安装VBoxLinuxAdditions 1. 在guest上挂载virtualbox安装目录下的VBoxGuestAdditions ...

  6. List中存储同一个对象（内容不同）

    List中存储同一个对象,前面的会被后存入的对象覆盖,解决方法:每次存入新的对象

  7. TFS二次开发系列：六、TFS的版本控制

    在TFS中对于版本控制是在WorkSpace工作区来控制的. 首先我们先整理WorkSpace的一些基本使用方法. CheckIn:迁入挂起的操作 CreateMapping:创建一个本地映射地址 D ...

  8. 最详细的Log4j使用教程

    日志是应用软件中不可缺少的部分,Apache的开源项目log4j是一个功能强大的日志组件,提供方便的日志记录.在apache网站:jakarta.apache.org/log4j 可以免费下载到Log ...

  9. Java多线程初探

    多线程 单线程的程序只有一个顺序执行流.多个顺序流之间互不干扰. 多线程的创建 定义Thread类的子类,重写该类的run()方法. 创建Thread子类的实例. 调用线程对象的start()方法来启 ...

  10. java中String对象的split方法

    在java.lang包中有String.split()方法,返回是一个String[]数组,今天碰到一个自己没注意的问题: 1.特殊分隔符 String str1 = "123|456|78 ...