本次分享吧整理的是精品源码资源：小学生数学出题源代码加强版，支持自定义加减乘除混合运算及一键打印，只需要一个简单页面就可以实现小学数学出题，非常好用，强烈推荐。
详细源代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em;
}
.container {
max-width: 800px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.hidden {
display: block;
}
#options {
margin-bottom: 20px;
line-height: 28px;
}
input{
max-width: 50px;
}
.print-r {
text-align: center;
font-size: 18px;
padding: 20px;
}
label {
margin-right: 10px;
}
#questions {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.question {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
color: #000;
button.btn {
padding: 5px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
}
</style>
<title>小学数学出题器_www.fx8y.com</title>
</head>
<body>
<div class="header">
<h1>小学数学出题器_www.fx8y.com</h1>
<h3>说明：生成题目后，点击显示/隐藏选项，即可打印纯净试卷。</h3>
</div>
<p style="text-align:center;margin-top:10px"><button style="padding: 5px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;" onclick="toggleOptions()">显示/隐藏选项</button> <button style="padding: 5px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;" onclick="printQuestions()">一键打印题目</button></p>
<div class="container">
<div class="print-r">姓名：_________ 日期：____月____日 时间：________ 对题：____道<br><br></div>
<div id="options" class="hidden">
<label>运算符:</label>
<input type="checkbox" id="addition" checked> 加法
<input type="checkbox" id="subtraction" checked> 减法
<input type="checkbox" id="multiplication" checked> 乘法
<input type="checkbox" id="division" checked> 除法
<br>
<label>数字个数:</label>
<input type="number" id="numDigits" value="2">
<br><label>允许小数:</label>
<input type="checkbox" id="allowDecimal"> 是
<br><label>题目数量:</label>
<input type="number" id="numQuestions" value="10">
<br><label>数字范围:</label>
<input type="number" id="minRange" value="1">
<span>-</span>
<input type="number" id="maxRange" value="100">
<br><label>文字颜色:</label>
<input type="color" id="textColor" value="#000000">
<br><button style="padding: 5px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;" onclick="generateQuestions()">生成题目</button>
</div>
<div id="questions" class="hidden"></div>
</div>
<script>
// script.js
function toggleOptions() {
var content = document.getElementById("options");
if (content.style.display === "none") {
content.style.display = "block";
} else {
content.style.display = "none";
}
}
function generateQuestions() {
const operators = getSelectedOperators();
const numDigits = parseInt(document.getElementById("numDigits").value);
const allowDecimal = document.getElementById("allowDecimal").checked;
const numQuestions = parseInt(document.getElementById("numQuestions").value);
const minRange = parseInt(document.getElementById("minRange").value);
const maxRange = parseInt(document.getElementById("maxRange").value);
const textColor = document.getElementById("textColor").value;
const questionsContainer = document.getElementById("questions");
questionsContainer.innerHTML = "";
for (let i = 0; i < numQuestions; i++) {
const question = generateQuestion(operators, numDigits, allowDecimal, minRange, maxRange);
const questionElement = document.createElement("div");
questionElement.className = "question";
questionElement.style.color = textColor;
questionElement.textContent = `题${i + 1}：${question}`;
questionsContainer.appendChild(questionElement);
}
questionsContainer.classList.remove('hidden');
}
function getSelectedOperators() {
const operators = [];
if (document.getElementById("addition").checked) operators.push("+");
if (document.getElementById("subtraction").checked) operators.push("-");
if (document.getElementById("multiplication").checked) operators.push("*");
if (document.getElementById("division").checked) operators.push("/");
return operators;
}
function generateRandomNumber(min, max, allowDecimal) {
const randomNumber = Math.random() * (max - min) + min;
return allowDecimal ? randomNumber.toFixed(2) : Math.floor(randomNumber);
}
function generateQuestion(operators, numDigits, allowDecimal, minRange, maxRange) {
const numbers = Array.from({ length: numDigits }, () => generateRandomNumber(minRange, maxRange, allowDecimal));
const operatorArray = Array.from({ length: numDigits - 1 }, () => operators[Math.floor(Math.random() * operators.length)]);
let questionString = numbers[0].toString();
for (let i = 1; i < numDigits; i++) {
questionString += ` ${operatorArray[i - 1]} ${numbers[i]}`;
}
let result = eval(questionString);
while ((!allowDecimal && (result % 1 !== 0 || result < 0)) || result < 0) {
numbers.forEach((_, index) => {
numbers[index] = generateRandomNumber(minRange, maxRange, allowDecimal);
});
operatorArray.forEach((_, index) => {
operatorArray[index] = operators[Math.floor(Math.random() * operators.length)];
});
questionString = numbers[0].toString();
for (let i = 1; i < numDigits; i++) {
questionString += ` ${operatorArray[i - 1]} ${numbers[i]}`;
}
result = eval(questionString);
}
return questionString + " = " + "_________"
//如果需要显示答案，注释上面一行，显示下面一行即可
//return questionString + " = " + "_________"+"答案："+result;
}
function printQuestions() {
window.print();
}
</script>
</body>
</html>
原文链接：https://www.fx8y.com/code/829.html，转载请注明出处。
免责声明：根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
用户须知：分享吧(www.fx8y.com)是非经营性个人站点，所有软件信息均来自网络及网友投稿，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途，网站会员捐赠是您喜欢本站而产生的赞助支持行为，仅为维持服务器的开支与维护，全凭自愿无任何强求。
