<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function login()
{
if (document.form1.username.value=="123" &&document.form1.password.value=="321")
{
document.write("用户名：张三，密码输入成功登入。")
return false
}
else
{
alert("用户名和/或密码输入错误！")
document.form1.username.focus()
return false
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="" onsubmit="javascript:return login()">
<p>
用户名：
<input name="username" type="text" id="username" />
</p>
<p>
密 码：
<input name="password" type="text" id="password" />
</p>
<p> </p>
<p>
<input type="submit" name="Submit" value="提交"/>
<input name="reset" type="reset" id="reset" value="重置" />
</p>
</form>
</body>
</html>
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="moban1830/javascript/jquery.min.js"></script><!--自己去下载一个JQUERY-->
<style>
.header{
width:100%
border:1px solid red
}
.left{
float:left
width:40%
border:1px solid red
}
.right{
float:left
width:58%
border:1px solid red
}
.ok{
display:none
}
#tishi{
color:red
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="left">
<div class="up">
<p>
用户名：<input type="text" name="user" id="user"></input>
</p>
<p>
密 码：<input type="password" name="password" id="password"></input>
</p>
<p id="tishi"></p>
<p style="text-align:center">
<input type="button" name="new" id="new" value="注册"></input>
<input type="button" name="up" id="up" value="登录"></input><input type="button" name="re" id="re" value="重置"></input>
</p>
</div>
<!-- 这里是登录后显示的内容 -->
<div class="ok">
<p>欢迎您的登录！</p>
<p class="name"></p>
<input type="button" name="off" id="off" value="注销"></input>
</div>
</div>
<div class="right">这里是右边的块</div>
</body>
<script>
$(document).ready(function(e) {
$("#up").click(function(){
if($("#user").val()==""){
$("#tishi").html("用户名不能空！")
}else
if($("#password").val()==""){
$("#tishi").html("密码不能空！")
}else
if($("#user").val()=="111"&&$("#password").val()=="111"){
$(".up").css("display","none")
$(".name").html("111！")
$(".ok").css("display","block")
} else{
$("#tishi").html("用户名或密码不正确！")
}
})
$("#off").click(function(){
$(".up").css("display","block")
$(".ok").css("display","none")
})
})
</script>
</html>
大概的思路告诉你吧，你已经写到判断input内账号和密码真确的情况
if(用户名&密码都对）{
这个块开始是display是none，如果密码正确设置display为block,同时将登陆框的display设置为none；
然后去监听注销这个按钮，如果点击了，上面的步骤反过来就好了。
}
最主要的题目要求使用jquery，你没有用啊。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）