<!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. [转]Part 3: Understanding !PTE - Non-PAE and X64

    http://blogs.msdn.com/b/ntdebugging/archive/2010/06/22/part-3-understanding-pte-non-pae-and-x64.aspx ...

  2. build.gradle文件详解<转> 推荐

    apply plugin: 'com.android.application'//说明module的类型,com.android.application为程序,com.android.library为 ...

  3. dom节点的操作

    dom节点的操作 -- jQuery 内部插入 1.(结尾)append 方法 . appendto方法(为了方便链式操作) (开头)prepend方法           $('#div1').ap ...

  4. cookie手工注入

    1.先访问当前注入点文件名 2.修改cookie javascript:alert(document.cookie="id="+escape("1137")); ...

  5. 关于php的开源

    这里的开源是指编写php的C语言的源代码是开放的,你可以下载下来c源代码去修改然后重新编译连接得到自己的程序. 比如php不支持多线程一直是广为被人所诟病的,你也可以让它变相的支持多线程,比如face ...

  6. HANA SQLScript

    数据类型 日期时间类型 DATE(日期) DATE 数据类型由年.月.日信息组成,表示一个日期值. DATA 类型的默认格式为‘YYYY-MM-DD’. YYYY 表示年, MM 表示月而 DD 表示 ...

  7. Javascript 知识点整理

    1.十进制和十六进制相互转换 /* 十六进制转十进制 */ var test = FF; var x = parseInt(test ,16); //方法一 x = parseInt('0x'+tes ...

  8. understanding ECMAscript 6 ---- block bindings

    Traditionally, the way variable declarations work has been one tricky part of programming in javascr ...

  9. 使用 StringBuilder

    嘿嘿,请不要说我是偷取,我只是借鉴一下.. String 对象是不可改变的.每次使用 System.String 类中的方法之一时,都要在内存中创建一个新的字符串 对象,这就需要为该新对象分配新的空间 ...

  10. 【java基础】 合并两个类型相同的list

    将两个类型相同的list合并,可以用 addAll(Collection<? extends E> c) import java.util.ArrayList; import java.u ...