做一个发送验证码按钮，点击后要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. Glusterfs的安装、创建卷、配置和优化卷、挂载使用

    一.网站推荐 1.https://gluster.readthedocs.io/en/latest/    这是官方的说明网站.这里面有安装Glusterfs原理,安装流程,各种卷的原理.创建方式.以 ...

  2. 使用TransferLearning实现环视图像的角点检测——Tensorflow+MobileNetv2_SSD

    环境说明 依赖环境安装eIQ官方指南: name: eiq_auto channels: - conda-forge - defaults dependencies: - numpy=1.18.1=p ...

  3. 初步了解JVM

    先看一眼JVM虚拟机运行时的内存模型: 1.方法区 Perm(永久代.非堆) 2.虚拟机栈 3.本地方法栈 (Native方法) 4.堆 5.程序计数器 1 首先的问题是:jvm如何知道那些对象需要回 ...

  4. sass安装与教程

    首先下载ruby http://dlsw.baidu.com/sw-search-sp/soft/ff/22711/rubyinstaller_V2.2.2.95_setup.1439890355.e ...

  5. CF833A The Meaningless Game 题解

    题目 Slastyona and her loyal dog Pushok are playing a meaningless game that is indeed very interesting ...

  6. 创建虚拟机和安装centos7 & install oracle

    win7 x64位+VMware12+centos7 x64位+oracle 11g R2安装详解(一) 一.虚拟机安装oracle11g R2的安装环境: 1.win7 x64位          ...

  7. Java编程技术之浅析Java容器技术

    Java容器 集合是一种存储数据的容器,是Java开发中使用最频繁的对象类型之一. 或许提起Collection,都会第一时间意识到List和Set以及Map等相关关键词.因为这几乎是我们日常开发里接 ...

  8. 属性复制神器-mapstruct

    我们之前说到项目中会用到各种object,vo,bo,dto等等.我们需要在不同的对象上复制属性. 一.BeanUtils和PropertyUtils 我们最常用的就是Common包里面的BeanUt ...

  9. drf路由与认证

    目录 一.路由 1 没有继承视图集的视图类 2 继承了视图集的视图类 3 继承自ModelViewSet的路由写法(自动生成) 二.认证 1 drf认证的源码分析 2 自定义认证类的使用 一.路由 三 ...

  10. day04 python入门（变量，基本数据类型）

    python入门学习 来自egon的学习套路 在每次遇到一个新事物的时候,要学三步: xxx是什么? 为什么要有xxx? ​ 大前提:python中所有出现的语法都是为了让计算机能够具有人的某一个功能 ...