在線預(yù)覽：在線HTML代碼預(yù)覽和運行工具 - UU在線工具? ?復制下面代碼后到該地址預(yù)覽即可
?注意：在線預(yù)覽不能打印。如需打印，在電腦本地上新建文本文檔，粘貼代碼后保存，然后把文件后綴改為.html運行，出題點擊打印就可以了文章來源：http://www.zghlxwxcb.cn/news/detail-797546.html
新增功能：
1、支持加減乘除運算混合多選
2、支持自定義數(shù)字運算個數(shù)
3、支持自定義出題數(shù)量
4、支持一鍵打印成pdf
5、小學數(shù)學沒有負數(shù)，保證結(jié)果不出現(xiàn)負數(shù)
6、出題分列展示、新增答案下劃線
7、界面美化文章來源地址http://www.zghlxwxcb.cn/news/detail-797546.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小學生數(shù)學題生成器</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
display: block;
flex-direction: column;
align-items: center;
justify-content: center;
}
#options {
display: block;
margin: 20px auto;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
box-sizing: border-box;
width: 500px;
line-height: 35px;
}
label {
margin-right: 10px;
margin-bottom: 10px;
font-size: 16px;
}
button {
padding: 5px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#questions {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20px;
}
.question {
width: 48%;
box-sizing: border-box;
padding: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
font-size: 18px;
}
.answer {
display: none;
font-size: 16px;
}
#printHeader {
display: none;
margin-bottom: 20px;
}
@media print {
#printHeader {
display: block;
text-align: center;
margin-bottom: 30px;
}
body {
margin: 30px;
}
.column {
display: inline-block;
width: 48%;
box-sizing: border-box;
margin-bottom: 20px;
break-before: auto;
}
.question {
page-break-inside: avoid;
}
@page {
size: A4;
margin: 25mm 10mm 25mm 10mm;
}
.question:nth-child(n+21) {
display: none;
}
}
div#printHeader {
text-align: center;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="hd1" style="text-align:center;font-size:35px;background-color: #4CAF50;min-height: 100px;padding-top: 50px;"><font>小學生數(shù)學題生成器</font></div>
<div id="options">運算符號：
<label>
<input type="checkbox" id="additionCheckbox" checked="checked"> 加法
</label>
<label>
<input type="checkbox" id="subtractionCheckbox"> 減法
</label>
<label>
<input type="checkbox" id="multiplicationCheckbox"> 乘法
</label>
<label>
<input type="checkbox" id="divisionCheckbox"> 除法
</label>
<br>
<label>
數(shù)字個數(shù)：<input type="number" id="numOfDigits" value="2" min="1" style="width: 50px;">
</label> <br>
<label>
允許小數(shù)：<input type="checkbox" id="allowDecimal">
</label>
<br>
<label>
數(shù)字范圍：
<label><input type="number" id="minRange" value="1" min="1" style="width: 50px;"></label>-
<label><input type="number" id="maxRange" value="100" min="1" style="width: 50px;"></label>
</label>
<br>
<label>
出題數(shù)量：<input type="number" id="numOfQuestions" value="30" min="1" style="width: 50px;">
</label>
<br>
<button onclick="generateQuestions()">生成題目</button>
<button onclick="printQuestions()">一鍵打印</button>
<button onclick="toggleAnswers()">顯示/隱藏答案</button>
</div>
<div id="questions"></div>
<script>
function generateQuestions() {
const addition = document.getElementById("additionCheckbox").checked;
const subtraction = document.getElementById("subtractionCheckbox").checked;
const multiplication = document.getElementById("multiplicationCheckbox").checked;
const division = document.getElementById("divisionCheckbox").checked;
const numOfDigits = document.getElementById("numOfDigits").value;
const allowDecimal = document.getElementById("allowDecimal").checked;
const minRange = parseInt(document.getElementById("minRange").value);
const maxRange = parseInt(document.getElementById("maxRange").value);
const numOfQuestions = document.getElementById("numOfQuestions").value;
const questionsContainer = document.getElementById("questions");
questionsContainer.innerHTML = "";
for (let i = 0; i < numOfQuestions; i++) {
let validQuestion = false;
let questionText, answerText;
while (!validQuestion) {
const operators = getRandomOperators(addition, subtraction, multiplication, division, numOfDigits);
const numbers = generateNumbers(numOfDigits, allowDecimal, minRange, maxRange);
questionText = generateQuestionText(numbers, operators, allowDecimal);
answerText = calculateAnswer(numbers, operators, allowDecimal).toFixed(allowDecimal ? 2 : 0);
if (!containsNegativeNumber(questionText) && answerText >= 0) {
validQuestion = true;
}
}
const questionDiv = document.createElement("div");
questionDiv.classList.add("question");
questionDiv.innerHTML = `<span>${questionText}</span><span class="answer">${parseFloat(answerText)}</.toFixed(2)}</span>`;
questionsContainer.appendChild(questionDiv);
}
}
function getRandomOperators(addition, subtraction, multiplication, division, numOfDigits) {
const availableOperators = [];
if (addition) availableOperators.push('+');
if (subtraction) availableOperators.push('-');
if (multiplication && numOfDigits >= 2) availableOperators.push('*');
if (division && numOfDigits >= 2) availableOperators.push('/');
const selectedOperators = [];
for (let i = 0; i < numOfDigits - 1; i++) {
const randomOperator = availableOperators[Math.floor(Math.random() * availableOperators.length)];
selectedOperators.push(randomOperator);
}
return selectedOperators;
}
function generateQuestionText(numbers, operators, allowDecimal) {
let questionText = numbers[0].toString();
for (let i = 0; i < operators.length; i++) {
const operator = operators[i];
const num = allowDecimal ? parseFloat(numbers[i + 1]).toFixed(2) : parseInt(numbers[i + 1]);
questionText += ` ${operator.replace('*', 'x').replace('/', '÷')} ${num}`;
}
questionText += ' =';
return questionText;
}
function generateNumbers(numOfDigits, allowDecimal, minRange, maxRange) {
const randomNumber = () => allowDecimal
? (Math.random() * (maxRange - minRange) + minRange).toFixed(2)
: Math.floor(Math.random() * (maxRange - minRange + 1)) + minRange;
const numbers = [];
for (let i = 0; i < numOfDigits; i++) {
numbers.push(randomNumber());
}
return numbers;
}
function calculateAnswer(numbers, operators, allowDecimal) {
const calculateMulDiv = (nums, ops) => {
for (let i = 0; i < ops.length; i++) {
if (ops[i] === '*' || ops[i] === '/') {
const result = ops[i] === '*' ? nums[i] * nums[i + 1] : nums[i] / nums[i + 1];
nums.splice(i, 2, result);
ops.splice(i, 1);
i--;
}
}
};
const nums = numbers.map(num => parseFloat(num));
const ops = operators.map(op => op);
calculateMulDiv(nums, ops);
let result = nums[0];
for (let i = 0; i < ops.length; i++) {
const num = nums[i + 1];
const operator = ops[i];
switch (operator) {
case '+':
result += num;
break;
case '-':
result -= num;
break;
default:
break;
}
}
return allowDecimal
? parseFloat(result.toFixed(2))
: parseInt(result);
}
function containsNegativeNumber(questionText) {
const parts = questionText.split(' ');
for (let i = 0; i < parts.length; i++) {
if (parseFloat(parts[i]) < 0) {
return true;
}
}
return false;
}
function printQuestions() {
const printWindow = window.open('', '_blank');
const printContent = document.getElementById("questions").innerHTML;
printWindow.document.write(`
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打印題目</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 30px;
}
.column {
display: inline-block;
width: 48%;
box-sizing: border-box;
margin-bottom: 20px;
}
.question {
padding: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
font-size: 18px;
}
.answer {
display: none;
font-size: 16px;
}
</style>
</head>
<body>
<div id="printHeader" style="text-align: center;margin-bottom: 20px;">
<div>姓名：_________ 日期：____月____日 時間：________ 答對：_______題</div>
</div>
<div class="column" id="column1"></div>
<div class="column" id="column2"></div>
</body>
</html>
`);
const column1 = printWindow.document.getElementById("column1");
const column2 = printWindow.document.getElementById("column2");
const questions = document.querySelectorAll('.question');
let countColumn1 = 0;
let countColumn2 = 0;
questions.forEach((question, index) => {
const column = index % 2 === 0 ? column1 : column2;
const clonedQuestion = question.cloneNode(true);
// Replace answer content with formatted answer
const answerElement = clonedQuestion.querySelector('.answer');
const answerText = answerElement.textContent;
answerElement.textContent = parseFloat(answerText).toFixed(2);
column.appendChild(clonedQuestion);
if (index % 2 === 0) {
countColumn1++;
} else {
countColumn2++;
}
});
printWindow.document.close();
printWindow.print();
}
function toggleAnswers() {
const answers = document.querySelectorAll('.answer');
answers.forEach(answer => {
answer.style.display = (answer.style.display === 'none' || answer.style.display === '') ? 'inline' : 'none';
});
}
</script>
</body>
</html>
到了這里，關(guān)于【加強版】小學數(shù)學出題，加減乘除混合運算，支持自定義數(shù)字，一鍵打印的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
