第11讲：JavaScript中关于密码的应用
11.1 password对象概述
password对象的HTML语法：
<input type="password" name="name" value="value" size="num">
password对象的创建与简单应用见〔示例一〕及其图示。
〔示例一〕
<html>
<head>
<title>Password Object Sample...</title>
<script language="javascript">
<!--
function check()
{
if (document.tsinghua.text.value=="" || document.tsinghua.password.value=="")
{
alert("您至少有一个文本框为空，请重新输入！");
}
else
{
var user=document.tsinghua.text.value;
var password=document.tsinghua.password.value;
alert("您输入的用户名是："+user+"，"+"您输入的密码是："+password);
}
}
//-->
</script>
</head>
<body>
<font face="times new roman" color="red">
<h1 align="center">Password Object Sample</h1>
</font>
<hr size="1" color="red"><p>
<form name="tsinghua">
User <input type="text" name="text" size="25"><p>
Password <input type="password" name="password" size="25">
<p>
<hr size="1" color="red"><p>
<input type="button" value="Check the Password Object" onclick="check()">
</form>
</body>
</html>
图11-1 password对象的创建与简单应用
11.2 最简单的密码设计
〔示例二〕
<html><head><title>Password Object Sample...</title>
<script language="javascript">
<!--
function check()
{
if (document.tsinghua.text.value=="" ||
document.tsinghua.password.value=="")
{
alert("您至少有一个文本框为空，请重新输入！");
}
else
{
if (document.tsinghua.text.value=="Tsinghua University" &&
document.tsinghua.password.value=="432823197607192734")
{
var new_window=open("","new_window","menubar=no ststusbar=no width=300
height=100");
new_window.document.write("<html><head><title>Password
Sample</title></head>");
new_window.document.write("<body bgcolor=orange>");
new_window.document.writeln("您输入的用户名是：
"+document.tsinghua.text.value+"<p>"+"您输入的密码是：
"+document.tsinghua.password.value);
new_window.document.write("</body>");
new_window.document.write("</html>");
}
else
alert("请输入正确的用户名和密码！");
}
}
//-->
</script>
</head><body><font face="times new roman" color="red">
<h1 align="center">Password Object Sample</h1></font>
<hr size="1" color="red"><p>
<form name="tsinghua">
User <input type="text" name="text" size="25"><p>
Password <input type="password" name="password" size="25">
<p>
<hr size="1" color="red"><p>
<input type="button" value="Checked the Password" onclick="check()">
<input type="reset" value="Clear Data">
</form></body></html>
图11-2 密码的简单应用
11.3 使用外嵌式文档保护密码
文件架构：normal.js（外嵌式JavaScript文档）、password.html（链接文档）、password_03.html（主HTML文档）
〔示例三〕
normal.js文件的源代码
var a="a";
var b="b";
var c="c";
var d="d";
var e="e";
var f="f";
var g="g";
var h="h";
var i="i";
var j="j";
var k="k";
var l="l";
var m="m";
var n="n";
var o="o";
var p="p";
var q="q";
var r="r";
var s="s";
var t="t";
var u="u";
var v="v";
var w="w";
var x="x";
var y="y";
var z="z";
var A="A";
var B="B";
var C="C";
var D="D";
var E="E";
var F="F";
var G="G";
var H="H";
var I="I";
var J="J";
var K="K";
var L="L";
var M="M";
var N="N";
var O="O";
var P="P";
var Q="Q";
var R="R";
var S="S";
var T="T";
var U="U";
var V="V";
var W="W";
var X="X";
var Y="Y";
var Z="Z";
var num_01="0";
var num_02="1";
var num_03="2";
var num_04="3";
var num_05="4";
var num_06="5";
var num_07="6";
var num_08="7";
var num_09="8";
var num_10="9";
var rect=".";
var star="*";
var andstr="&";
var art="@";
var user_name;
var password_id;
var href_url;
function get_user_name()
{
user_name=T+s+i+n+g+h+u+a+"==="+U+n+i+v+e+r+s+i+t+y;
}
function get_password_id()
{
password_id=num_05+num_04+num_03+num_09+num_03+num_04;
}
function get_href_url()
{
href_url=p+a+s+s+w+o+r+d+rect+h+t+m+l;
}
password_03.html文件的源代码<html>
<head>
<title>Password Sample...</title>
<script language=javascript src="normal.js"></script>
</head>
<body>
<script language="javascript">
<!--
function check()
{
var user=document.form.user.value;
var password=document.form.password.value;
get_user_name();
get_password_id();
get_href_url();
if (user==user_name && password==password_id)
{
confirm("用户名和密码正确，请点击\"确定\"按钮进入密码保护页面！");
location.href=href_url;
}
else
{
if (document.form.user.value=="" || document.form.password.value=="")
{
alert("您未输入用户名或密码，请输入正确的用户名和密码！");
location.reload();
}
else
{
alert("密码或用户名错误，您没有权限进入密码保护页面！");
location.reload();
}
}
}
//-->
</script>
<form name="form">
User <input type="text" name="user" size="35">
<p>
Password <input type="password" name="password" size="35">
<p>
<hr size="1" color="red"><p>
<input type="button" value="Checked the UserName and PasswordID" onclick="check()">
<input type="reset" value="Clear Data">
</form>
</body>
</html>
prompt()属性加密页面
〔示例四〕
<html><head><title>password</title>
<script language="javascript">
<!--
function password()
{
var count=1;
var pass=prompt("请输入密码：","");
while (count<3)
{
if (!pass) {history.back();}
if (pass=="tsinghuauniversity")
{
alert("登录成功！");
window.location="passed.html";
break;
}
count+=1;
var pass=prompt("密码不对，请重新输入！");
}
if (pass!="tsinghuauniversity" && count==3) {location.href="about:blank";}
return " ";
}
document.write(password());
//-->
</script></head><body></body></html>
图11-7 密码正确后登录到的目标页面
