WebBasicJavaScriptUnit02
1 登录验证
1.1 问题
1）验证登录页面上的账号、密码
2）如果验证失败，则在页面提示验证信息
1.2 方案
使用正则表达式判断账号、密码的格式。
1.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建HTML
在day05文件夹下创建demo1.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>登录验证</title>
<meta charset="utf-8" />
<style type="text/css">
body {
font-family: "微软雅黑", '文泉驿正黑';
}
.form {
width:400px;
margin:150px auto;
border:1px solid #ccc;
}
.form h1 {
text-align:center;
margin:0;
padding:5px;
border:1px solid #ccc;
}
.form p {
margin:0;
padding:20px;
border:1px solid #ccc;
}
.form div {
text-align:center;
margin:0;
padding:10px;
border:1px solid #ccc;
}
.form div input {
width:60px;
height:30px;
}
.error_msg {
color:#f00;
border:1px solid #f00;
}
</style>
<script type="text/javascript">
function check_name() {
var name = document.getElementById("name").value;
var name_msg = document.getElementById("name_msg");
var reg = /^\w{3,20}$/;
if(reg.test(name)) {
name_msg.className = "";
return true;
} else {
name_msg.className = "error_msg";
return false;
}
}
function check_pwd() {
var pwd = document.getElementById("pwd").value;
var pwd_msg = document.getElementById("pwd_msg");
var reg = /^\w{6,20}$/;
if(reg.test(pwd)) {
pwd_msg.className = "";
return true;
} else {
pwd_msg.className = "error_msg";
return false;
}
}
</script>
</head>
<body>
<div class="form">
<form action="http://www.tmooc.cn"
onsubmit="return (check_name()+check_pwd())==2">
<h1>登录</h1>
<p>
<label>账号：</label>
<input type="text" id="name" onblur="check_name();"/>
<span id="name_msg">3-20位字符</span>
</p>
<p>
<label>密码：</label>
<input type="password" id="pwd" onblur="check_pwd();"/>
<span id="pwd_msg">6-20位字符</span>
</p>
<div>
<input type="submit" value="登录" />
</div>
</form>
</div>
</body>
</html>
步骤二：测试
使用浏览器打开demo1.html，输入错误格式的账号、密码，效果如下图：
图-1
输入正确的账号、密码，效果如下图：
图-2
1.4 完整代码
demo1.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>登录验证</title>
<meta charset="utf-8" />
<style type="text/css">
body {
font-family: "微软雅黑", '文泉驿正黑';
}
.form {
width:400px;
margin:150px auto;
border:1px solid #ccc;
}
.form h1 {
text-align:center;
margin:0;
padding:5px;
border:1px solid #ccc;
}
.form p {
margin:0;
padding:20px;
border:1px solid #ccc;
}
.form div {
text-align:center;
margin:0;
padding:10px;
border:1px solid #ccc;
}
.form div input {
width:60px;
height:30px;
}
.error_msg {
color:#f00;
border:1px solid #f00;
}
</style>
<script type="text/javascript">
function check_name() {
var name = document.getElementById("name").value;
var name_msg = document.getElementById("name_msg");
var reg = /^\w{3,20}$/;
if(reg.test(name)) {
name_msg.className = "";
return true;
} else {
name_msg.className = "error_msg";
return false;
}
}
function check_pwd() {
var pwd = document.getElementById("pwd").value;
var pwd_msg = document.getElementById("pwd_msg");
var reg = /^\w{6,20}$/;
if(reg.test(pwd)) {
pwd_msg.className = "";
return true;
} else {
pwd_msg.className = "error_msg";
return false;
}
}
</script>
</head>
<body>
<div class="form">
<form action="http://www.tmooc.cn"
onsubmit="return (check_name()+check_pwd())==2">
<h1>登录</h1>
<p>
<label>账号：</label>
<input type="text" id="name" onblur="check_name();"/>
<span id="name_msg">3-20位字符</span>
</p>
<p>
<label>密码：</label>
<input type="password" id="pwd" onblur="check_pwd();"/>
<span id="pwd_msg">6-20位字符</span>
</p>
<div>
<input type="submit" value="登录" />
</div>
</form>
</div>
</body>
</html>
2 模拟方法重载
2.1 问题
使用 arguemnts 对象模拟方法的重载
2.2 方案
使用 arguemnts 对象模拟方法的重载
2.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建HTML
创建demo2.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>模拟方法重载</title>
<meta charset="utf-8" />
<script type="text/javascript">
function sum() {
var sum = 0;
for(var i=0;i<arguments.length;i++) {
sum += arguments[i];
}
return sum;
}
function f1() {
var s = sum(1,2,3);
alert(s);
}
function f2() {
var s = sum(1,2,3,4,5,6);
alert(s);
}
</script>
</head>
<body>
<h1>模拟方法重载</h1>
<input type="button" value="1~3的和" onclick="f1();"/>
<input type="button" value="1~6的和" onclick="f2();"/>
</body>
</html>
步骤二：测试
使用浏览器打开demo2.html，点击按钮[1~3的和]，效果如下图：
图-2
点击按钮[1~6的和]，效果如下图：
图-3
2.4 完整代码
demo2.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>模拟方法重载</title>
<meta charset="utf-8" />
<script type="text/javascript">
function sum() {
var sum = 0;
for(var i=0;i<arguments.length;i++) {
sum += arguments[i];
}
return sum;
}
function f1() {
var s = sum(1,2,3);
alert(s);
}
function f2() {
var s = sum(1,2,3,4,5,6);
alert(s);
}
</script>
</head>
<body>
<h1>模拟方法重载</h1>
<input type="button" value="1~3的和" onclick="f1();"/>
<input type="button" value="1~6的和" onclick="f2();"/>
</body>
</html>
3 简单计算器
3.1 问题
实现简单计算器
3.2 方案
使用eval函数直接执行用户输入的算式。
3.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建HTML
创建demo3.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>简单计算器</title>
<meta charset="utf-8" />
<script type="text/javascript">
function cal() {
var input = document.getElementById("input").value;
var out = document.getElementById("out");
try {
var result = eval("("+input+")");
out.innerHTML = result;
} catch(e) {
console.log(e);
out.innerHTML = "表达式有误";
}
}
</script>
</head>
<body>
<h1>计算器</h1>
<p>
<input type="text" id="input"/>
<input type="button" value="计算" onclick="cal();"/>
</p>
<p>
= <span id="out"></span>
</p>
</body>
</html>
步骤二：测试
使用浏览器打开demo3.html，输入任意算式，效果如下图：
图-4
3.4 完整代码
demo3.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>简单计算器</title>
<meta charset="utf-8" />
<script type="text/javascript">
function cal() {
var input = document.getElementById("input").value;
var out = document.getElementById("out");
try {
var result = eval("("+input+")");
out.innerHTML = result;
} catch(e) {
console.log(e);
out.innerHTML = "表达式有误";
}
}
</script>
</head>
<body>
<h1>计算器</h1>
<p>
<input type="text" id="input"/>
<input type="button" value="计算" onclick="cal();"/>
</p>
<p>
= <span id="out"></span>
</p>
</body>
</html>