JavaScript练习-CSDN博客

本文链接：https://blog.csdn.net/qq_43050847/article/details/106877297

文章目录

输入校验

<!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>

在这里插入图片描述

网页中的计算器

<!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>

在这里插入图片描述

切换图片

<!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>

在这里插入图片描述