使用灯标

HTML

<div id="login">
    <h1>用户登录</h1>
    用户名
    <input name="" id="user" type="text">
    <br />
    <br />
    密　码
    <input name="" id="pass"  type="password">
    <br />
    <br />
    <input name="submit" type="button" id="submit" value="提交" />
    <span id="title"></span>
</div>
					    

CSS

#login {
    position: relative;
    width: 300px;
}
#title {
    position: absolute;
    right: 20px;
    top: 80px;
}
					    

JS

window.onload = function()
{
    var b = document.getElementById("submit");
    b.onclick = login;
}
var login = function()
{
    var user = document.getElementById("user");
    var pass = document.getElementById("pass");
    var s = "server.asp?user=" + user.value + "&pass=" + pass.value;
    imgRequest(s);
}
//img异步通信函数
var imgRequest = function( url ){
	if(typeof url != "string" ) return;
	var image = new Image();
	image.src = url;
	image.onload = function() {
		var  title = document.getElementById("title");
		title.innerHTML = "";
		title.appendChild(image);			
		if(this.width > 35) {
			alert("登录成功");
		} else {
			alert("你输入的用户名或密码有误，请重新输入");
		}
	};
	image.onerror = function() {
		alert("加载失败");
	};

}