JavaScript期末考试(大二)

最新推荐文章于 2024-07-06 00:11:00 发布

晚安皆是不安

最新推荐文章于 2024-07-06 00:11:00 发布

阅读量553

点赞数 11

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Koi_code/article/details/135233103

版权

注册界面代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>员工注册</title>
	</head>
	<!--登录界面样式-->
	<style type="text/css">
		#reg fieldset {
			width: 50%;
			margin: 5px auto;
			border-radius: 5px;
		}
		
		#reg span {
			color: red;
		}
	</style>
	<!--导入jQuery-->
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

	<body>
		<div id="reg">
			<fieldset>
				<legend>员工注册</legend>
				<!--姓名输入框-->
				<p>姓名:<input type="text" name="" id="textName" value="" onblur="checkName()" />
					<span id="spName">*</span>
				</p>

				<!--账号输入框-->
				<p>账号:<input type="text" name="" id="textZh" value="" onblur="checkZh()" />
					<span id="spZh">*</span>
				</p>

				<!--密码输入框-->
				<p>密码:<input type="password" name="" id="textPwd" value="" onblur="checkPwd()" />
					<span id="spPwd">*</span>
				</p>

				<!--确认密码输入框-->
				<p>确认密码:<input type="password" name="" id="textrePwd" value="" onblur="checkrePwd()" />
					<span id="sprePwd">*</span>
				</p>

				<!--岗位下拉框-->
				<p>岗位:
					<select id="selManage" onchange="changeAdmin()"></select>
					<select id="selAdmin"></select>
				</p>

				<!--登录按钮-->
				<p>
					<button type="button" id="btn" onclick="check()">注册</button>
				</p>
			</fieldset>

			<!--编写jQuery-->
			<script type="text/javascript">
				//岗位下拉框
				var manager = ["管理岗", "非管理岗"];
				var admins = new Array(3);
				admins["管理岗"] = ["项目经理", "部长", "组长"];
				admins["非管理岗"] = ["程序员", "销售员", "测试员"];

				$(function() {
					//页面首次加载时，同步加载第一个下拉框
					var select1 = document.getElementById("selManage");
					for(let i = 0; i < manager.length; i++) {
						var option = document.createElement("option");
						option.text = manager[i]
						option.value = manager[i];
						select1.appendChild(option);
					}
					//首次加载调用
					changeAdmin();
				})
				//点击第一个管理岗下拉框时，第二个下拉框同步联动
				function changeAdmin() {
					var select2 = document.getElementById("selAdmin")
					var m = document.getElementById("selManage").value;
					select2.options.length = 0;
					for(let i = 0; i < admins.length; i++) {
						var option = document.createElement("option");
						option.text = admins[m][i];
						option.value = admins[m][i];
						select2.appendChild(option);
					}
				}
				//验证跳转
				function check() {
					//如果条件不满足就不跳转
					if(checkName() && checkPwd() && checkrePwd()) {
						window.location.href = 'index.html';
						return true;
					} else
						return false;

				}

				//验证姓名
				function checkName() {
					var name = $("#textName").val()
					if(name == "") {
						$("#spName").html("<font color='red'>姓名不能为空<font/>")
						return false;
					} else if(name.length >= 2 && name.length <= 10) {
						$("#spName").html("<font color='red'>√<font/>")
						return true;
					}else{
						$("#spName").html("<font color='red'>姓名长度在2~10字符之间<font/>")
							return false;
					}
				}

				//验证账号
				function checkZh() {
					var zh = $("#textZh").val()
					if(zh == "") {
						$("#spZh").html("<font color='green'>账号不能为空<font/>")
						return false;
					} else if(zh.length >= 6 && zh.length <= 10) {
						$("#spZh").html("<font color='green'>√<font/>")
						return true;
					}else{
						$("#spZh").html("<font color='green'>账号长度位：6~16位<font/>")
					}
				}

				//验证密码
				function checkPwd() {
					var pwd = $("#textPwd").val()
					if(pwd == "") {
						$("#spPwd").html("<font color='green'>密码不能为空<font/>")
						return false;
					} else if(pwd.length >= 8 && pwd.length <= 16) {
						$("#spPwd").html("<font color='green'>√<font/>")
						return true;
					} else {
						$("#spPwd").html("<font color='green'>密码长度为：8~16位<font/>")
						return false;
					}
				}

				//验证确认密码
				function checkrePwd() {
					var pwd = $("#textPwd").val()
					var repwd = $("#textrePwd").val()
					if(repwd == "") {
						$("#sprePwd").html("<font color='green'>密码不能为空<font/>")
						return false;
					} else if(repwd.length >= 8 && repwd.length <= 16) {
						$("#sprePwd").html("<font color='green'>√<font/>")
						return true;
					} else if(repwd != pwd) {
						$("#sprePwd").html("<font color='green'>两次密码不一致<font/>")
						return false;
					} else {
						$("#sprePwd").html("<font color='green'>密码长度为：8~16位<font/>")
						return false;
					}
				}
			</script>
		</div>
	</body>

