console
const form = document.querySelector("form");
const countElem = document.querySelector("input[name=count]");
const printBtn = document.querySelector("#print");
function calculate(a, b, operator) {
if (operator === "+") {
return a + b;
} else if (operator === "-") {
return a - b;
}
}
function randomIntInRange(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function randomOperator(operators) {
return operators[Math.floor(Math.random() * operators.length)];
}
const resolvers = {
problem_100_abc_add() {
const self = resolvers.problem_100_abc_add;
const a = randomIntInRange(10, 99);
const b = randomIntInRange(10, 99);
const c = randomIntInRange(10, 99);
const result1 = calculate(a, b, "+");
if (result1 > 100) {
return self();
}
const result2 = calculate(result1, c, "+");
if (result2 > 100) {
return self();
}
return [a, "+", b, "+", c, "="].join(" ");
},
problem_100_abc_sub() {
const self = resolvers.problem_100_abc_sub;
const a = randomIntInRange(10, 99);
const b = randomIntInRange(10, 99);
const c = randomIntInRange(10, 99);
const result1 = calculate(a, b, "-");
if (result1 < 0) {
return self();
}
const result2 = calculate(result1, c, "-");
if (result2 < 0) {
return self();
}
return [a, "-", b, "-", c, "="].join(" ");
},
problem_100_abc_add_or_sub() {
const self = resolvers.problem_100_abc_add_or_sub;
const a = randomIntInRange(10, 99);
const b = randomIntInRange(10, 99);
const c = randomIntInRange(10, 99);
const op1 = randomOperator(["+", "-"]);
const result1 = calculate(a, b, op1);
if (result1 < 0 || result1 > 100) {
return self();
}
const op2 = randomOperator(["+", "-"]);
const result2 = calculate(result1, c, op2);
if (result2 < 0 || result2 > 100) {
return self();
}
return [a, op1, b, op2, c, "="].join(" ");
},
};
function generateHomework(e) {
e.preventDefault();
printBtn.disabled = true;
const formData = new FormData(this);
const type = formData.get("type");
const count = parseInt(formData.get("count"));
let problems = new Set();
while (problems.size < count) {
problems.add(resolvers[type]());
}
problems = Array.from(problems);
let rows = "";
while (problems.length > 0) {
const rowProblems = problems.splice(0, 3);
const tds = rowProblems.map(problem => `<td>${problem}</td>`);
rows += `<tr>${tds.join("")}</tr>`;
}
document.querySelector("tbody").innerHTML = rows;
printBtn.disabled = false;
}
function showCountLabel() {
const countLabel = document.querySelector("#count");
countLabel.textContent = this.value;
}
form.addEventListener("submit", generateHomework);
countElem.addEventListener("input", showCountLabel);
printBtn.addEventListener("click", () => print());
<header class="no-print">
<form>
<h1>小学二年级数学题随机生成器</h1>
<div>
<h3>题型:</h3>
<label>
<input
type="radio"
name="type"
value="problem_100_abc_add"
checked
/>
<span title="比如
15 + 33 + 21 =
17 + 26 + 33 =
不会出现加得数大于 100 的情况">100以内3个数的连加</span>
</label>
<label>
<input
type="radio"
name="type"
value="problem_100_abc_sub"
/>
<span title="比如
78 - 12 - 21 =
63 - 26 - 17 =
不会出现减法得数小于 0 的情况">100以内3个数的连减</span>
</label>
<label>
<input
type="radio"
name="type"
value="problem_100_abc_add_or_sub"
/>
<span title="比如
70 - 20 + 12 =
98 - 12 - 13 =
15 + 33 - 21 =
17 + 26 + 33 =
不会出现减法得出小于 0 或者加法得数大于 100 的情况。">100以内3个数的加减混合运算</span>
</label>
</div>
<div>
<h3>题量:</h3>
<input
type="range"
name="count"
min="6"
max="60"
step="6"
value="60"
/>
<output id="count">60</output>
</div>
<div>
<button type="submit">生成练习题</button>
<button type="button" id="print" disabled>打印练习题</button>
</div>
</form>
</header>
<main>
<table
border="0"
width="100%"
>
<tbody>
</tbody>
</table>
</main>
@media print {
.no-print {
display: none !important;
}
}
form > div { margin-bottom: 1em; }
form button { font-size: 1.5em; margin-right: 1em;}
form label { display: block; margin-bottom: 0.5em; }
table {
font-size: 20px;
font-family: Courier, monospace;
}
td {
padding-top: 0.3em;
padding-bottom: 0.3em;
}
tr:nth-of-type(2n) td {
padding-bottom: 1.6em;
}