📅 最后修改于: 2023-12-03 14:56:37.997000 🧑 作者: Mango
此在线测验可以计算立方体或直角棱镜的表面积，给出以下三个参数：
为了开始测验，请输入以上三个参数，并单击“计算”按钮。
以下是测验的HTML、CSS和JavaScript代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>立方体或直角棱镜的表面积在线测验</title>
<style>
form {
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
width: 300px;
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="number"] {
padding: 5px;
border-radius: 3px;
border: 1px solid #ccc;
width: 100%;
box-sizing: border-box;
}
button {
padding: 10px;
border-radius: 3px;
border: none;
background-color: #3498db;
color: #fff;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}
button:hover {
background-color: #2980b9;
}
#result {
margin-top: 20px;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<form>
<label>
A：<input type="number" id="length1" required>
</label>
<label>
B：<input type="number" id="length2" required>
</label>
<label>
C：<input type="number" id="length3" required>
</label>
<button type="submit">计算</button>
</form>
<div id="result"></div>
<script>
const form = document.querySelector('form');
const resultDiv = document.querySelector('#result');
form.addEventListener('submit', function(e) {
e.preventDefault();
const length1 = parseFloat(document.querySelector('#length1').value);
const length2 = parseFloat(document.querySelector('#length2').value);
const length3 = parseFloat(document.querySelector('#length3').value);
const totalArea = 2 * (length1 * length2 + length1 * length3 + length2 * length3);
resultDiv.innerHTML = '表面积：' + totalArea + '平方厘米';
});
</script>
</body>
</html>
上述代码分为三个部分：HTML、CSS和JavaScript。
HTML部分是一个表单，包含三个输入框和一个按钮。输入框要求输入数字，并使用必需属性确保验证。
CSS部分使用了一些基本样式，如边框、填充和圆角，以美化表单。除此之外，还定义了一个结果div的样式，用于显示结果。
JavaScript部分定义了一个事件侦听器，用于侦听提交按钮的单击事件。当单击按钮时，JavaScript将获取每个输入框的值并计算表面积。计算结束后，结果将显示在结果div中。