小编给大家分享一下在html5中如何通过amazeui验证按钮扩展功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

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

代码如下：

<!DOCTYPEhtml><metaname="description"content=""><metaname="keywords"content=""><linkhref="AmazeUI/css/amazeui.min.css"rel="stylesheet"></head><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">.<title>Examples</title><body><inputtype="text"class="phone"/><buttontype="button"class="am-btnam-btn-primarybtn-loading-example"data-am-loading="{spinner:'circle-o-notch',loadingText:'正在发送',resetText:'重新发送'}">发送动态验证码</button><scriptsrc="jquery2.3.0.js"></script><scriptsrc="AmazeUI/js/amazeui.min.js"></script><scriptsrc="http://cdn.bootcss.com/layer/2.4/layer.js"></script><script>var_interval;varbb=90functiontimedown(){bb--;varcc='重新发送(';$(".btn-loading-example").text(cc+bb+')');if(bb<=0){clearInterval(_interval);returnbb=60;}}$('.btn-loading-example').click(function(){varphone=/^1[3|4|5|7|8][0-9]{9}$/;if(!phone.test($(".phone").val())){layer.msg('无效的手机号码');returnfalse;}timedown();_interval=setInterval(timedown,1000);var$btn=$(this)$btn.button('loading');setTimeout(function(){$btn.button('reset');},60000);});</script></body></html>

看完了这篇文章，相信你对“在html5中如何通过amazeui验证按钮扩展功能”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！