本帖最后由 xiaoguyan 于 2023-10-10 10:49 编辑
闲来无事，看到小朋友作业不多，写了个小学数学出题，加减乘除运算，网页版。
比较简陋，实现简单功能，大家可以根据需要美化。
在线预览：https://uutool.cn/html/ 复制下面代码后到该地址预览即可
[HTML] 纯文本查看 复制代码 <html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
text-align: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.options {
display: -webkit-box;
line-height: 25px;
}
.options label {
display: block;
}
.questions {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 80%;
}
.questions p {
font-size: 24px;
font-weight: bold;
line-height: 5px;
padding-left: 20%;
}
.questions input {
border: none;
}
.print {
margin-top: 20px;
}
.options div {
margin-right: 20%;
background-color: #8080801a;
}
</style>
</head>
<body>
<h1>小学数学出题界面</h1>
<div class="container">
<div class="options">
<div>
<p>请选择运算符：</p>
<label><input type="checkbox" id="add" checked> 加法</label>
<label><input type="checkbox" id="sub"> 减法</label>
<label><input type="checkbox" id="mul"> 乘法</label>
<label><input type="checkbox" id="div"> 除法</label>
</div>
<div>
<p>请选择出题数量：</p>
<input type="number" id="num" min="1" max="10" value="5">
<button id="gen">生成题目</button>
</div>
<div>
<p>请选择数字范围：</p>
<label>最小值：<input type="number" id="min" min="1" max="9" value="1"></label>
<label>最大值：<input type="number" id="max" min="2" max="10" value="10"></label>
</div>
</div><hr><button class="print">打印题目</button>
<div class="questions">
</div>
</div>
<script>
// 获取页面元素
var add = document.getElementById("add");
var sub = document.getElementById("sub");
var mul = document.getElementById("mul");
var div = document.getElementById("div");
var num = document.getElementById("num");
var min = document.getElementById("min");
var max = document.getElementById("max");
var gen = document.getElementById("gen");
var questions = document.getElementsByClassName("questions")[0];
// 定义运算符和对应的函数
var operators = ["+", "-", "×", "÷"];
var functions = [
function(a, b) { return a + b; },
function(a, b) { return a - b; },
function(a, b) { return a * b; },
function(a, b) { return a / b; }
];
// 定义生成随机整数的函数
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 定义生成题目的函数
function generateQuestions() {
// 清空原有的题目
questions.innerHTML = "";
// 获取用户选择的运算符、出题数量和数字范围
var selectedOperators = [];
if (add.checked) selectedOperators.push(0);
if (sub.checked) selectedOperators.push(1);
if (mul.checked) selectedOperators.push(2);
if (div.checked) selectedOperators.push(3);
var questionNum = parseInt(num.value);
var minValue = parseInt(min.value);
var maxValue = parseInt(max.value);
// 判断用户是否至少选择了一个运算符
if (selectedOperators.length == 0) {
alert("请至少选择一个运算符！");
return;
}
// 判断用户是否输入了合理的数字范围
if (minValue >= maxValue) {
alert("最小值应该小于最大值！");
return;
}
// 随机生成题目并显示在页面上
for (var i = 0; i < questionNum; i++) {
// 随机选择一个运算符
var opIndex = randomInt(0, selectedOperators.length - 1);
var op = operators[selectedOperators[opIndex]];
var func = functions[selectedOperators[opIndex]];
// 随机生成两个操作数，保证结果为正整数
var a, b, result;
do {
a = randomInt(minValue, maxValue);
b = randomInt(minValue, maxValue);
result = func(a, b);
} while (!Number.isInteger(result) || result <= 0);
// 创建一个段落元素，显示题目
var p = document.createElement("p");
p.textContent = a + " " + op + " " + b + " = ";
questions.appendChild(p);
// 创建一个输入框元素，供用户输入答案
var input = document.createElement("input");
input.type = "number";
input.min = "0";
input.max = "100";
input.size = "4";
questions.appendChild(input);
}
}
// 为生成题目按钮添加点击事件监听器
gen.addEventListener("click", generateQuestions);
</script>
</body>
</html>
| 
[复制链接]
发表于 2023-10-10 10:47
|
发表于 2023-10-10 11:01
