<!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. 关于sqlserver 2008 无法远程连接的问题

    Sqlserver 2008 无法远程连接,原因无非如下: 1. Sql未配置为允许TCP/IP登录: 2. 防火墙未允许端口1433(或者其他在SQL配置中指定的端口): 3. 命名实例导致的无法连 ...

  2. 【Normal Form】数据库表结构设计所遵从的范式

    参考的优秀文章 数据库(第一范式,第二范式,第三范式) 数据库设计是件严肃.关键的事儿,一毕业,加入一个大型的行业项目,那儿的前辈资深工程师,就给我灌输数据库如何关键.神圣.深不可测的观念,所以,我一 ...

  3. OAuth2.0说明文档

    OAuth2.0说明文档 1.OAuth 2.0 简介 OAuth为应用提供了一种访问受保护资源的方法.在应用访问受保护资源之前,它必须先从资源拥有者处获取授权(访问许可),然后用访问许可交换访问令牌 ...

  4. 。Java中的一些小细节

    1.main方法. ------任何一个Java程序都有一个main方法,它是程序的入口. ------当执行  “ java + 类名 “  这个命令时,JVM就会去加载这个类,并且寻找这个类中的m ...

  5. python之初级学习

    一.python安装 1.下载安装包(本人使用python3.5.1) https://www.python.org/downloads/ 2.安装python-3.5.1.exe 本人下载的是pyt ...

  6. 遗传算法在JobShop中的应用研究（part4:变异）

    下面,我们以车间调度为例来谈谈遗传算法中的另一个重要操作变异.变异操作通常发生在交叉操作之后,它的操作对象是交叉得到的新染色体.在本文中我们通过随机交换染色体的两个位置上的值来得到变异后的染色体,变异 ...

  7. mysql中文乱码问题解决

    在mysql5.0以上,中文乱码不能用网上的大多数方法,我用网上改编码的问题,让我mysql服务器再也起不起来了. 我用的mysql5.7.16绿色免安装版. 在根目录下的配置文件里my.ini(或者 ...

  8. iOS app 企业内部发布及HTTPS服务器配置

    转自: http://www.cnblogs.com/cocoajin/p/4082488.html iOS企业内部发布及HTTPS服务器配置 一:所需的条件 1. 苹果开发者证书,企业版 299$ ...

  9. /boot/grub/device.map【设备映射】

    grub-install 安装 GRUB 在第一个硬盘的 MBR: # grub-install '(hd0)' grub-install 会先搜寻设备对应的文件(/boot/grub/device. ...

  10. mysql忘记密码

    修改 /etc/my.cnf 添加 skip-grant-tables 修改完后重启mysql 这样就可以直接进入mysql 然后修改mysql数据库密码 mysql>update user s ...