做一个发送验证码按钮，点击后要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. jQuery jqGrid 4.7

    https://jeesite.gitee.io/front/jqGrid/4.7/index.html https://jeesite.gitee.io/front/jqGrid/4.7/jqgri ...

  2. HTML条件注释_关于IE条件注释

    普通的HTML注释形式是 <!-- 注释 --> 而IE5~IE9这5个版本的IE浏览器还另外支持一种特殊的if条件注释(感觉有点类似模板渲染时的语法结构) <!--[if IE]& ...

  3. 我打算用JAVA实现GB/T32960 监控平台的tcp server

    之前是用golang写得 ,因为对golang不是很熟练,打算基于netty再写一个,开源出来. 如果近期时间宽裕,就准备着手了. 有兴趣的朋友也可以留言一起做.

  4. 3dTiles 数据规范详解[3] 内嵌在瓦片文件中的两大数据表

    转载请声明出处:全网@秋意正寒 零.本篇前言 说实话,我很纠结是先介绍瓦片的二进制数据文件结构,还是先介绍这两个重要的表.思前想后,我决定还是先介绍这两个数据表. 因为这两个表不先给读者灌输,那么介绍 ...

  5. 阿里巴巴java-数据库开发手册（2020泰山版）

    阿里巴巴编程规范.数据库命名规范 首先感谢阿里,在此我也分享给小伙伴们学习,下载地址如下: 链接:https://pan.baidu.com/s/19SLpiJmyNEIKuRscftRk9Q 提取码 ...

  6. 四维DP之方格取数

    题目描述 传送门 设有N*N的方格图(N<=20,我们将其中的某些方格中填入正整数,而其他的方格中则放入数字0.如下图所示(见样例): 某人从图的左上角的A(1,1) 点出发,可以向下行走,也可 ...

  7. PE文件格式详解（六）

    0x00 前言 前面两篇讲到了输出表的内容以及涉及如何在hexWorkShop中找到输出表及输入DLL,感觉有几个地方还是没有理解好,比如由数据目录表DataDirectory[16]找到输出表表后以 ...

  8. linux环境下安装 openOffice4并启动服务

    一.背景故事 openOffice是用来做office文档在线预览功能,把office文档转换成pdf交给前端显示. 之前系统开发过程一直没有将springboot服务怼上服务器,所以只安装了wind ...

  9. 从零开始学Electron笔记（四）

    在之前的文章我们介绍了一下Electron的这个remote模块,接下来我们继续说一下Electron的右键菜单的制作. 在我们日常我们使用的软件中都会存在右键菜单的情况,比如我们用到的浏览器,开发所 ...

  10. Scala 面向对象（九）：特质（接口） 二

    1 带有具体实现的特质 说明:和Java中的接口不太一样的是特质中的方法并不一定是抽象的,也可以有非抽象方法(即:实现了的方法). 2 带有特质的对象,动态混入 1)除了可以在类声明时继承特质以外,还 ...