<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<style type="text/css">
.login{width:390px;height:290px;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0);background-color:#FFF;}
.login div{height:10px;margin:10px 8px 5px 372px;}
.login div img{display:block;cursor:pointer;}
.login form{padding:0 52px 40px 40px;;}
.login form legend{line-height:28px;height:28px;font-size:18px;}
.login input{display:block;width:293px;height:43px;line-height:43px;margin-top:15px;border:1px solid #dfdfdf;border-bottom:0;background-color:#fafafa;text-indent:10px;color:#ccc;font-size:16px;}
.login button{background-color:#31b656;margin-top:30px;font-size:16px;text-align:center;width:293px;height:46px;box-shadow:2px 2px 0 0 #d5e3da;color:#FFF;}
</style>
<script type="text/javascript" src="md5.js"></script>
</head>
<body>
<div>
<form id="loginForm">
<legend>登录网易云课堂</legend>
<input id="username">
<input id="password">
<button id="btn">登 录</button>
<p id="oText"></p>
</form>
</div>
<script type="text/javascript">
function $ (id) {
return document.getElementById(id)
}
var url4='http://study.163.com/webDev/login.htm'
var oBox3=$('oText')
var dataL={userName:hex_md5($("username").value),password:hex_md5($('password').value)}
var inputs=$('loginForm').getElementsByTagName('input')
for (var i = 0; i < inputs.length; i++) {
inputs[i].onfocus=function () {
this.value="";
};
}
$('btn').onclick=function(){
useAjax(url4,dataL,oBox3,loginsuc)
}
function loginsuc (Data,oBox) {
var _data= JSON.parse(Data);
if (_data==1) {
$('mask').style.display="none";
document.cookie = "loginsuc=1";
}else{
oBox.innerHTML+="您的用户名或者密码输入不正确！"
console.log(_data)
}
}
function useAjax (urls,datas,oPack,sucFun) {
ajax({
method : 'get',
url : urls ,
data : datas ,
success : function (data) {
sucFun(data,oPack)
},
async : true
});
}
function ajax(obj) {
var xhr = (function () {
/*创建XMLHttpRequest对象*/
if (typeof XMLHttpRequest != 'undefined') {
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
} else if (typeof ActiveXObject != 'undefined') {
// code for IE6, IE5
var version = [
'MSXML2.XMLHttp.6.0',
'MSXML2.XMLHttp.3.0',
'MSXML2.XMLHttp'
];
for (var i = 0; version.length; i ++) {
try {
return new ActiveXObject(version[i]);
} catch (e) {
//跳过
}
}
} else {
throw new Error('您的系统或浏览器不支持XHR对象！');
}
})();
/*url加随机参数，防止缓存*/
obj.url = obj.url+'?rand='+ Math.random();
/*请求参数格式化，encodeURIComponent编码参数可以出现&*/
obj.data = (function (data) {
var arr = [];
for (var i in data) {
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
})(obj.data);
if (obj.method === 'get') obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;
if (obj.async === true) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
callback();
}
};
}
xhr.open(obj.method, obj.url, obj.async);
if (obj.method === 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(obj.data);
} else {
xhr.send(null);
}
if (obj.async === false) {
callback();
}
function callback() {
if (xhr.status == 200) {
obj.success(xhr.responseText); //回调传递参数
} else {
alert('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText);
}
}
}
</script>
</body>
</html>echo_kinchao
qq_脑海中的橡皮擦_0
qq_脑海中的橡皮擦_0