做一个发送验证码按钮，点击后要60秒之后才能再次点击，利用原有的amazeui样式做的一些扩展，当然主题功能的代码全都是自己写的，也可以脱离amazeUi 自己完成这个功能按钮

代码如下：

<!DOCTYPE html>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="Amaze UI/css/amazeui.min.css" rel="stylesheet">

</head>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">.

<title>Examples</title>

<body style="text-align: center;">

<input type="text" class="phone" />

<button type="button" class="am-btn am-btn-primary btn-loading-example" data-am-loading="{spinner: 'circle-o-notch', loadingText: '正在发送', resetText: '重新发送'}">发送动态验证码</button>

<script src="jquery2.3.0.js"></script>

<script src="Amaze UI/js/amazeui.min.js"></script>

<script src="http://cdn.bootcss.com/layer/2.4/layer.js"></script>

<script>

  var _interval;

  var bb = 90

  function timedown(){

      bb--;

      var cc = '重新发送(';

        $(".btn-loading-example").text(cc+bb+')');

      if(bb<=0){

        clearInterval(_interval);

        return bb=60;

      }

  }

  $('.btn-loading-example').click(function () {

    var phone = /^1[3|4|5|7|8][0-9]{9}$/;

   if(!phone.test($(".phone").val()))

     {

      layer.msg('无效的手机号码');

       return false;

    }

    timedown();

  _interval = setInterval(timedown,1000);

  var $btn = $(this)

  $btn.button('loading');

    setTimeout(function(){

      $btn.button('reset');

  }, 60000);

});

</script>

</body>

</html>

amazeui 验证按钮扩展的更多相关文章

  1. 验证mySqli扩展是否

    <?php// createTime: 2016/9/9 21:57 //验证mySqli扩展是否//phpinfo(); //2.检测扩展是否已经加载//var_dump(extension_ ...

  2. hackbar增强版 & 在Firefox上安装未通过验证的扩展

    hackbar是Firefox的经典插件之一.介绍如下(懒得翻译了) This toolbar will help you in testing sql injections, XSS holes a ...

  3. React实战之60s倒计时按钮（发送短信验证按钮）

    React实战之60s倒计时按钮——短信验证按钮 导入:(antd组件——Form表单) import { Button, Form, Input } from 'antd'; const FormI ...

  4. jquery validate验证插件扩展方法(转)

    /***************************************************************** jQuery Validate扩展验证方法 (linjq) *** ...

  5. 表单验证Jquery扩展方法类

    /** 表单数据验证 **/ $.fn.Validform = function () { var Validatemsg = ""; var Validateflag = tru ...

  6. firefox无法安装未通过验证的扩展

    firefox43版本无法安装未验证附加组件,利用以下方法: 1.进入firefox  about:config页面中 2.搜索xpinstall.signatures.required,将值改为fa ...

  7. EasyUI表单验证插件扩展

    $.extend($.fn.validatebox.defaults.rules, { regex: { validator: function (value, param) { var regex ...

  8. MVC 验证规则扩展（当RoleID 属性值为A,B 时，Email 属性必填）

    public class RoleRequiredAttribute : ValidationAttribute, IClientValidatable { public string RoleIDS ...

  9. Swift3 倒计时按钮扩展

    extension UIButton{ func overrideSelf(){ self.setTitle("验证码", for: .normal) self.titleLabe ...

随机推荐

  1. div嵌套引起的内层margin-top对外层div起作用

    嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...

  2. 半导体质量管理＿Stargate

    监控您的SPC活动 生产质量指标概述 应定期评估统计信息,以便您可以更好地利用统计过程控制.通过这种方式,您可以快速发现质量缺陷并采取适当的措施做出反应.LineWorks STARGATE提供了生产 ...

  3. HTML5（五）Geolocation

    HTML5 Geolocation 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 注意 ...

  4. CF1215D Ticket Game（思维，博弈）

    题目 传送门:https://www.luogu.com.cn/problem/CF1215D Idea 一列数,保证能分成左右两部分,其中有若干个数字被抹掉,两个人轮流填数,如果在把这些空缺的数字填 ...

  5. day36 解决粘包问题

    目录 一.tcp粘包问题出现的原因 二.解决粘包问题low的办法 三.egon式解决粘包问题 四.实现并发 1 tcp 2 udp 一.tcp粘包问题出现的原因 前引: tcp的客户端与服务端进行通信 ...

  6. 北航2018级算法期末上机实录随笔1st

    简单记录下题目类型和做题情况,理性复习同时也希望提供一些参考 题目描述 共计八个题目,按照助教的划分,题目分类如下 一个签到(二分查找),两个板子(活动选择.KMP(洛谷kmp模板题)),一个板子变形 ...

  7. 错题重错之枪战Maf

    题目描述 有 n 个人,用1∼n 进行编号,每个人手里有一把手枪.一开始所有人都选定一个人瞄准(有可能瞄准自己).然后他们按某个顺序开枪,且任意时刻只有一个人开枪.因此,对于不同的开枪顺序,最后死的人 ...

  8. MYSQL 之 JDBC（十）： JDBC的元数据

    可以从Connection对象中获得有关数据库管理系统的各种信息 获取这些信息的方法都是在DatabaseMetaData类中. DatabaseMetaData:描述数据库的元数据对象 Result ...

  9. 数据可视化之powerBI基础（五）深入了解Power BI的跨页钻取交互

    https://zhuanlan.zhihu.com/p/79036123 在 PowerBI 中还有一种有趣的交互方式:跨页钻取.它可以通过点击某个数据点,钻取到另一个页面,进一步展示该数据点的详细 ...

  10. MapReduce的运行流程概述

    MapReduce处理数据的大致流程 ①InputFormat调用RecordReader,从输入目录的文件中,读取一组数据,封装为keyin-valuein对象 ②将封装好的key-value,交给 ...