<!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. 微信小程序实例

    看到小程序,那么火,自己也想动手写一个.但是没有很好的api接口.有一天看到一个开发安卓的朋友,写了一个干货集中营的小程序.就搜了一下.看到api是免费开放的.于是自己也动手写了一个. 具体的微信小程 ...

  2. easyui validatebox 验证类型DEMO

    <script> $.extend($.fn.validatebox.defaults.rules, { idcard: {// 验证身份证 validator: function (va ...

  3. 2017年1月4日 星期三 --出埃及记 Exodus 21:30

    2017年1月4日 星期三 --出埃及记 Exodus 21:30 However, if payment is demanded of him, he may redeem his life by ...

  4. wcf 同时支持webhttp 和 引用方式

    wcf 实现参考 http://www.cnblogs.com/mingmingruyuedlut/p/4223116.html 兼容两种方式 1.修改服务端webconfig <system. ...

  5. ACM 杭电HDU 2084 数塔 [解题报告]

    数塔 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  6. sql 游标

    --创建游标 DECLARE cursor_name CURSOR [ LOCAL | GLOBAL ] [ FORWARD_ONLY | SCROLL ] [ STATIC | KEYSET | D ...

  7. MyEclipse中的SVN操作手册

    原文出处:http://blog.sina.com.cn/s/blog_8a3d83320100zhmp.html 1.导入项目 点击工具栏上的[File-Import],进入下图 (如果你的对话框中 ...

  8. OpenCV从入门到放弃系列之——core模块.核心功能（一）

    Mat - 基本图像容器 世间的图像是各种各样的,但是到了计算机的世界里所有的图像都简化为了数值矩以及矩阵信息.作为一个计算视觉库,OpenCV的主要目的就是处理和操作这些信息,来获取更高级的信息,也 ...

  9. Vs2012(Vs2013) 编译 64位 Qt (动态库), 并使用自编译Qt建立工程(悲催经历)。（含遗留问题）

    仅供参考. 体会:我个人此次编译不该使用Vs2013编译Qt. 使用以下程序: Qt : qt-opensource-windows-x86-msvc2012_64_opengl-5.2.1.exe ...

  10. COG注释--转载

    http://blog.sina.com.cn/s/blog_670445240102uxwy.html 一 COG简介 COG,即Clusters of Orthologous Groups of ...