<!doctype html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>蓄电池智能远程运维系统</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<link rel="stylesheet" href="mobilCss/jquery.mobile-1.4.5.min.css" />
|
<link rel="stylesheet" type="text/css" href="../js/verify/css/verify.css">
|
<link rel="stylesheet" type="text/css" href="my/loginm.css">
|
<script type="text/javascript" src="mobilJs/jquery-1.8.2.js"></script>
|
<script type="text/javascript" src="mobilJs/jquery.mobile-1.4.5.min.js"></script>
|
<style type="text/css">
|
.icon-user{
|
position: absolute;
|
margin-left:6px;
|
margin-top: 19px;
|
background-image: url(../image/user_ac_bg.gif); /*引入图片图片*/
|
background-repeat: no-repeat; /*设置图片不重复*/
|
background-position: 0px 0px; /*图片显示的位置*/
|
width: 40px; /*设置图片显示的宽*/
|
height: 40px; /*图片显示的高*/
|
min-height: 3em;
|
}
|
|
.icon-pass{
|
position: absolute;
|
margin-left:6px;
|
margin-top: 19px;
|
background-image: url(../image/psd_ac_bg.gif); /*引入图片图片*/
|
background-repeat: no-repeat; /*设置图片不重复*/
|
background-position: 0px 0px; /*图片显示的位置*/
|
width: 40px; /*设置图片显示的宽*/
|
height: 40px; /*图片显示的高*/
|
min-height: 3em;
|
}
|
|
input:-webkit-autofill {
|
-webkit-box-shadow: 0 0 0px 1000px white inset;
|
}
|
|
</style>
|
</head>
|
|
<body>
|
<div id="main">
|
<div data-role="page" id="main_cont" style="background:url(my/images/tieta.jpg);background-size:100% 100%;">
|
<div data-role="content" class="ui-content">
|
<h3 style="text-align:center;color: #E2DAE2;text-shadow:none;">蓄电池智能远程运维系统</h3>
|
<form method="post" id="register">
|
<label for="user" style="color:#E2DAE2">用户名：</label>
|
<i class="icon-user"></i>
|
<input id="user" data-icon="star" name="user" type="text"placeholder="请输入用户名" autofocus style="min-height:3.2em;text-indent: 1.5em;" />
|
<label for="password" style="color:#E2DAE2">密 码：</label>
|
<i class="icon-pass"></i>
|
<input id="password" name="password" type="password" placeholder="请输入密码" style="min-height:3.2em;text-indent:1.5em;" />
|
<p></p>
|
<div data-role="controlgroup">
|
<label for="check" style="color:#E2DAE2">记住密码</label>
|
<input id="check" name="check" type="checkbox" checked="checked" data-role="none" alt=""/>
|
<div style="display:inline-block;color:#E2DAE2">记住密码</div>
|
<span id="msg" style="float:right;color:red;text-shadow:none;"></span>
|
</div>
|
<input id="sub" type="button" data-role="button" value="登录" />
|
</form>
|
<!-- 验证码登陆面板 -->
|
<div class="hdw-dialog hdw-dialog-hide" id="lVerify-dialog">
|
<div class="hdw-dialog-container">
|
<div class="hdw-dialog-bg"></div>
|
<div class="hdw-dialog-content hdw-dialog-width270-125">
|
<div class="hdw-dialog-content-container">
|
<div id="lVerify" ></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
<script type="text/javascript" src="../js/base64.js"></script>
|
<script type="text/javascript" src="../js/MD5.js"></script>
|
<script type="text/javascript" src="../js/verify/js/verify.min.js"></script>
|
<script type="text/javascript">
|
//按钮触发事件
|
document.getElementById("sub").onclick = function() {
|
var user = document.getElementById("user").value.trim();
|
var password = document.getElementById("password").value.trim();
|
|
if (user=null||user == "" || user.length < 1) {
|
document.getElementById("msg").innerHTML = "请输入用户名";
|
} else if (password=null||password == "" || password.length < 1) {
|
document.getElementById("msg").innerHTML = "请输入密码";
|
} else {
|
$('#lVerify-dialog').removeClass('hdw-dialog-hide'); // 显示拖动验证数据
|
initVerify();
|
//checkuser();
|
}
|
|
};
|
|
// 点击空白区域关闭验证
|
$('#lVerify-dialog .hdw-dialog-bg').click(function() {
|
$('#sub').children('.faa-spin').css('visibility', 'hidden');
|
$('#sub').removeClass('page-loading');
|
$('#lVerify-dialog').addClass('hdw-dialog-hide');
|
});
|
|
//校验用户名密码是否正确
|
function checkuser() {
|
var user = document.getElementById("user").value;
|
var password = document.getElementById("password").value;
|
var num = $('#check').attr('checked')?1:0;
|
password = hex_md5(password);
|
$.post(
|
"../LoginAction_login",
|
"uinf.UName="+user+"&uinf.Upassword="+password+"&uinf.UId="+num,
|
function(data) {
|
console.info(data);
|
data = eval("(" + data.result + ")");
|
console.info(data);
|
if (data.code == 0) {
|
document.getElementById("msg").innerHTML = data.msg;
|
} else {
|
window.location.href = "index.html";
|
}
|
}).error(function(){
|
document.getElementById("msg").innerHTML = "登录异常,请检查网络连接!!";
|
});
|
}
|
|
//页面加载时检查cookie
|
window.load = checkCookie();
|
|
function getCookie(c_name){ //根据分隔符取每个变量的值
|
if (document.cookie.length > 0) {
|
c_start = document.cookie.indexOf(c_name + "=");
|
if (c_start != -1) {
|
c_start = c_start + c_name.length + 1;
|
c_end = document.cookie.indexOf("^", c_start);
|
if (c_end == -1)
|
c_end = document.cookie.length;
|
return unescape(document.cookie.substring(c_start, c_end));
|
}
|
}
|
return "";
|
}
|
|
//设置cookie中的用户名以及密码
|
function setCookie(c_name, n_value, p_name, p_value, expiredays) //设置cookie
|
{
|
var exdate = new Date();
|
exdate.setDate(exdate.getDate() + expiredays);
|
document.cookie = c_name
|
+ "="
|
+ escape(n_value)
|
+ "^"
|
+ p_name
|
+ "="
|
+ escape(p_value)
|
+ ((expiredays == null) ? "" : "^;expires="
|
+ exdate.toGMTString());
|
//console.log(document.cookie);
|
}
|
|
function checkCookie() //检测cookie是否存在，如果存在则直接读取，否则创建新的cookie
|
{
|
var temp = getCookie("user").split(';')[0];
|
var decodeStr=Base64.decode(temp);
|
//console.info(decodeStr);
|
if(decodeStr.length>0){
|
var obj = eval("("+decodeStr+")");
|
$('#user').val(obj.UName);
|
$('#password').val(obj.USnId);
|
}
|
}
|
|
function cleanCookie(c_name, p_name) { //使cookie过期
|
document.cookie = c_name + "=" + ";" + p_name + "="
|
+ ";expires=Thu, 01-Jan-70 00:00:01 GMT";
|
//console.info("删除成功");
|
}
|
// 初始化verify拖动验证
|
|
function initVerify() {
|
// 清空内容
|
$('#lVerify').text('');
|
// 配置拖动验证图像
|
$('#lVerify').pointsVerify({
|
defaultNum : 4, //默认的文字数量
|
checkNum : 2, //校对的文字数量
|
vSpace : 5, //间隔
|
imgName : ['verify2.jpg'],
|
imgSize : {
|
width: '270px',
|
height: '178px',
|
},
|
blockSize : {
|
width: '40px',
|
height: '40px',
|
},
|
barSize : {
|
width : '270px',
|
height : '40px',
|
},
|
ready : function() {
|
|
},
|
success : function() {
|
$('#lVerify-dialog').addClass('hdw-dialog-hide'); // 隐藏验证
|
checkuser(); // 验证用户
|
},
|
error : function() {
|
// alert('验证失败！');
|
}
|
});
|
}
|
|
//拦截安卓回退按钮
|
history.pushState(null, null, location.href);
|
window.addEventListener('popstate', function(event) {
|
history.pushState(null, null, location.href );
|
//此处加入回退时你要执行的代码
|
});
|
</script>
|
</html>
|
