注册获取验证码倒计时DEMO
来源:互联网 发布:sys python 编辑:程序博客网 时间:2024/05/17 02:35
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册获取验证码倒计时DOME</title><script src="js/jquery-1.4.2.min.js"></script><script src="js/Pandora.AutoSize.js"></script><script type="text/javascript">//自适应(function($) { $.fn.extend({ AutoSize: function() { var element = $(this); auto(); function auto() { var width = $(window).width(), height = $(window).height(); $("html").css("font-size", width / 15); $(element).width(width).height(height); }; $(window).resize(auto); } });})(jQuery);</script><style>html { font-size: 24px; }body { margin: 0; padding: 0; font-family: "microsoft yahei", "simhei"; }h1, h2, h3, h4, i, em, p { margin: 0; padding: 0; font-style: normal; font-weight: normal; }ul, li { list-style: none; margin: 0; padding: 0; }span, article { margin: 0; padding: 0; }a { color: inherit; text-decoration: none; outline: none; }.hdt { text-indent: -999em; overflow: hidden; }.hide { display: none; }.ico { background-image: url(../images/ico.png) !important; }input { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; border: none; background: none; margin: 0; padding: 0; font-family: "microsoft yahei", "simhei"; outline: none; }select { border: none; background: none; margin: 0; padding: 0; font-family: "microsoft yahei", "simhei"; outline: none; }.container { width: 740px; margin: 0 auto; overflow-x: hidden; }/*大背景*/body { background-color: #eae8e6; }/*头部logo*/.container { background-color: #eae8e6; margin: 0 auto; width: 740px; height: 100vh; }.container .tittle { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcYAAACxCAYAAABeMh3kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM5MkFCNDUxNzg5ODExRTZCNTY4QjExQTA2QThCQUNCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM5MkFCNDUyNzg5ODExRTZCNTY4QjExQTA2QThCQUNCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzkyQUI0NEY3ODk4MTFFNkI1NjhCMTFBMDZBOEJBQ0IiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzkyQUI0NTA3ODk4MTFFNkI1NjhCMTFBMDZBOEJBQ0IiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7sTc9+AAAPM0lEQVR42uzd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") no-repeat top center; width: 422px; height: 180px; text-indent: -999rem; margin: 10vh auto; }.container:before { content: ""; width: 1px; height: 1px; display: block; }/*中间注册部分*/.container .middle { margin: 0 auto; width: 488px; }.container input { border-bottom: 1px solid #6b6968; color: #6b6968; width: 100%; height: 60px; line-height: 60px; font-size: 1.16rem; text-align: center; }.middle li { margin: 2vh 0; clear: both; height: 60px; }.container .middle .sex { margin: 44px 0 0 71px; width: 100%; }.container .middle .sex .active input { -webkit-transition: all .2s linear; }.container .middle .sex input[type="button"] { width: 168px; height: 61px; line-height: 61px; text-align: center; font-size: 1.04rem; }.container .middle .sex .sex_select.active input { background-color: #595757; color: #FFF; border: 1px solid #595757; }.container .middle .sex .ipt { color: #fff; background-color: #eae8e6; color: #595757; border: 1px solid #595757; }.container .middle .sex .man { float: left; }.container .middle .sex .man input { border-bottom-left-radius: 34px; border-top-left-radius: 34px; }.container .middle .sex .women { float: left; }.container .middle .sex .women input { border-top-right-radius: 34px; border-bottom-right-radius: 34px; }.container .middle .verification .ipt_code { width: 250px; height: 49px; font-size: 1.16rem; }.container .middle .verification .ipt_gain { border: none; width: 200px; height: 59px; background-color: #ff6464; color: #fff; border-radius: 30px; font-size: 1.16rem; line-height: 59px; outline: none; -webkit-transition: all .2s linear; }.container .middle .verification .ipt_gain.click { background-color: #ccc; pointer-events: none; }.container .middle .ipt_register { width: 100%; height: 78px; background-color: #8fc31f; border: none; border-radius: 50px; font-size: 1.16rem; line-height: 78px; color: #fff; outline: none; }</style> <script type="text/javascript"> $(function () { $('.ipt_gain').click(function () { var phone = $('#telnum').val(); var pwd = $('#passnum').val(); var yzm = $('.ipt_code').val(); if (phone == '') { alert("请输入手机号"); $('.ipt_gain').css('disabled', 'disabled'); return; } else if (pwd == '') { alert("请输入密码"); return; } else { var time = 60; var timeST = setInterval(function () { if (time > 0) { time--; $(".ipt_gain").val(time + "S").addClass("click"); } else { $(".ipt_gain").val("获取验证码").removeClass("click"); clearInterval(timeST); }; }, 1000); $('.ipt_gain').css('disabled', false); } }) $('.ipt_register').click(function () { if ($('.ipt_code').val() == '') { alert("请输入验证码"); return; } }) }) </script></head><body> <div class="container"> <!--头部logo--> <h1 class="tittle"></h1> <!--中间注册--> <ul class="middle"> <li> <input id="telnum" type="tel" placeholder="请填写您的电话号码" maxlength="11"/> </li> <li> <input id="passnum" type="password" placeholder="请输入您的密码" /> </li> <li class="verification"> <div> <input type="tel" class="ipt_code" placeholder="请输入验证码" /> <input type="button" class="ipt_gain" value="获取验证码" /> </div> </li> <li> <input type="submit" class="ipt_register" value="注册"/> </li> </ul> </div> </body></html>
0 0
- 注册获取验证码倒计时DEMO
- android 注册、获取验证码倒计时类
- android获取手机验证码界面以及倒计时实现demo
- binbinyang-----Android获取验证码后倒计时程序--注册模块
- 手机注册登录时,获取验证码之后倒计时
- 注册登录页面的获取验证码倒计时
- 获取验证码倒计时
- 获取验证码倒计时
- 获取验证码倒计时
- 倒计时获取验证码
- 获取验证码倒计时
- 获取验证码倒计时
- 获取验证码倒计时
- 获取验证码倒计时
- 获取验证码倒计时
- 获取验证码倒计时
- 注册时手机获取验证码倒计时,使用CountDownTimer类轻松实现倒计时功能
- 倒计时(获取验证码的倒计时)
- iOS微信安装包瘦身
- MyBatis的foreach语句详解
- PHP - 实现多语言自动切换
- 【基于libRTMP的流媒体直播之 AAC、H264 推送】
- 动态规划
- 注册获取验证码倒计时DEMO
- 三.Android静态和动态布局
- SLAM代码(SVO ros )
- EMC与电容-电容参数意义、各电容的特点及应用
- listSelector
- 解决so库导入AndroidStudio无法被调用的问题
- iOS,面试必看,最全梳理
- 音视频同步原理解析;音频编码和解码原理
- html中嵌入SVG文件