小学数学出题，加减乘除运算，网页版
本帖最后由 xiaoguyan 于 2023-10-10 10:49 编辑闲来无事，看到小朋友作业不多，写了个小学数学出题，加减乘除运算，网页版。
比较简陋，实现简单功能，大家可以根据需要美化。
在线预览：https://uutool.cn/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");
// 定义运算符和对应的函数
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];
var func = functions];
// 随机生成两个操作数，保证结果为正整数
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>
要是可以设置混合运算就更好了 小朋友作业少。。。看看有没有符合下列要求:
九、小学生必须掌握的八个技能
(一) 娴熟掌握至少两种以上运动技能(必须包括游泳在内)伴随终身并形成终身锻炼的习惯。
(二)形成终身阅读的习惯，小学阶段不低于1000万字的阅读量(约200本课外读物，其中必须包含50本中外名著，30本古今中外名人传记，30本科普读物，30本纯英语读物)。
(三)掌握演奏一种以上乐器的技能并形成欣赏高雅音乐的兴趣和爱好。
(四)能说一口流利的普通话和英语。
(五)能写得一手漂亮的硬笔字和学会书写毛笔字。
(六)能独立做一桌家常饭菜。学会做家务的技能并养成热爱做家务的习惯。
(七)学生在毕业前能参与完成一项实验，并写出一份较完整的实验报告，在科技文化节展示。
(八) 具有创新意识，能积极参与科技创新活动。
so这才是作业 能打印出来吗 601541027 发表于 2023-10-10 10:57
能打印出来吗
可以，保存到本地。新建文本文档，粘贴代码后保存，然后把文件后缀改为.html运行，出题就可以打印了 感谢分享{:1_893:} 赞，谢谢分享！ 不错，很好 有用有用，谢谢啦 感谢分享 牛牛牛牛牛