实现的功能
1）完成登录注册页面
2）给页面添加背景色
3）点击输入框提示输入信息
idnex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="../pages/login.html">我要登录</a><br>
<a href="../pages/regist.html">我要注册</a>
</body>
</html>login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
background-color: grey;
}
</style>
<script type="text/javascript">
window.onload = function () {
//获取文本框
var textInputEle = document.getElementById("username");
//给文本框绑定获取焦点的时间
textInputEle.onfocus = function () {
//获取span标签
var spanEle = document.getElementById("msg");
//给span标签中设置文本内容
spanEle.innerHTML = "请输入3-6的字母、数字、下划线或减号的用户名"
}
//给文本框绑定失去焦点的时间
textInputEle.onblur = function () {
//获取span标签
var spanEle = document.getElementById("msg");
//给span标签中设置文本内容
spanEle.innerHTML = "";
}
}
</script>
<script type="text/javascript"src="../js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("#password").focus(function () {
$("#Pmsg").html("请输入密码")
})
$("#password").blur(function () {
$("#Pmsg").html("")
})
})
</script>
</head>
<body>
<h1>欢迎登录</h1>
<form action="login_success.html" method="post">
用户名称：<input type="text" name="username" id="username"><span id="msg"></span><br>
用户密码：<input type="password" name="password"id="password"><span id="Pmsg"></span><br>
<input type="submit" value="登录">
</form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>登录成功
</h1>
</body>
</html>regist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
background-color: #bbffaa;
}
</style>
<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//给文本框获取焦点的事件
$("#username").focus(function () {
//给span标签设置文本内容
/*
text():用来获取或设置成对出现的标签中的文本值
对象.text():获取文本值
对象.text("new value"):设置文本值
html()方法与text()方法的区别是html()方法可以解析HTML标签
*/
$("#msg").html("<font color='red'>请输入3-6的字母、数字、下划线或减号的用户名</font>");
})
$("#username").blur(function () {
//给span标签设置文本内容
/*
text():用来获取或设置成对出现的标签中的文本值
对象.text():获取文本值
对象.text("new value"):设置文本值
*/
$("#msg").text("");
})
});
</script>
<script type="text/javascript">
$(function () {
$("#userPassword").focus(function () {
$("#Pmsg").html("请输入6-14位密码")
})
$("#userPassword").blur(function () {
$("#Pmsg").html("")
})
})
</script>
<script type="text/javascript">
$(function () {
$("#REPassword").focus(function () {
$("#REmsg").html("再次输入密码")
})
$("#REPassword").blur(function () {
$("#REmsg").html("")
})
})
</script>
<script type="text/javascript">
$(function () {
$("#EMail").focus(function () {
$("#Emsg").html("请输入邮箱地址")
})
$("#EMail").blur(function () {
$("#Emsg").html("")
})
})
</script>
</head>
<body>
<h1>欢迎注册</h1>
<form action="regist_sccess.html" method="post">
用户名称：<input type="text" name="username" id="username"><span id="msg"></span><br>
用户密码：<input type="password" name="password" id="userPassword"><span id="Pmsg"></span><br>
确认密码：<input type="password" name="RePassword"id="REPassword"><span id="REmsg"></span><br>
用户邮箱：<input type="email" name="Email"id="EMail"><span id="Emsg"></span><br>
<input type="submit" value="注册">
</form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册成功</h1>
</body>
</html>
