h5-注册

<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> 

 

你可能感兴趣的:(h5-注册)