做一个发送验证码按钮，点击后要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. Python并发编程理论篇

    Python并发编程理论篇 前言 其实关于Python的并发编程是比较难写的一章,因为涉及到的知识很复杂并且理论偏多,所以在这里我尽量的用一些非常简明的语言来尽可能的将它描述清楚,在学习之前首先要记住 ...

  2. JavaScript基础对象创建模式之单体/单例模式(Singleton)

    首先,单例模式是对象的创建模式之一,此外还包括工厂模式.单例模式的三个特点: 1,该类只有一个实例 2,该类自行创建该实例(在该类内部创建自身的实例对象) 3,向整个系统公开这个实例接口 Java中大 ...

  3. postcss.config.js not found

    https://github.com/ElemeFE/element/issues/10249

  4. JS数据类型判断的几种方法

    JS数据类型判断 JavaScript 中常见数据类型有Number.String.Boolean.Object.Array.Json.Function.Date.RegExp.Error.undef ...

  5. 每日一题 - 剑指 Offer 47. 礼物的最大价值

    题目信息 时间: 2019-07-02 题目链接:Leetcode tag:动态规划 难易程度:中等 题目描述: 在一个 m*n 的棋盘的每一格都放有一个礼物,每个礼物都有一定的价值(价值大于 0). ...

  6. Ocelot网关+IdentityServer4实现API权限认证

    Ocelot是一个用.NET Core实现并且开源的API网关,它功能强大,包括了:路由.请求聚合.服务发现.认证.鉴权.限流熔断.并内置了负载均衡器与Service Fabric.Butterfly ...

  7. Vue-base64移动端PDF展示

    作为一个后端开发,写前端的一些功能也是头大,好在网友强大,网上资源比较多:做一个移动端PDF预览的功能,本来可以通过window.open(),打开的,但是没办法,做后台的小伙伴,传给前端的数据是ba ...

  8. appium移动端自动化测试环境搭建windows-appium-android

    第一步:安装jdk 安装jdk(1.7版本以上) 安装完成设置jdk环境变量(百度查询) cmd命令下键入 java -version命令检查jdk是否安装成功且设置环境变量成功,如下图所示: 第二步 ...

  9. MYSQL 之 JDBC（二）： 数据库连接（二）通过DriverManager获取数据库连接

    通过DriverManager获取数据库连接 修改一下配置文件 driver=com.mysql.cj.jdbc.Driver jdbcUrl=jdbc:mysql://localhost:3306/ ...

  10. scrapy 基础组件专题（一）：scrapy框架中各组件的工作流程

    Scrapy 使用了 Twisted 异步非阻塞网络库来处理网络通讯,整体架构大致如下(绿线是数据流向): Scrapy主要包括了以下组件: 引擎(Scrapy)用来处理整个系统的数据流处理, 触发事 ...