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="frozenui/css/frozen.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="layer/layer.js"></script>
<link href="css/public.css" rel="stylesheet" type="text/css" />
<link href="css/login.css" rel="stylesheet" type="text/css">
<script>
$(window).load(function() {
//$("#status").fadeOut();//fadeOut隐藏，fadeIn显示
//$("#preloader").delay(350).fadeOut("slow");
})
</script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function(e){
var username = $.trim($("#username").val());
var password = $.trim($("#password").val());
if(username == ''){
layer.tips('请输入用户名/邮箱/手机号码','#username', {tips: 1});
return false;
}else if(password == ''){
layer.tips('请输入登录密码','#password', {tips: 1});
return false;
}
});
});
</script>
<body>
<div class="mobile">
<!-- .mobile {
background-color: yellow;
min-width: 320px;
} ·-->
<!--页面加载 开始-->
<div id="preloader">
<!--
#preloader { #status { #status p { .center-text {
position: fixed; position: fixed; top: 70%; text-align: center;
z-index: 2500; z-index: 999999; } background-image: url(../images/loading.jpg);
top: 0; width: 250px; background-repeat: no-repeat;
left: 0; height: 250px; background-position: center top;
right: 0; position: absolute; height: 182px;
bottom: 0; left: 50%; width: 234px;
background-color: #fff; top: 50%; }
z-index: 999999; background-size: 32px 32px;
} margin-top: -125px; .center-text span {
margin-right: 0; font-size: 14px;
margin-bottom: 0; color: #999999;
margin-left: -115px; position: relative;
} top: 170px;
}
-->
<div id="status">
<p class="center-text"><span>拼命加载中···</span></p>
</div>
</div>
<!--页面加载 结束-->
<!--页面加载 结束-->
<!--header 开始-->
<header>
<!-- a,div,header,span {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /*修改a、input和button点击时的蓝色外边框和灰色半透明背景*/
}
.header { .header h2 {
height: 44px; color: #fff;
background: #ff8200; font-size: 16px;
position: relative; font-weight: normal;
z-index: 10; height: 44px;
} line-height: 44px;
text-align: center;
font-weight: bold;
} -->
<div class="header">
<a class="new-a-back" href="javascript:history.back();"> <span><img src="images/iconfont-fanhui.png"></span></a> <!--
.new-a-back { .new-a-back span {
height: 40px; background: url(../images/icon_fh.png) no-repeat 0px 0px/18px 18px;
position: absolute; display: block;
width: 45px; height: 35px;
} text-indent: 17px; 缩进
width: 50px;
color: #FFF;
font-size: 14px;
padding-top: 8px;
margin-left: -10px;
}
.new-a-back span img { .header h2 {
width: 25px; 图片缩放 color: #fff;font-size: 16px;font-weight: normal;height: 44px;line-height: 44px;
} text-align: center;font-weight: bold;
}
-->
<h2>一起惠返利网·登录</h2>
</div>
</header>
<!--header 结束-->
<!--header 结束-->
<!-- .main { .main #frm_login { .main .item {
padding-top: 15px; padding-right: 15px; margin-bottom: 15px;
padding-bottom: 15px; padding-left: 15px; position: relative;
} } width: 100%;
margin-top: 15px;
}
.main .item .txt-username,.main .item .txt-password{ .main .item .txt-input {
font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; background: none repeat scroll 0 0 #fff;
margin-bottom: 10px; border: 1px solid #D1D1D1;
padding-left: 10px; border-radius: 5px;
} color: #252525;
font-size: 14px;
height: 44px;
width: 100%;
}
.main .item .input-close { .main .item-username .input-close {
cursor: pointer; right: 7px;
display: block; }
height: 25px;
position: absolute; .main .item-password .btn-off {
top: 10px; background: url("../images/u_s1.png") no-repeat scroll 0 0/51px 35px;
width: 25px; }
background-attachment: scroll;
background-image: url(../images/u_close.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 25px;
}
-->
<div class="w main">
<form id="frm_login" method="get" action="">
<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> <!-- <b> </b>斜体 -->
</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>
</div>
<div class="item item-login-option"> <!--
.main .item-login-option { .main .item-login-option .aoutlogin {
font-size: 14px; float: left; 就不会占用一行
margin-bottom: 5px; margin-left: 10px;
height: 30px; font-size: 12px;
} color: #666666;
}
.main .item-login-option .retrieve-password { .main .item-login-option .retrieve-password a {
float: right; color: #4eabe8;
text-align: right; font-size: 12px;
width: 50%; text-decoration: none;
margin-right: 10px; }
}
-->
<div class="aoutlogin">
<label class="ui-checkbox ui-checkbox-s">
<input type="checkbox" name="checkbox" checked/>一个月内免登录
</label>
</div>
<span class="retrieve-password"> <a class="" href="getpwd_email.html"> 找回密码</a> </span>
</div>
<div class="ui-btn-wrap"><input name="" type="submit" value="用户登录" class="ui-btn-lg ui-btn-primary" /> </div> <!--
.ui-btn-lg { .ui-btn-primary { .ui-btn-danger {
cursor: pointer; background-clip: padding-box; background-clip: padding-box;
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="register.html">没有账号？立即注册</a> </div>
<div class="item item-login-other"> <!--
.main .item-login-other dt { .main .item-login-other dd { .main .item-login-other dd .qq {
color: #666; margin: 0px; width: 20%;
font-size: 12px; } }
margin-bottom: 13px;
}
.main .item-login-other dd a span {
display: block;
height: 40px;
overflow: hidden;
width: 40px;
}
-->
<dl>
<dt>其它登录方式</dt>
<dd> <a class="qq" href="#"> <span><img alt="" src="images/login_qq.png" width="40" height="40"></span> </a> </dd>
</dl>
</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();
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($("#codeLevel").val()!="" && $("#codeLevel").val()!='0'){
if($("#validateCode").val()!=""){
$("#validateCode").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('');
}
});
});
//设置password字段的值
$('.txt-password').bind('input',function(){
$('#password').val($(this).val());
});
//显隐密码切换
function displayPwd(){
$(".tp-btn").toggle(//切换第一次执行第一个函数，切换第二次执行第二个函数
function(){
$(this).addClass("btn-on");
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();
}
);
}
//监控用户输入
$(":input").bind('input propertychange', function() {//$(":input")所有的 <input> 元素，bind('input propertychange')监听输入框发生变化
if($(this).val()!=""){
$(this).siblings(".input-close").show();
}else{
$(this).siblings(".input-close").hide();
}
});
</script>