输入校验
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户输入校验</title>
<style type="text/css">
img {
width: 20px;
height: 20px;
display: none;
}
</style>
<script type="text/javascript">
var regPhone = /^1(3|4|5|7|8)\d{9}$/;
var regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
function checkPhone() {
if (regPhone.test(document.getElementById("phone").value)) {
document.getElementById("check1").innerHTML = '';
document.getElementById("checkpic1").style.display = 'inline';
return true;
} else {
document.getElementById("check1").innerHTML = '输入有误';
document.getElementById("check1").style.color = 'red';
document.getElementById("checkpic1").style.display = 'none';
return false;
}
}
function checkEmail() {
if (regEmail.test(document.getElementById("email").value)) {
document.getElementById("check2").innerHTML = '';
document.getElementById("checkpic2").style.display = 'inline';
return true;
} else {
document.getElementById("check2").innerHTML = '输入有误';
document.getElementById("check2").style.color = 'red';
document.getElementById("checkpic2").style.display = 'none';
return false;
}
}
function checkSubmit() {
return checkEmail() && checkPhone();
}
</script>
</head>
<body>
<form action="homework1.html" method="get" onsubmit="return checkSubmit()">
手机号:<input type="text" name="phone" id="phone" onchange="checkPhone()" /><span id="check1"></span><img id="checkpic1"
src="img/对号.jpg" /><br>
邮箱:<input type="text" name="email" id="email" onchange="checkEmail()" /><span id="check2"></span><img id="checkpic2"
src="img/对号.jpg" /><br>
<input type="submit" value="提交" />
</form>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/683d15a1098909e8cf833937697c54a1.png)
网页中的计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页中的计算器</title>
<style type="text/css">
.scanner {
width: 168px;
height: 40px;
}
.key {
width: 40px;
height: 40px;
}
.key0 {
width: 85px;
height: 40px;
}
</style>
<script type="text/javascript">
function getValue(obj) {
var def = document.getElementById("scanner").value;
document.getElementById("scanner").value = def + obj.value;
}
function cal() {
document.getElementById("scanner").value = eval(document.getElementById("scanner").value);
}
function reset() {
document.getElementById("scanner").value = '';
}
</script>
</head>
<body>
<table border="1px" cellspacing="1px" cellpadding="1px">
<tr>
<td colspan="4"><input type="text" name="scanner" class="scanner" id="scanner" disabled="disabled" /></td>
</tr>
<tr>
<td><input type="button" name="" id="" class="key" value="7" onclick="getValue(this)" /></td>
<td><input type="button" name="" id="" class="key" value="8" onclick="getValue(this)" /></td>
<td><input type="button" name="" id="" class="key" value="9" onclick="getValue(this)" /></td>
<td><input type="button" name="" id="" class="key" value="+" onclick="getValue(this)" /></td>
</tr>
<tr>
<td><input type="button" name="" id="" class="key" value="4" onclick="getValue(this)" /></td>
<td><input type="button" name="" id="" class="key" value="5" onclick="getValue(this)" /></td>
<td><input type="button" name="" id="" class="key" value="6" onclick="getValue(this)" /></td>
<td><input type="button" name="" id="" class="key" value="-" onclick="getValue(this)" /></td>
</tr>
<tr>
<td><input type="button" name="" id="" class="key" value="1" onclick="getValue(this)" /></td>
<td><input type="button" name="" id="" class="key" value="2" onclick="getValue(this)" /></td>
<td><input type="button" name="" id="" class="key" value="3" onclick="getValue(this)" /></td>
<td><input type="button" name="" id="" class="key" value="*" onclick="getValue(this)" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" name="" id="" class="key0" value="0" onclick="getValue(this)" /></td>
<td><input type="button" name="" id="" class="key" value="=" onclick="cal()" onblur="reset()" /></td>
<td><input type="button" name="" id="" class="key" value="/" onclick="getValue(this)" /></td>
</tr>
</table>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/95b1e0c800c570f7247ef4c49dd9a5d9.png)
切换图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>切换图片</title>
<script type="text/javascript">
function firstPic() {
setPath(1);
setAtt(1);
}
function backPic() {
var backnum = getNum() - 1;
setPath(backnum);
setAtt(backnum);
}
function nextPic() {
var nextnum = getNum() + 1;
setPath(nextnum);
setAtt(nextnum);
}
function lastPic() {
setPath(8);
setAtt(8);
}
function setAtt(num) {
if (num === 1) {
document.getElementById("buttion1").disabled = true;
document.getElementById("buttion2").disabled = true;
} else {
document.getElementById("buttion1").disabled = false;
document.getElementById("buttion2").disabled = false;
}
if (num === 8) {
document.getElementById("buttion3").disabled = true;
document.getElementById("buttion4").disabled = true;
} else {
document.getElementById("buttion3").disabled = false;
document.getElementById("buttion4").disabled = false;
}
}
function getNum() {
var path = document.getElementById("picture").src;
var num = parseInt(path.slice(-5, -4));
return num;
}
function setPath(num) {
document.getElementById("picture").src = './img/pic' + num + '.png';
}
</script>
</head>
<body>
<img id="picture" src="./img/pic1.png"><br>
<input type="button" name="" id="buttion1" value="第一张" onclick="firstPic()" disabled="disabled" />
<input type="button" name="" id="buttion2" value="上一张" onclick="backPic()" disabled="disabled" />
<input type="button" name="" id="buttion3" value="下一张" onclick="nextPic()" />
<input type="button" name="" id="buttion4" value="最后一张" onclick="lastPic()" />
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d186ef545720c1ab1296adf5f61554ab.png)