小学数学练习出题（全平台手机电脑可运行及A4图片保存）

文章正文

发布时间：2025-10-27 14:54

yehenanjing 发表于 2024-11-21 16:13
这个好，感谢楼主，最近给孩子出题绞尽脑汁，找到这个方便多了，论坛里有好多这种的，不过我找了几个不能自 ...

我也弄了个能满足你的要求

[Asm] 纯文本查看复制代码

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小学数学出题系统</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> <script> tailwind.config = { theme: { extend: { colors: { primary: '#1E40AF', secondary: '#3B82F6', accent: '#60A5FA', neutral: '#F3F4F6', glass: 'rgba(255, 255, 255, 0.7)' }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, }, } } </script> <style type="text/tailwindcss"> [url=home.php?mod=space&uid=1688376]@layer[/url] utilities { .content-auto { content-visibility: auto; } .glass-effect { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .border-dashed-rounded { border-style: dashed; border-radius: 0.75rem; } .btn-dashed { border-style: dashed; border-radius: 9999px; } .math-icon { border-radius: 9999px; border: 2px solid theme('colors.primary'); } .page-shadow { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .scale-hover { transition: transform 0.2s ease-in-out; } .scale-hover:hover { transform: scale(1.02); } .scrollbar-thin { scrollbar-width: thin; } .scrollbar-thin::-webkit-scrollbar { width: 4px; } .scrollbar-thin::-webkit-scrollbar-thumb { background-color: rgba(156, 163, 175, 0.5); border-radius: 2px; } } </style> </head> <body class="bg-gray-100 min-h-screen font-sans">  <header class="fixed top-0 left-0 right-0 z-50 glass-effect border-b border-primary/20"> <div class="container mx-auto px-4 py-3 flex items-center justify-between"> <div class="flex items-center space-x-2"> <i class="fa-solid fa-calculator text-primary text-2xl"></i> <h1 class="text-xl font-bold text-primary">小学数学出题系统</h1> </div>  <button id="settings-toggle" class="math-icon p-2 bg-white hover:bg-blue-50 transition-colors duration-300"> <i class="fa-solid fa-calculator text-primary text-xl"></i> </button> </div> </header>  <div id="settings-panel" class="fixed top-0 left-0 h-full w-72 bg-white border-r border-primary/20 transform -translate-x-full transition-transform duration-300 ease-in-out z-40 overflow-y-auto scrollbar-thin"> <div class="p-4 h-full flex flex-col"> <div class="flex justify-between items-center mb-6"> <h2 class="text-lg font-semibold text-primary">题目设置</h2> <button id="close-settings" class="btn-dashed p-1 border-primary text-primary hover:bg-primary/10 transition-colors"> <i class="fa-solid fa-times"></i> </button> </div> <form id="settings-form" class="space-y-4"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">班级</label> <input type="text" id="class-name" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="请输入班级"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label> <input type="text" id="student-name" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="请输入姓名"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">年级</label> <select id="grade" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all"> <option value="1">一年级</option> <option value="2">二年级</option> <option value="3">三年级</option> </select> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">每行题目数量</label> <input type="number" id="problems-per-row" min="1" max="10" value="4" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">每页行数</label> <input type="number" id="rows-per-page" min="1" max="30" value="10" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">总页数</label> <input type="number" id="total-pages" min="1" max="20" value="1" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">字体大小 (px)</label> <input type="number" id="font-size" min="12" max="36" value="16" class="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all"> </div> <button type="button" id="generate-problems" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center"> <i class="fa-solid fa-refresh mr-2"></i> 生成题目 </button> </form> <div class="mt-auto pt-4 border-t border-gray-200"> <button id="export-pdf" class="w-full bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center"> <i class="fa-solid fa-file-pdf mr-2"></i> 导出PDF </button> <button id="print" class="w-full mt-2 bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center"> <i class="fa-solid fa-print mr-2"></i> 打印 </button> </div> </div> </div>  <main class="container mx-auto px-4 pt-20 pb-10">  <div class="flex border-b border-gray-200 mb-6"> <button id="problems-tab" class="py-2 px-4 border-b-2 border-primary text-primary font-medium">题目页</button> <button id="answers-tab" class="py-2 px-4 border-b-2 border-transparent text-gray-500 hover:text-gray-700 font-medium">答案页</button> </div>  <div id="problems-page" class="space-y-6">  <div class="glass-effect rounded-xl border border-primary p-4 shadow-sm"> <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> <div> <span class="text-sm text-gray-500">日期：</span> <span id="current-date" class="font-medium"></span> </div> <div> <span class="text-sm text-gray-500">姓名：</span> <span id="display-name" class="font-medium">未设置</span> </div> <div> <span class="text-sm text-gray-500">班级：</span> <span id="display-class" class="font-medium">未设置</span> </div> <div> <span class="text-sm text-gray-500">分数：</span> <span class="font-medium">________</span> </div> </div> </div>  <div class="space-y-8" id="problems-container">  <div class="flex justify-center items-center py-12"> <div class="text-center"> <i class="fa-solid fa-calculator text-gray-300 text-5xl mb-4"></i> <p class="text-gray-500">请点击右上角设置图标并生成题目</p> </div> </div> </div> </div>  <div id="answers-page" class="space-y-6 hidden">  <div class="glass-effect rounded-xl border border-primary p-4 shadow-sm"> <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> <div> <span class="text-sm text-gray-500">日期：</span> <span id="current-date-answers" class="font-medium"></span> </div> <div> <span class="text-sm text-gray-500">姓名：</span> <span id="display-name-answers" class="font-medium">未设置</span> </div> <div> <span class="text-sm text-gray-500">班级：</span> <span id="display-class-answers" class="font-medium">未设置</span> </div> <div> <span class="text-sm text-gray-500">答案：</span> <span class="font-medium"></span> </div> </div> </div>  <div class="space-y-8" id="answers-container">  <div class="flex justify-center items-center py-12"> <div class="text-center"> <i class="fa-solid fa-check-circle text-gray-300 text-5xl mb-4"></i> <p class="text-gray-500">请先在题目页生成题目</p> </div> </div> </div> </div> </main>  <div id="overlay" class="fixed inset-0 bg-black/30 z-30 hidden"></div>  <div id="pdf-container" class="hidden"> <div id="pdf-content">  </div> </div> <script> // 全局变量存储当前题目和答案 let currentProblems = []; let currentAnswers = []; // DOM元素 const settingsToggle = document.getElementById('settings-toggle'); const closeSettings = document.getElementById('close-settings'); const settingsPanel = document.getElementById('settings-panel'); const overlay = document.getElementById('overlay'); const problemsTab = document.getElementById('problems-tab'); const answersTab = document.getElementById('answers-tab'); const problemsPage = document.getElementById('problems-page'); const answersPage = document.getElementById('answers-page'); const generateProblemsBtn = document.getElementById('generate-problems'); const exportPdfBtn = document.getElementById('export-pdf'); const printBtn = document.getElementById('print'); const problemsContainer = document.getElementById('problems-container'); const answersContainer = document.getElementById('answers-container'); const pdfContainer = document.getElementById('pdf-container'); const pdfContent = document.getElementById('pdf-content'); // 初始化日期 document.getElementById('current-date').textContent = new Date().toLocaleDateString('zh-CN'); document.getElementById('current-date-answers').textContent = new Date().toLocaleDateString('zh-CN'); // 侧边栏设置面板控制 settingsToggle.addEventListener('click', () => { settingsPanel.classList.remove('-translate-x-full'); overlay.classList.remove('hidden'); }); closeSettings.addEventListener('click', () => { settingsPanel.classList.add('-translate-x-full'); overlay.classList.add('hidden'); }); overlay.addEventListener('click', () => { settingsPanel.classList.add('-translate-x-full'); overlay.classList.add('hidden'); }); // 标签页切换 problemsTab.addEventListener('click', () => { problemsTab.classList.add('border-primary', 'text-primary'); problemsTab.classList.remove('border-transparent', 'text-gray-500'); answersTab.classList.add('border-transparent', 'text-gray-500'); answersTab.classList.remove('border-primary', 'text-primary'); problemsPage.classList.remove('hidden'); answersPage.classList.add('hidden'); }); answersTab.addEventListener('click', () => { answersTab.classList.add('border-primary', 'text-primary'); answersTab.classList.remove('border-transparent', 'text-gray-500'); problemsTab.classList.add('border-transparent', 'text-gray-500'); problemsTab.classList.remove('border-primary', 'text-primary'); answersPage.classList.remove('hidden'); problemsPage.classList.add('hidden'); // 如果还没有生成答案，显示提示 if (currentAnswers.length === 0) { answersContainer.innerHTML = ` <div class="flex justify-center items-center py-12"> <div class="text-center"> <i class="fa-solid fa-check-circle text-gray-300 text-5xl mb-4"></i> <p class="text-gray-500">请先在题目页生成题目</p> </div> </div> `; } }); // 生成题目 generateProblemsBtn.addEventListener('click', () => { // 获取设置值并进行验证 const className = document.getElementById('class-name').value || '未设置'; const studentName = document.getElementById('student-name').value || '未设置'; const grade = parseInt(document.getElementById('grade').value); const problemsPerRow = parseInt(document.getElementById('problems-per-row').value) || 4; const rowsPerPage = parseInt(document.getElementById('rows-per-page').value) || 10; const totalPages = parseInt(document.getElementById('total-pages').value) || 1; const fontSize = parseInt(document.getElementById('font-size').value) || 16; // 更新显示信息 document.getElementById('display-name').textContent = studentName; document.getElementById('display-class').textContent = className; document.getElementById('display-name-answers').textContent = studentName; document.getElementById('display-class-answers').textContent = className; // 生成题目 const totalProblems = problemsPerRow * rowsPerPage * totalPages; [currentProblems, currentAnswers] = generateMathProblems(totalProblems, grade); // 渲染题目 renderProblems(currentProblems, problemsPerRow, rowsPerPage, totalPages, fontSize); // 关闭设置面板 settingsPanel.classList.add('-translate-x-full'); overlay.classList.add('hidden'); // 切换到题目页 problemsTab.click(); }); // 导出PDF exportPdfBtn.addEventListener('click', () => { if (currentProblems.length === 0) { alert('请先生成题目'); return; } // 显示加载状态 const originalText = exportPdfBtn.innerHTML; exportPdfBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i> 正在生成PDF...'; exportPdfBtn.disabled = true; try { const className = document.getElementById('class-name').value || '未设置'; const studentName = document.getElementById('student-name').value || '未设置'; const grade = parseInt(document.getElementById('grade').value); const problemsPerRow = parseInt(document.getElementById('problems-per-row').value) || 4; const rowsPerPage = parseInt(document.getElementById('rows-per-page').value) || 10; const totalPages = parseInt(document.getElementById('total-pages').value) || 1; const fontSize = parseInt(document.getElementById('font-size').value) || 16; // 生成PDF内容 generatePdfContent(currentProblems, currentAnswers, className, studentName, problemsPerRow, rowsPerPage, totalPages, fontSize); // 创建临时元素来保存PDF内容并渲染 const tempElement = document.createElement('div'); tempElement.className = 'fixed top-0 left-0 w-full h-full bg-white z-50 flex items-center justify-center'; tempElement.appendChild(pdfContent.cloneNode(true)); document.body.appendChild(tempElement); // 等待DOM渲染完成 setTimeout(() => { // 使用html2canvas和jsPDF导出PDF html2canvas(tempElement.querySelector('#pdf-content'), { scale: 2, useCORS: true, logging: false, letterRendering: true, allowTaint: true, scrollX: 0, scrollY: 0 }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jspdf.jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' }); const imgWidth = 210; const imgHeight = canvas.height * imgWidth / canvas.width; // 计算总页数 const totalPdfPages = Math.ceil(imgHeight / 297); // 添加每一页 for (let i = 0; i < totalPdfPages; i++) { if (i > 0) pdf.addPage(); const y = i * 297; pdf.addImage(imgData, 'PNG', 0, -y, imgWidth, imgHeight); } pdf.save('数学题目.pdf'); // 移除临时元素 document.body.removeChild(tempElement); // 恢复按钮状态 exportPdfBtn.innerHTML = originalText; exportPdfBtn.disabled = false; }).catch(error => { console.error('导出PDF失败:', error); alert('导出PDF时出错，请重试'); // 移除临时元素 document.body.removeChild(tempElement); // 恢复按钮状态 exportPdfBtn.innerHTML = originalText; exportPdfBtn.disabled = false; }); }, 100); } catch (error) { console.error('导出PDF时发生错误:', error); alert('导出PDF时发生错误，请重试'); // 恢复按钮状态 exportPdfBtn.innerHTML = originalText; exportPdfBtn.disabled = false; } }); // 打印功能 printBtn.addEventListener('click', () => { if (currentProblems.length === 0) { alert('请先生成题目'); return; } window.print(); }); // 生成数学题目 function generateMathProblems(count, grade) { const problems = []; const answers = []; for (let i = 0; i < count; i++) { let problem, answer; // 根据年级确定题目类型和难度 if (grade === 1) { // 一年级：20以内加减法 const op = Math.random() < 0.5 ? '+' : '-'; if (op === '+') { // 加法：确保结果不超过20 const a = Math.floor(Math.random() * 10) + 1; const b = Math.floor(Math.random() * (20 - a)) + 1; problem = `${a} + ${b} =`; answer = a + b; } else { // 减法：确保结果为正数 const a = Math.floor(Math.random() * 10) + 11; const b = Math.floor(Math.random() * a) + 1; problem = `${a} - ${b} =`; answer = a - b; } } else if (grade === 2) { // 二年级：100以内加减法，引入乘法 const ops = ['+', '-', '*']; const op = ops[Math.floor(Math.random() * ops.length)]; if (op === '+') { // 加法：确保结果不超过100 const a = Math.floor(Math.random() * 50) + 1; const b = Math.floor(Math.random() * (100 - a)) + 1; problem = `${a} + ${b} =`; answer = a + b; } else if (op === '-') { // 减法：确保结果为正数 const a = Math.floor(Math.random() * 50) + 51; const b = Math.floor(Math.random() * a) + 1; problem = `${a} - ${b} =`; answer = a - b; } else { // 乘法：确保结果不超过100 const a = Math.floor(Math.random() * 10) + 1; const b = Math.floor(Math.random() * (100 / a)) + 1; problem = `${a} × ${b} =`; answer = a * b; } } else if (grade === 3) { // 三年级：加入除法和混合运算 const ops = ['+', '-', '*', '/', 'mix']; const op = ops[Math.floor(Math.random() * ops.length)]; if (op === '+') { // 加法 const a = Math.floor(Math.random() * 50) + 1; const b = Math.floor(Math.random() * 50) + 1; problem = `${a} + ${b} =`; answer = a + b; } else if (op === '-') { // 减法 const a = Math.floor(Math.random() * 100) + 1; const b = Math.floor(Math.random() * a) + 1; problem = `${a} - ${b} =`; answer = a - b; } else if (op === '*') { // 乘法 const a = Math.floor(Math.random() * 10) + 1; const b = Math.floor(Math.random() * 10) + 1; problem = `${a} × ${b} =`; answer = a * b; } else if (op === '/') { // 除法：确保能够整除 const b = Math.floor(Math.random() * 9) + 2; // 除数不能为0或1 const a = b * (Math.floor(Math.random() * 10) + 1); // 被除数是除数的倍数 problem = `${a} ÷ ${b} =`; answer = a / b; } else { // 混合运算 const a = Math.floor(Math.random() * 20) + 1; const b = Math.floor(Math.random() * 10) + 1; const c = Math.floor(Math.random() * 10) + 1; // 随机选择运算顺序 if (Math.random() < 0.5) { // 先乘除后加减 if (Math.random() < 0.5) { // 先乘后加 problem = `${a} + ${b} × ${c} =`; answer = a + b * c; } else { // 先除后加 problem = `${a} + ${b * c} ÷ ${b} =`; answer = a + c; } } else { // 有括号的运算 if (Math.random() < 0.5) { // 括号内加法 problem = `(${a} + ${b}) × ${c} =`; answer = (a + b) * c; } else { // 括号内减法 problem = `(${a} - ${b}) × ${c} =`; answer = (a - b) * c; } } } } problems.push(problem); answers.push(answer); } return [problems, answers]; } // 渲染题目 function renderProblems(problems, problemsPerRow, rowsPerPage, totalPages, fontSize) { problemsContainer.innerHTML = ''; answersContainer.innerHTML = ''; const totalProblems = problems.length; const problemsPerPage = problemsPerRow * rowsPerPage; // 计算实际需要的页数 const actualPages = Math.ceil(totalProblems / problemsPerPage); // 渲染题目页 for (let page = 0; page < actualPages; page++) { const startIdx = page * problemsPerPage; const endIdx = Math.min(startIdx + problemsPerPage, totalProblems); if (startIdx >= totalProblems) break; const pageProblems = problems.slice(startIdx, endIdx); const pageElement = document.createElement('div'); pageElement.className = 'glass-effect rounded-xl border border-primary p-6 page-shadow scale-hover'; let pageContent = `<div class="text-center mb-6"><h2 class="text-lg font-semibold">第 ${page + 1} 页</h2></div>`; // 使用CSS Grid按照每行题目数量排列 pageContent += `<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-${problemsPerRow} gap-4">`; pageProblems.forEach((problem, idx) => { pageContent += ` <div class="p-2 border border-gray-200 rounded-lg bg-white"> <span class="text-gray-500">${startIdx + idx + 1}. </span> <span style="font-size: ${fontSize}px">${problem}</span> <span class="ml-2">________</span> </div> `; }); pageContent += '</div>'; pageElement.innerHTML = pageContent; problemsContainer.appendChild(pageElement); } // 渲染答案页 for (let page = 0; page < actualPages; page++) { const startIdx = page * problemsPerPage; const endIdx = Math.min(startIdx + problemsPerPage, totalProblems); if (startIdx >= totalProblems) break; const pageAnswers = currentAnswers.slice(startIdx, endIdx); const pageProblems = currentProblems.slice(startIdx, endIdx); const pageElement = document.createElement('div'); pageElement.className = 'glass-effect rounded-xl border border-primary p-6 page-shadow scale-hover'; let pageContent = `<div class="text-center mb-6"><h2 class="text-lg font-semibold">第 ${page + 1} 页答案</h2></div>`; // 使用CSS Grid按照每行题目数量排列 pageContent += `<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-${problemsPerRow} gap-4">`; pageAnswers.forEach((answer, idx) => { pageContent += ` <div class="p-2 border border-gray-200 rounded-lg bg-white"> <span class="text-gray-500">${startIdx + idx + 1}. </span> <span style="font-size: ${fontSize}px">${pageProblems[idx]}</span> <span class="ml-2 font-medium">${answer}</span> </div> `; }); pageContent += '</div>'; pageElement.innerHTML = pageContent; answersContainer.appendChild(pageElement); } } // 生成PDF内容 function generatePdfContent(problems, answers, className, studentName, problemsPerRow, rowsPerPage, totalPages, fontSize) { pdfContent.innerHTML = ''; const totalProblems = problems.length; const problemsPerPage = problemsPerRow * rowsPerPage; // 计算实际需要的页数 const actualPages = Math.ceil(totalProblems / problemsPerPage); // 设置PDF样式 const styleElement = document.createElement('style'); styleElement.textContent = ` [url=home.php?mod=space&uid=1953840]@page[/url] { size: A4; margin: 1.5cm; } body { font-family: 'Inter', system-ui, sans-serif; } .pdf-page { page-break-after: always; margin-bottom: 20px; } .problem-grid { display: grid; grid-template-columns: repeat(${problemsPerRow}, 1fr); gap: 10px; } .problem-item { padding: 5px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 5px; } .answer-item { padding: 5px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 5px; } .title { text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 15px; } .info-row { display: flex; justify-content: space-between; margin-bottom: 20px; } .page-title { text-align: center; font-size: 18px; font-weight: semibold; margin-bottom: 15px; } `; pdfContent.appendChild(styleElement); // 添加题目页 for (let page = 0; page < actualPages; page++) { const startIdx = page * problemsPerPage; const endIdx = Math.min(startIdx + problemsPerPage, totalProblems); if (startIdx >= totalProblems) break; const pageProblems = problems.slice(startIdx, endIdx); const pageElement = document.createElement('div'); pageElement.className = 'pdf-page'; let pageContent = ` <div class="title">数学练习题</div> <div class="info-row"> <div><span class="font-medium">班级：</span>${className}</div> <div><span class="font-medium">姓名：</span>${studentName}</div> <div><span class="font-medium">分数：</span>________</div> </div> <div class="page-title">第 ${page + 1} 页</div> <div class="problem-grid"> `; pageProblems.forEach((problem, idx) => { pageContent += ` <div class="problem-item"> <span class="text-gray-500">${startIdx + idx + 1}. </span> <span style="font-size: ${fontSize}px">${problem}</span> <span class="ml-2">________</span> </div> `; }); pageContent += '</div>'; pageElement.innerHTML = pageContent; pdfContent.appendChild(pageElement); } // 添加分页符 const pageBreak = document.createElement('div'); pageBreak.className = 'page-break'; pageBreak.style.pageBreakAfter = 'always'; pdfContent.appendChild(pageBreak); // 添加答案页 for (let page = 0; page < actualPages; page++) { const startIdx = page * problemsPerPage; const endIdx = Math.min(startIdx + problemsPerPage, totalProblems); if (startIdx >= totalProblems) break; const pageAnswers = answers.slice(startIdx, endIdx); const pageProblems = problems.slice(startIdx, endIdx); const pageElement = document.createElement('div'); pageElement.className = 'pdf-page'; let pageContent = ` <div class="title">数学练习题答案</div> <div class="info-row"> <div><span class="font-medium">班级：</span>${className}</div> <div><span class="font-medium">姓名：</span>${studentName}</div> <div></div> </div> <div class="page-title">第 ${page + 1} 页答案</div> <div class="problem-grid"> `; pageAnswers.forEach((answer, idx) => { pageContent += ` <div class="answer-item"> <span class="text-gray-500">${startIdx + idx + 1}. </span> <span style="font-size: ${fontSize}px">${pageProblems[idx]}</span> <span class="ml-2 font-medium">${answer}</span> </div> `; }); pageContent += '</div>'; pageElement.innerHTML = pageContent; pdfContent.appendChild(pageElement); } } </script> </body> </html>