做一个发送验证码按钮，点击后要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. jupyter lab最强代码补全插件

    1 简介 提起kite相信不少朋友都有印象,它是一个功能非常强大的代码补全工具,目前可用于Python与javascript,为许多知名的编辑器譬如Vs Code.Pycharm提供对应的插件. 图1 ...

  2. MySQL 字符串索引优化方案

    字符串建立索引的优化 1. 建立前缀索引 假设建立一个支持邮箱登录的用户表,对于邮件字段来说,可以有以下几种建立索引的方式: 直接对整个字符串建立索引 alter table SUser add in ...

  3. 题解 P3870 【[TJOI2009]开关】/基础分块学习小结

    直接进入正题: 分块: 分块分块,就是把一个长串东西,分为许多块,这样,我们就可以在操作一个区间的时候,对于在区间里面完整的块,直接操作块,不完整的直接操作即可,因为不完整,再加上一个块本身就不大,复 ...

  4. python之shutil模块的使用

    shutil模块 shutil模块是一种高级的文件操作工具,其对文件的复制与删除操作非常强大,shutil 名字来源于 shell utilities,该模块拥有许多文件(夹)操作的功能,包括复制.移 ...

  5. 阿里云Linux CentOS8.1 64位服务器安装LNMP(Linux+Nginx+MySQL+PHP) 并发调试之php-fpm配置及其与Nginx的通信

    一.php-fpm的配置 1. php-fpm的配置,首先要关注进程数量. php-fpm的进程管理方式有三种:static.dynamic.ondemand. static方式,开启固定数量(pm. ...

  6. node实现文件属性批量修改(文件名)

    前言 书接上回,我们实现了批量修改文件的时间,但是却没有实现文件名称的批量修改,是因为我也说过,没有界面的话直接在命令行实现显得有点繁琐,所以我们就通过接口+界面的方式来实现我们这个小需求吧.所以,闲 ...

  7. css3支持动画吗？css3可以用于网页动画的展现吗

    CSS3 主要可以分为几个模块:边框和背景,渐变,文字特效,字体,2D/3D转换,动画(过渡动画和动画),选择器,盒模型,多列布局,用户界面. css3动画有2类:一种是transition的,另一种 ...

  8. SQL基础随记1 SQL分类 常用函数 ALL ANY EXISTS IN 约束

    SQL基础随记1 SQL分类 常用函数 ALL ANY EXISTS IN 约束   其实这里知识不难,只是好久不接触突然被问的话有时还真的一时答不上,自己写一遍胜过盲扫.当然,也有些常读常新的地方会 ...

  9. [NOI2003]逃学的小孩 （贪心+树的直径+暴力枚举）

    Input 第一行是两个整数N(3 <= N <= 200000)和M,分别表示居住点总数和街道总数.以下M行,每行给出一条街道的信息.第i+1行包含整数Ui.Vi.Ti(1<=Ui ...

  10. Django项目后台不挂断运行

    Django项目后台不挂断运行 方法一: 1.进入项目目录下,运行下面程序: nohup python manage.py runserver 0.0.0.0:5008 & nohup(no ...