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实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 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
基于mysql的bbs设计(三)
2006/10/09 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
yii数据库的查询方法
2015/12/28 PHP
document.all与WEB标准
2020/05/13 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
12步教你理解Python装饰器
2016/02/25 Python
python常用函数详解
2016/09/13 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
什么是Python中的顺序表
2020/06/02 Python
高中三年学习生活的自我评价
2013/10/10 职场文书
物业保安主管岗位职责
2013/12/25 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
组织委员竞选稿
2015/11/21 职场文书
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers