生产实习JAVA_day3(JS练习)_javascript生产实习的作品-优快云博客

本文通过五个实例深入探讨JavaScript在网页表单交互、事件处理、页面元素控制及数据验证方面的应用，涵盖表单计算、焦点事件响应、全选功能实现、下拉级联选择及表单验证等关键技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

共5道习题：

1、任务一：使用JavaScript语言实现表单交互

【提示】：switch的应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS-1</title>
		<script type="text/javascript">
			function calc(){
				var price = document.calcForm.price.value;
				var count = document.getElementById("count").value;
				var payway = document.calcForm.payway.value;
				var discount=0;
				switch(parseInt(payway)){
					case 0:discount=1;break;
					case 1:discount=0.6;break;
					case 2:discount=0.7;break;
					case 3:discount=0.8;break;
					case 4:discount=0.9;break;
					default:discount=1; 
				}
				
				var sum = price * count * discount;
				document.calcForm.sum.value = sum;
				alert("you choose the"+parseInt(payway)+" way,that will be discounted by "+discount*10);
			}
		</script>
		
	</head>
	<body>
	<form name="calcForm">
		<img src="img/logo.gif"><br />
		<h2 style="font-family: '宋体';">会说话的QQ竞拍喽！</h2>
		<img src="img/qie.jpg" style="size=30;" /><br />
		竞拍价格: <input type="text" name="price"><br>
		购买数量:  <input type="text" name="count" id="count"><br>
		支付方式： <select name="payway" >
						<option value=0>--请选择支付方式--</option>
						<option value=1 selected>银行转账——打6折</option>
						<option value=2>电话支付——打7折</option>
						<option value=3>邮政支付——打8折</option>
						<option value=4>Q币支付——打9折</option>
			</select><br>
		预计总价： <input type="text" name="sum"><br />
		<input type="button" value="计算看看" onclick="calc()">
		
	</form>
	</body>

</html>

2、任务二：焦点事件与document对象应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS-1</title>
		<script type="text/javascript">
			function userLostFocus(){
				var username=document.RegForm.username.value;
				if(username==""){
					document.getElementById("nameError").innerHTML="<font size='-1' color='red'>用户名为空</font>";
				}else if(!/^\w{4,16}$/.test(username)){
					document.getElementById("nameError").innerHTML="<font size='-1' color='red'>用户名输入非法，请重新输入</font>";
				}else{
					document.getElementById("nameError").innerHTML="<img src='img/check.jpg' width='22px' height='22px'/>";
				}
			}
			function passLostFocus(){
				var password=document.RegForm.password.value;
				if(password==""){
					document.getElementById("passError").innerHTML="<font size='-1' color='red'>密码为空</font>";
				}else if(!/^\w{6,12}$/.test(password)){
					document.getElementById("passError").innerHTML="<font size='-1' color='red'>密码输入非法，请重新输入</font>";
				}else{
					document.getElementById("passError").innerHTML="<img src='img/check.jpg' width='22px' height='22px'/>";
				}
			}
			function verifyLostFocus(){
		 	var pass = document.RegForm.password.value;
		 	var verify = document.RegForm.verify.value;
		 	if(verify==""){
		 		document.getElementById("verifyError").innerHTML="<font size='-1' color='red'>确认密码不能为空!</font>"
		 	}else if(pass!=verify){
		 		document.getElementById("verifyError").innerHTML="<font size='-1' color='red'>两次输入密码不一致！</font>"
		 	}else{
		 		document.getElementById("verifyError").innerHTML="<img src='img/check.jpg' width='22px' height='22px'/>";
		 	}
		 }
			function click() {
				document.RegForm.username.value="";
				document.RegForm.password.value="";
				document.RegForm.verify.value="";
			}
		</script>
		
	</head>
	<body>
		<form name="RegForm">
			<img src="img/top.jpg" /><br />
			用户名：<input type="text" name="username" onblur="userLostFocus()"/>
			<div id="nameError" style="display: inline">只能输入字母或数字，4-16个字符</div><br />
			密码：<input type="text" name="password" onblur="passLostFocus()"/>
			<div id="passError" style="display: inline;">密码长度6-12位</div><br />
			确认密码：<input type="text" name="verify" onblur="verifyLostFocus()"/>
			<div id="verifyError" style="display: inline;"></div><br />
			<button onclick="click()">重填</button>
			<input type="button" value="注册" name="register"/>
		</form>
	</body>

</html>

3、任务三：使用Javascript实现以下页面<“全选”按钮>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>JS-1</title>
		<script type="text/javascript">
			function Allselect() {
				var isChecked = document.getElementById("selectAll").checked;
				var choice = document.getElementsByName("choose");
				for(var i = 0; i < choice.length; i++)
					choice[i].checked = isChecked;
			}
			function selectOne() {
				var choice = document.getElementsByName("choose");
				var selectAll = document.getElementById("selectAll");
				var count=0;
				for(var i=0;i<choice.length;i++) {
					if(choice[i].checked){
						count++;
					}
				}
				if(count==choice.length) {
					selectAll.checked=true;
				}else{
					selectAll.checked=false;
				}
			}
		</script>

	</head>

	<body>
		<form>
			<table>

				<img src="img/task3/head.jpg" /><br>
				<tr>
					<td><input type="checkbox" id="selectAll" onclick="Allselect()">全选</td>
					<td><img src="img/task3/top.jpg"></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="choose" id="one" onclick="selectOne()" /></td>
					<td><img src="img/task3/one.jpg"></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="choose" id="two" onclick="selectOne()" /></td>
					<td><img src="img/task3/two.jpg"></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="choose" id="three" onclick="selectOne()" /></td>
					<td><img src="img/task3/three.jpg"></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="choose" id="four" onclick="selectOne()" /></td>
					<td><img src="img/task3/four.jpg"></td>
				</tr>
			</table>
		</form>
	</body>

</html>

4、任务四：下拉级联框

<html>

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript">
			var citys = new Array();
			citys['北京'] = ["朝阳区", "东城区", "西城区", "海淀区", "宣武区", "丰台区", "怀柔", "延庆", "房山"];
			citys['上海'] = ["宝山区", "长宁区", "丰贤区", "虹口区", "青浦区", "南汇区", "徐汇区", "卢湾区"];
			citys['广州'] = ["天河区", "海珠区", "南沙区", "白云区", "嘉湾区", "越秀区", "黄埔区", "罗岗区", "番寓区", "花都区"];
			citys['深圳'] = ["福田区", "罗湖区", "盐田区", "宝安区", "龙岗区", "南山区", "深圳周边"];
			citys['重庆'] = ["俞中区", "南岸区", "江北区", "沙坪坝区", "九龙坡区", "渝北区", "大渡口区", "北碚区", "巴南区", "万盛区", "涪凌", "江津"];
			citys['天津'] = ["和平区", "河西区", "南开区", "河北区", "河东区", "红桥区", "塘古区", "罗岗区", "开发区", "西青区", "东丽区"];

			function insertOption() {
				var select = document.getElementById("city");
				select.add(new Option("--请选择城市--", ""))
				for(var i in citys)
					select.add(new Option(i, i));
			}

			function getDistrict() {
				var select = document.getElementById("city").value;
				var district = document.getElementById("district");
				district.length = 0;
				for(var j = 0; j < citys[select].length; j++) {
					district.add(new Option(citys[select][j], citys[select][j]));
				}
			}
		</script>
	</head>

	<body onload="insertOption()">

		<form>

			<select id="city" onchange="getDistrict()"></select>
			<!--<input type="button" onclick="insertOption()" value="Insert option" />-->

			<select id="district"></select>
		
			<input type="button" value="查询" />
		</form>

	</body>

</html>

5、JS完成表单验证功能

ps:此题没做完，而且这题逻辑没问题，测试出问题了，需要后续改正。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>JS测试</title>
		<script type="text/javascript">
			function checkForm() {
				var custName = document.regForm.cust_name.value;
				var password = document.regForm.pass.value;
				var gender = cgender.value;
				var email = document.regForm.email.value;
				var age = document.regForm.age.value;
				if(custName == "") {
					alert("用户名不能为空!");
					document.regForm.cust_name.focus();
					return false;
				}
				if(!/^\w{4,16}$/.test(custName)) {
					alert("用户名格式不正确！")
					document.regForm.cust_name.focus();
					return false;
				}
				if(password == "") {
					alert("密码不能为空！");
					document.regForm.password.focus();
					return false;
				}
				if(!/^\w{6,}$/.test(password)) {
					alert("请输入至少6位密码！");
					document.regForm.password.focus();
					return false;
				}
				if(email == "") {
					alert("电子邮箱不能为空！");
					document.regForm.email.focus();
					return false;
				}
				if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(email)) {
					alert("电子邮箱格式错误！")
					document.regForm.email.focus();
					return false;
				}
				if(age == "") {
					alert("年龄不能为空！");
					document.regForm.age.focus();
					return false;
				}
				if(!/^\w{1,2}$/.test(age)) {
					alert("请输入正确的年龄！");
					document.regForm.age.focus();
					return false;
				}
				return true;
			}
		</script>
	</head>

	<body>
		<form name="regForm" action="" method="post" onsubmit="return checkForm();">
			会员名：<input type="text" name="cust_name" /><br /> 性别：
			<input type="radio" name="gender" value="man" checked/>男<input type="radio" name="gender" value="woman" />女<br /> 密码：
			<input type="text " name="pass " /><br /> 电子邮件地址：
			<input type="text " name="email " /><br /> 年龄：
			<input type="text " name="age " /><br />
			<input type="submit" value="注册 " />
		</form>
	</body>

</html>