课程导航
| Web前端开发 | 客观题 | 编程题 |
|---|---|---|
| 概论 | 单元测试1 | |
| HTML基础 | 单元测试2 | 单元作业1 |
| CSS样式 | 单元测试3 | 单元作业2 |
| CSS布局与定位 | 单元测试4 | 单元作业3 |
| CSS3 | 单元测试5 | |
| JavaScript基础 | 单元测试6 | 单元作业4 |
| JQuery & HTML5 & Bootstrap | 单元测试7 | |
| 期末考试 | 客观选择题 | 这个还是自己写吧 |
这道题发挥空间比较大，我是全部都用DOM API来完成的，所以js代码部分看上去有点臭。也可以尝试HTML的写法，会简洁很多。
题目
-
创建网页并编写HTML基本结构（1分）
-
提示用户输入7个学生成绩，保存在数组中（1分）
-
计算总分并输出（1分）
-
计算平均分并输出（1分）
-
输出有几个成绩不及格（即<60分）（1分）
效果图
代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
<script src="script.js"></script>
</html>
script.js
function createTable(sum, avg, fail) {
var table = document.createElement("table");
var caption = document.createElement("caption");
caption.innerText = "统计数据";
table.appendChild(caption);
var thead = document.createElement("thead");
var tr = document.createElement("tr");
tr.innerHTML = `<th>总分</th><th>平均分</th><th>没通过的数量</th>`;
thead.appendChild(tr);
table.appendChild(thead);
var tbody = document.createElement("tbody");
tr = document.createElement("tr");
tr.innerHTML = `<td>${sum}</td><td>${avg}</td><td>${fail}</td>`;
tbody.appendChild(tr);
table.appendChild(tbody);
box.appendChild(table);
}
var studentCount = 7;
var box = document.createElement("div");
box.setAttribute("id", "app");
var label = document.createElement("h1");
label.innerText = "录入成绩";
box.appendChild(label);
var gradeList = [],
inputNodeList = [];
for (let i = 0; i < studentCount; i++) {
let input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("placeholder", "输入学生成绩");
input.addEventListener("focusout", () => {
var value = input.value === "" ? 0 : parseInt(input.value);
console.log(value);
if (isNaN(value) || value > 100 || value < 0) {
alert("不合法的值");
input.value = "";
}
});
box.appendChild(input);
inputNodeList.push(input);
}
var button = document.createElement("button");
button.addEventListener("click", () => {
gradeList = inputNodeList.map((grade) =>
grade.value === "" ? 0 : parseInt(grade.value)
);
sumGrade = gradeList.reduce((a, b) => a + b, 0);
avgGrade = Math.round(sumGrade / studentCount);
failCount = gradeList.filter((grade) => grade < 60).length;
while (box.hasChildNodes()) {
box.removeChild(box.firstChild);
}
createTable(sumGrade, avgGrade, failCount);
});
button.innerText = "统计";
box.appendChild(button);
document.body.appendChild(box);
style.css
* {
padding: 0px;
margin: 0px;
}
#app {
height: 100%;
width: 50%;
margin: 0px auto;
text-align: center;
}
input[type="text"] {
width: 150px;
margin: 10px auto;
border: 1px solid #c8cccf;
border-radius: 4px;
text-align: center;
height: 3em;
color: #6a6f77;
display: block;
padding: 0 1em;
}
input[type="text"]:hover {
border: 1px solid #3f99d4;
}
button {
padding: 10px;
width: 150px;
border-radius: 4px;
background-color: #3f99d4;
color: white;
font-family: monospace;
font-size: large;
}
table {
margin: 10px auto;
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #bebebe;
text-align: center;
color: #3b3e44;
}
caption {
font-size: large;
padding-bottom: 1ch;
}
th,
td {
padding: 6px;
border: 1px solid #bebebe;
}
td:hover {
background-color: #e3f4ff;
}
原创文章 63
获赞 23
访问量 2万+