</html>

购物车界面代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>购物车</title>
		<!-- css样式 -->
		<style type="text/css">
			table {
				width: 60%;
				margin: 5px auto;
				padding: 0px;
			}

			div p {
				width: 60%;
				margin: 5px auto;
				margin-bottom: 10px;
				font-size: 20px;
			}
			#regs td{
				width: 25px;
			}
			#regs.tabs{
				width: 5px;
				border: 1px solid gray;
				border-radius: 5px;
			}
		</style>
		<!-- 导入jQuery封装包 -->
		<script src="js/jquery-3.3.1.min.js"></script>
	</head>
	<body>
		<div id="regs">
			<p>欢迎您！登录成功</p>
			<table border="1" cellspacing="0" id="table1">
				<caption>我的购物车</caption>
				<tr>
					<td>商品名称</td>
					<td>状态</td>
					<td class="tabs">数量</td>
					<td>单价</td>
					<td>小计</td>
				</tr>

				<tr>
					<td>Apple IPhone</td>
					<td>可购买</td>
					<td><input type="number" class="tabs" value="1" min="1" onclick="getPrice(this,0)" /></td>
					<td id="price">8388</td>
					<td id="total">8388</td>
				</tr>

				<tr>
					<td>小米5X 64GB</td>
					<td>可购买</td>
					<td><input type="number"  class="tabs" value="1" min="1" onclick="getPrice(this,1)" /></td>
					<td id="price">1499</td>
					<td id="total">1499</td>
				</tr>

				<tr>
					<td>小米5X 64GB</td>
					<td>可购买</td>
					<td><input type="number"  class="tabs" value="1" min="1" onclick="getPrice(this,2)" /></td>
					<td id="price">1499</td>
					<td id="total">1499</td>
				</tr>

				<tr>
					<td>小米5X 64GB</td>
					<td>可购买</td>
					<td><input type="number"  class="tabs" value="1" min="1" onclick="getPrice(this,3)" /></td>
					<td id="price">1499</td>
					<td id="total">1499</td>
				</tr>

				<tr>
					<td colspan="6" style="text-align: right;" id="totalPrice">
						总金额:12885元
					</td>
				</tr>

			</table>
		</div>
	</body>
	<!-- 编写jQuery -->
	<script type="text/javascript">
		$(function() {
			//鼠标悬停时变色
			$("#table1 tr").hover(function() {
				$(this).css("background-color", "green").css("color", "white")
			}, function() {
				$(this).css("background-color", "white").css("color", "black")
			})
		})
		//计算 小计和总金额
		function getPrice(obj, index) {
			// 获取数量
			var num = obj.value;
			var price = document.querySelectorAll("#price")[index].innerHTML;
			// 小计金额
			var total = eval(num + "*" + price);
			document.querySelectorAll("#total")[index].innerHTML = total;
			var prices = document.querySelectorAll("#total")
			// 累计总金额
			var sumTatal = 0;
			for (let i = 0; i < prices.length; i++) {
				sumTatal = parseFloat(prices[i].innerHTML) + sumTatal;
			}
			$("#totalPrice").html("总金额:<font size='5px' color='orange'>" + sumTatal +"元</font>");
		}
	</script>
</html>

效果图