实例介绍
【实例简介】xx秒后 重新发送短信验证码 html示例
【实例截图】
【核心代码】
<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="format-detection" content="telephone=no"> <title>账号注册</title> <!-- Set render engine for 360 browser --> <meta name="renderer" content="webkit"> <!-- No Baidu Siteapp--> <meta http-equiv="Cache-Control" content="no-siteapp"/> <!-- <link rel="icon" type="image/png" href="assets/i/favicon.png"> --> <!-- Add to homescreen for Chrome on Android --> <meta name="mobile-web-app-capable" content="yes"> <!-- <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png"> --> <!-- Add to homescreen for Safari on iOS --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Amaze UI"/> <!-- <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png"> --> <!-- Tile icon for Win8 (144x144 tile color) --> <!-- <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png"> --> <meta name="msapplication-TileColor" content="#0e90d2"> <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones --> <!-- <link rel="canonical" href="http://www.example.com/"> --> <link rel="stylesheet" href="css/amazeui.min.css"> <style> html { font-size: 10px; } html,body { background-color: #f0eff4; } body { padding-bottom: 0;margin: 0; padding-top: 49px;} * { padding: 0;margin: 0; } header {position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 49px; background-color: #333; color: #fff;} header .back { position: absolute;top: 0;left: 0; display: inline-block;padding-left: 5px; font-size: 30px; } header p { margin: 0;line-height: 49px; font-size: 16px;text-align: center; } .register { padding: 8px 6px; font-size: 14px;} .res-item {position: relative; width: 100%; border-radius: 4px; margin-bottom: 8px;background-color: #fff; } .res-icon {position: absolute;left: 8px;top: 5px;z-index: 100; display: inline-block;font-size: 18px;color: #9c9c9c; } .res-item .input-item {display: inline-block;width: 100%;padding-left: 31px;height: 40px;border: none; font-size: inherit;} .res-item .input-item:focus { outline-offset: 0; outline: -webkit-focus-ring-color auto -2px; background-color: #fefffe; border: 1px solid #e21945; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(226,25,69,.3); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(226,25,69,0.3); } .res-item .input-item:focus .res-icon { color: #e21945; } .yanzhengma {position: absolute;right: 10px;top: 5px; z-index: 100; display: inline-block;padding: 0.5rem 0.8rem;font-size: 14px; border: none;background-color: #e21945;color: #fff;border-radius: 8px; } .yanzhengma:disabled { background-color: #ddd; } .res-btn { margin-top: 10px;padding: 0 5px; } .res-btn button { background-color: #e21945;font-size: 14px; color: #fff;border-radius: 8px; } .res-btn button:focus { color: #fff; } </style> </head> <body> <!--[if lte IE 9]> <p class="browsehappy">你正在使用<strong>过时</strong>的浏览器,Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a> 以获得更好的体验!</p> <![endif]--> <header> <i class="am-icon-angle-left back"></i> <p>账号注册</p> </header> <div class="register"> <div class="res-item"> <input type="tel" placeholder="手机号" class="input-item mobile"> <i class="res-icon am-icon-phone"></i> </div> <div class="res-item"> <input type="text" placeholder="验证码" class="input-item yanzheng"> <i class="res-icon am-icon-mobile"></i> <button type="button" class="yanzhengma">发送验证码</button> </div> <div class="res-item"> <input type="passWord" placeholder="密码" class="input-item mima"> <i class="res-icon am-icon-check-square-o"></i> </div> <div class="res-item"> <input type="passWord" placeholder="确认密码" class="input-item repeatmima"> <i class="res-icon am-icon-check-circle-o"></i> </div> <div class="res-btn"> <button type="button" id="res-btn" class="am-btn am-btn-block">注册</button> </div> </div> <!--[if (gte IE 9)|!(IE)]><!--> <script src="js/jquery-3.2.1.min.js"></script> <!--<![endif]--> <!--[if lt IE 9]> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script> <script src="/static/wechatMember/js/amazeui.ie8polyfill.min.js"></script> <![endif]--> <script> var times = 10; function roof(){ if(times == 0){ $('.yanzhengma').text('发送验证码(' times 's)'); $('.yanzhengma').prop('disabled',false); $('.yanzhengma').text('发送验证码'); times = 10; return } $('.yanzhengma').text('发送验证码(' times 's)'); times--; setTimeout(roof,1000); } $('.yanzhengma').on('click',function(){ $(this).prop('disabled',true); roof(); }); $('#res-btn').on('click',function(){ var mobile = $('.mobile').val(); var yanzheng = $('.yanzheng').val(); var mima = $('.mima').val(); var repeatmima = $('.repeatmima').val(); if(!mobile){ $('.mobile').focus(); document.querySelector('.mobile').placeholder = '请填写手机号码'; return } if(!yanzheng){ $('.yanzheng').focus(); document.querySelector('.yanzheng').placeholder = '请填写验证码'; return } if(!mima){ $('.mima').focus(); document.querySelector('.mima').placeholder = '请填写密码'; return } if(!repeatmima){ $('.repeatmima').focus(); document.querySelector('.repeatmima').placeholder = '请填写重复密码'; return } if(repeatmima !== mima){ $('.repeatmima').focus(); document.querySelector('.repeatmima').value = ''; document.querySelector('.repeatmima').placeholder = '两次密码不一致'; return } $(this).prop('disabled',true); alert('注册成功'); }) </script> </body> </html>
好例子网口号:伸出你的我的手 — 分享!
小贴士
感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论