欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaScript练习

程序员文章站 2022-04-02 10:41:57
...

文章目录

输入校验

<!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_-]aaa@qq.com[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>

JavaScript练习

网页中的计算器

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

JavaScript练习

切换图片

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

JavaScript练习

相关标签： java web基础知识点 js css html javascript wxpython

上一篇： MVC开发模式

下一篇： React组件项目（详细教程）

推荐阅读