<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="m.178hui.com" /> <meta name="applicable-device" content="mobile" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <title>返利网注册 — 一起惠返利网·触摸版</title> <link href="css/public.css" rel="stylesheet" type="text/css" /> <link href="css/login.css" rel="stylesheet" type="text/css"> <script src="js/jquery-1.8.3.min.js"></script> <script> $(window).load(function() { $("#status").fadeOut(); $("#preloader").delay(350).fadeOut("slow"); }) </script> </head> <body> <div class="mobile"> <!--页面加载 开始--> <div id="preloader"> <div id="status"> <p class="center-text"><span>拼命加载中···</span></p> </div> </div> <!--页面加载 结束--> <!--header 开始--> <header> <div class="header"> <a class="new-a-back" href="javascript:history.back();"> <span><img src="images/iconfont-fanhui.png"></span> </a> <h2>一起惠返利网·注册</h2> </div> </header> <!--header 结束--> <!-- .w { .main { background-color: #FFFFFF; padding-top: 15px; float: left; padding-bottom: 15px; min-width: 320px; } width: 97%; margin-top: 1%; margin-right: 1.5%; margin-bottom: 1%; margin-left: 1.5%; } --> <div class="w main"> <form id="frm_login" method="post" action=""> <!-- .main #frm_login { .main .item { padding-right: 15px; margin-bottom: 15px; padding-left: 15px; position: relative; } width: 100%; margin-top: 15px; } .main .item .txt-username,.main .item .txt-password,.main .item .txt-password_PwdTwo,.main .item .txt-password_PwdThree,.main .item .txt-captcha { font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; margin-bottom: 10px; padding-left: 10px; } .main .item .txt-input { background: none repeat scroll 0 0 #fff; border: 1px solid #D1D1D1; border-radius: 5px; color: #252525; font-size: 14px; height: 44px; width: 100%; } --> <div class="item item-username"> <input id="username" class="txt-input txt-username" type="text" placeholder="请输入用户名" value="" name="username"> <b class="input-close" style="display: none;"></b> <!-- 叉叉 --> <!--.main .item .input-close { cursor: pointer; display: block; height: 25px; position: absolute; top: 10px; width: 25px; background-attachment: scroll; background-image: url(../images/u_close.png); background-repeat: no-repeat; background-position: center center; background-size: 25px; --> </div> <div class="item item-password"> <input id="password" class="txt-input txt-password ciphertext" type="password" placeholder="请输入密码" name="password" style="display: inline;"> <input id="ptext" class="txt-input txt-password plaintext" type="text" placeholder="请输入密码" style="display: none;" name="ptext"> <b class="tp-btn btn-off"></b> <!-- 密码明文显示 --> <!-- .main .item-password .tp-btn { .main .item-password .btn-off { cursor: pointer; background: url("../images/u_s1.png") no-repeat scroll 0 0/51px 35px; display: block; } height: 35px; position: absolute; right: 10px; top: 8px; width: 51px; z-index: 1; } --> </div> <div class="item item-password"> <input id="password_PwdTwo" class="txt-input txt-password_PwdTwo ciphertext_PwdTwo" type="password" placeholder="确认密码" name="password_PwdTwo" style="display: inline;"> <input id="ptext_PwdTwo" class="txt-input txt-password_PwdTwo plaintext_PwdTwo" type="text" placeholder="确认密码" style="display: none;" name="ptext_PwdTwo"> <b class="tp-btn_PwdTwo btn-off_PwdTwo"></b> <!-- .main .item-password .tp-btn_PwdTwo { .main .item-password .btn-off_PwdTwo { cursor: pointer; background: url("../images/u_s1.png") no-repeat scroll 0 0/51px 35px; display: block; } height: 35px; position: absolute; right: 10px; top: 8px; width: 51px; z-index: 1; } --> </div> <div class="item item-username"> <input id="username" class="txt-input txt-username" type="text" placeholder="请输入邮箱" value="" name="username"> <b class="input-close" style="display:none;"></b> </div> <div class="item item-username"> <input id="username" class="txt-input txt-username" type="text" placeholder="请输入QQ号码" value="" name="username"> <b class="input-close" style="display:none;"></b> </div> <div class="item item-captcha"> <!-- .main .item-captcha { .main .item-captcha .input-info { .main .item-captcha .input-close { margin-bottom: 10px; margin-bottom: 10px; right: 79px; } } } .main .item-captcha #captcha-img { border-left: 1px solid #d7d7d7; height: 25px; padding-left: 7px; position: absolute; right: 0; top: 9px; width: 79px; } --> <div class="input-info"> <input id="validateCode" class="txt-input txt-captcha" type="text" placeholder="验证码" autocomplete="off" maxlength="6" size="11"> <b id="validateCodeclose" class="input-close" onClick="validateCodeclose();" style="display: block; margin-right:15px;"></b> <!-- 叉叉 --> <span id="captcha-img"> <img id="code" src="images/code.jpg" style="width:63px;height:25px;" onClick="closeAndFlush();"> </span> </div> <!-- .main .item-captcha .err-tips { .main .item-captcha .err-tips a { color: #848689; color: #0052ce; font-size: 12px; text-decoration: none; margin: 13px 0 0px; } } --> <div class="err-tips"> 注册即视为同意 <a target="_blank" href="#">用户服务协议</a> </div> </div> <div class="ui-btn-wrap"> <a class="ui-btn-lg ui-btn-primary" href="#">用户注册</a> </div> <!-- .ui-btn-wrap { .ui-btn-lg { .ui-btn-primary { .ui-btn-danger:visited { padding-top: 5px; cursor: pointer; background-clip: padding-box; background-clip: padding-box; padding-bottom: 10px; border-radius: 5px; background-color: #4eabe8; background-color: #de3b8a; } display: block; border-color: #4eabe8; border-color: #de3b8a; font-size: 14px; color: #fff; color: #fff; height: 40px; text-decoration: none; } line-height: 40px; } width: 100%; text-align: center; text-decoration: none; } --> <div class="ui-btn-wrap"> <a class="ui-btn-lg ui-btn-danger" href="login.html">已有账号?立即登录</a> </div> </form> </div> <div class="m_user w"> <a href="login.html">登录</a> <a href="register.html">注册</a> <a href="#">返回顶部</a> </div> <div class="footer w"> <a href="#"><div class="ico_img"><img src="images/178hui-app.png"></div><span style="color:#00bb9c">客户端</span></a> <a href="index.html"><div class="ico_img"><img src="images/178hui-shouji.png"></div><span style="color:#eb4f38">触摸版</span></a> <a href="#"><div class="ico_img"><img src="images/178hui-diannao.png"></div><span>电脑版</span></a> </div> <div class="copyright">Copyright © 2012-2015 一起惠返利网 m.178hui.com 版权所有</div> </div> </body> </html> <script type="text/javascript" > $(function() { $(".input-close").hide(); displayPwd(); displayPwd_PwdTwo(); displayClearBtn(); setTimeout(displayClearBtn, 200 ); //延迟显示,应对浏览器记住密码 }); //是否显示清除按钮 function displayClearBtn(){ if(document.getElementById("username").value != ''){ $("#username").siblings(".input-close").show(); } if(document.getElementById("password").value != ''){ $(".ciphertext").siblings(".input-close").show(); } if(document.getElementById("password_PwdTwo").value != ''){ $(".ciphertext_PwdTwo").siblings(".input-close").show(); } } //清除input内容 $('.input-close').click(function(e){ $(e.target).parent().find(":input").val(""); $(e.target).hide(); $($(e.target).parent().find(":input")).each(function(i){ if(this.id=="ptext" || this.id=="password"){ $("#password").val(''); $("#ptext").val(''); } if(this.id=="ptext_PwdTwo" || this.id=="password_PwdTwo"){ $("#password_PwdTwo").val(''); $("#ptext_PwdTwo").val(''); } }); }); //设置password字段的值 $('.txt-password').bind('input',function(){ $('#password').val($(this).val()); }); $('.txt-password_PwdTwo').bind('input',function(){ $('#password_PwdTwo').val($(this).val()); }); //显隐密码切换 function displayPwd(){ $(".tp-btn").toggle( function(){ $(this).addClass("btn-on"); /* .main .item-password .btn-on { background: url("../images/u_s2.png") no-repeat scroll 0 0/51px 35px; } */ var textInput = $(this).siblings(".plaintext"); var pwdInput = $(this).siblings(".ciphertext"); pwdInput.hide(); textInput.val(pwdInput.val()).show().focusEnd(); }, function(){ $(this).removeClass("btn-on"); var textInput = $(this).siblings(".plaintext"); var pwdInput = $(this).siblings(".ciphertext"); textInput.hide(); pwdInput.val(textInput.val()).show().focusEnd(); } ); } //显隐密码切换 function displayPwd_PwdTwo(){ $(".tp-btn_PwdTwo").toggle( function(){ $(this).addClass("btn-on_PwdTwo"); var textInput = $(this).siblings(".plaintext_PwdTwo"); var pwdInput = $(this).siblings(".ciphertext_PwdTwo"); pwdInput.hide(); textInput.val(pwdInput.val()).show().focusEnd(); }, function(){ $(this).removeClass("btn-on_PwdTwo"); var textInput = $(this).siblings(".plaintext_PwdTwo"); var pwdInput = $(this).siblings(".ciphertext_PwdTwo"); textInput.hide(); pwdInput.val(textInput.val()).show().focusEnd(); } ); } //监控用户输入 $(":input").bind('input propertychange', function() { if($(this).val()!=""){ $(this).siblings(".input-close").show(); }else{ $(this).siblings(".input-close").hide(); } }); </script>