cqcst/Course
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增 web 前端实验 8

Browse Source
This commit is contained in:
zhilv
2025-12-09 09:11:22 +08:00
parent b791fb6d1e
commit 4fb88ea847
3 changed files with 160 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Web/README.md
View File

@@ -18,5 +18,6 @@
├── test4 # 实验4 ├── test4 # 实验4
├── test5 # 实验5 ├── test5 # 实验5
├── test6 # 实验6 ├── test6 # 实验6
└── test7 # 实验7 ├── test7 # 实验7
└── test8 # 实验8
``` ```

115
Web/test8/check.html Normal file
View File

@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
form {
width: 300px;
margin-left: 100px;
margin-top: 100px;
}
legend {
font-weight: bold;
}
input[type="text"],
input[type="password"] {
height: 30px;
}
.form-box {
margin: 20px;
text-align: center;
}
.form-box label {
display: inline-block;
width: 70px;
text-align: justify;
text-align-last: justify;
}
.form-box button,
input[type="reset"] {
width: 80px;
height: 40px;
border: none;
}
.form-box button {
background-color: #007bff;
color: aliceblue;
}
</style>
</head>
<body>
<form id="userForm" action="https://www.baidu.com" method="POST" autocomplete="off">
<fieldset>
<legend align="center">用户登录</legend>
<div class="form-box">
<label for="un">用户名：</label>
<input type="text" class="userName" id="un" name="userName">
</div>
<div class="form-box">
<label for="password">密 码：</label>
<input type="password" class="psw" id="password">
</div>
<div class="form-box">
<button type="submit">登录</button>
<input type="reset" value="重置"></input>
</div>
</fieldset>
</form>
<script>
const userForm = document.getElementById("userForm");
const userNameInput = document.getElementById("un");
const pwsInput = document.getElementsByClassName("psw")[0];
userNameInput.onblur = function () {
if (!this.value) {
this.value = "请输入用户名";
this.style.color = "rgb(255,0,0)"
}
}
userNameInput.onfocus = function () {
if (this.value === "请输入用户名") {
this.value = "";
this.style.color = "black";
}
}
userForm.addEventListener("submit", (e) => {
e.preventDefault();
const userNameInputVal = userNameInput.value.trim();
const pwsInputVal = pwsInput.value.trim();
if (!userNameInputVal)
alert("用户名不能为空");
else if (!pwsInputVal)
alert("密码不能为空");
else if (userNameInputVal.length < 6 || userNameInputVal.length > 10)
alert("用户名长度应在 6 到 10 个字符之间");
else if (pwsInputVal.length < 6 || pwsInputVal.length > 10)
alert("密码长度应在 6 到 10 个字符之间");
else {
alert("验证成功");
userForm.submit();
}
})
</script>
</body>
</html>

43
Web/test8/opreaArr.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="output"></h1>
<script>
const output = document.getElementById("output");
// 通过for循环创建一个包含1到20数字的数组numbers
let numbers = new Array();
for (let i = 1; i <= 20; i++) {
numbers.push(i);
}
// 定义doubleNumbers函数用于将数组元素乘以3，并返回新数组
const doubleNumbers = (a) => {
return a.map((value) => value * 3);
}
// 调用doubleNumbers函数，传入numbers数组，得到处理后的数组，并赋值给doubledoutput变量
const doubledOutput = doubleNumbers(numbers);
// 通过id获取页面上id为"output"的h1标签元素，并将其赋值给outputElement变量
output.innerHTML += "numbers: " + numbers + "<br/>";
// 定义一个函数displayOutput，用于将数组元素以字符串形式展示在h1标签中
const displayOutput = (a) => {
return a.join(" ");
}
output.innerHTML += "displayOutput(): " + displayOutput(numbers) + "<br/>";
// 将doubledoutput数组中的元素以字符串的形式显示在h1标签中
output.innerHTML += "doubledoutput: " + doubledOutput + "<br/>";
</script>
</body>
</html>