amazeui 验证按钮扩展的实现


Posted in HTML / CSS onAugust 21, 2020

做一个发送验证码按钮,点击后要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 验证按钮扩展的实现的文章就介绍到这了,更多相关amazeui验证按钮 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 #HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 #HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 #HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 #HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 #HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 #HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 #HTML / CSS
You might like
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
python获取android设备的GPS信息脚本分享
2015/03/06 Python
Python进程通信之匿名管道实例讲解
2015/04/11 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
python with语句的原理与用法详解
2020/03/30 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
结构工程研究生求职信
2013/10/13 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
MySQL为id选择合适的数据类型
2021/06/07 MySQL
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
Python实现简单得递归下降Parser
2022/05/02 Python