amazeui 验证按钮扩展的实现

2024-11-2 22:13| 发布者: 2ae29| 查看: 48| 评论: 0

摘要: 做一个发送验证码按钮，点击后要60秒之后才气再次点击，利用原有的amazeui样式做的一些扩展，固然主题功能的代码全都是自己写的，也可以脱离amazeUi 自己完成这个功能按钮代码如下： [code] <!DOCTYPE html> <meta

做一个发送验证码按钮，点击后要60秒之后才气再次点击，利用原有的amazeui样式做的一些扩展，固然主题功能的代码全都是自己写的，也可以脱离amazeUi 自己完成这个功能按钮

代码如下：

[code] <!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>[/code]

到此这篇关于amazeui 验证按钮扩展的实现的文章就介绍到这了,更多相关amazeui验证按钮内容请搜刮脚本之家以前的文章或继承浏览下面的相关文章，盼望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/741771.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：前端H5 Video常见使用场景简介下一篇：AmazeUI的JS表单验证框架实战示例分享

账号		自动登录	找回密码
密码			立即注册

amazeui 验证按钮扩展的实现

相关分类

站长推荐 /6