零基础专升本英语：小白刷题天天练82 | 从基础知识点刷起，到作文素材的积累| 面面俱到 | 各省通用
html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>100以内口算天天练</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet"> <style> :root { --bg: #fdf8f0; --card: #ffffff; --accent: #e85d3a; --accent-light: #fff0ec; --line: #d4cfc6; --text: #2c2420; --text-muted: #9a928a; --green: #3a9e6e; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: 'Noto Sans SC', sans-serif; min-height: 100vh; padding: 30px 20px; } .page { max-width: 820px; margin: 0 auto; background: var(--card); border-radius: 18px; box-shadow: 0 4px 30px rgba(0,0,0,0.06); padding: 44px 48px 40px; position: relative; overflow: hidden; } .page::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--accent), #f4a261, var(--green)); } .header { text-align: center; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 2px dashed var(--line); } .header h1 { font-family: 'ZCOOL KuaiLe', cursive; font-size: 32px; color: var(--accent); letter-spacing: 4px; margin-bottom: 16px; position: relative; display: inline-block; } .header h1::before, .header h1::after { content: '✦'; font-size: 14px; position: absolute; top: 50%; transform: translateY(-50%); color: var(--green); } .header h1::before { left: -28px; } .header h1::after { right: -28px; } .info-bar { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; } .info-item { display: flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--text-muted); } .info-item .label { font-weight: 700; color: var(--text); } .info-item .blank { display: inline-block; min-width: 100px; border-bottom: 1.5px solid var(--line); height: 1em; } .meta-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 0 4px; } .meta-row .stamp { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .meta-row .stamp .box { width: 28px; height: 28px; border: 1.5px dashed var(--line); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 28px; } .problem { display: flex; align-items: baseline; padding: 10px 12px; border-right: 1px solid #eee; border-bottom: 1px solid #eee; font-size: 16px; min-height: 48px; position: relative; transition: background 0.15s; } .problem:hover { background: var(--accent-light); } .problem:nth-child(4n) { border-right: none; } .problem:nth-last-child(-n+4) { border-bottom: none; } .problem .num { font-size: 10px; color: var(--text-muted); position: absolute; top: 4px; left: 8px; font-weight: 400; } .problem .expr { font-family: 'ZCOOL KuaiLe', cursive; font-size: 18px; color: var(--text); flex-shrink: 0; padding-left: 2px; } .problem .eq { color: var(--text-muted); margin: 0 2px; font-family: 'ZCOOL KuaiLe', cursive; font-size: 18px; } .problem .ans-blank { display: inline-block; min-width: 44px; border-bottom: 1.5px solid var(--line); height: 1.1em; margin-left: 2px; } .footer-section { border-top: 2px dashed var(--line); padding-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .score-box { background: var(--accent-light); border-radius: 12px; padding: 18px 22px; } .score-box h3 { font-size: 14px; color: var(--accent); margin-bottom: 10px; font-weight: 700; } .score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .score-grid .item { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; } .score-grid .item .line { flex: 1; border-bottom: 1px solid var(--line); min-width: 40px; } .tips-box { background: #f0faf4; border-radius: 12px; padding: 18px 22px; } .tips-box h3 { font-size: 14px; color: var(--green); margin-bottom: 10px; font-weight: 700; } .tips-box ul { list-style: none; font-size: 12.5px; color: var(--text-muted); line-height: 2; } .tips-box ul li::before { content: '•'; color: var(--green); margin-right: 6px; font-weight: bold; } .timer-banner { text-align: center; margin-bottom: 22px; padding: 10px 0; background: linear-gradient(135deg, #fef3ec 0%, #f0faf4 100%); border-radius: 10px; border: 1px solid #f0e8df; } .timer-banner span { font-family: 'ZCOOL KuaiLe', cursive; font-size: 20px; color: var(--accent); letter-spacing: 2px; } .timer-banner small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 4px; } /* Print styles */ @media print { body { padding: 0; background: white; } .page { box-shadow: none; border-radius: 0; padding: 24px 28px; max-width: 100%; } .page::before { display: none; } .problem:hover { background: transparent; } .grid { border: 1.5px solid #999; } .problem { border-color: #ccc; } } @media (max-width: 600px) { .page { padding: 24px 16px; } .grid { grid-template-columns: repeat(2, 1fr); } .problem:nth-child(4n) { border-right: 1px solid #eee; } .problem:nth-child(2n) { border-right: none; } .problem:nth-last-child(-n+4) { border-bottom: 1px solid #eee; } .problem:nth-last-child(-n+2) { border-bottom: none; } .footer-section { grid-template-columns: 1fr; } } </style> </head> <body> <div class="page"> <div class="header"> <h1>100以内口算天天练</h1> <div class="info-bar"> <div class="info-item"> <span class="label">姓名</span> <span class="blank"></span> </div> <div class="info-item"> <span class="label">班级</span> <span class="blank"></span> </div> <div class="info-item"> <span class="label">日期</span> <span class="blank"></span> </div> </div> </div> <div class="timer-banner"> <span>计时：______ 分 ______ 秒</span> <small>每天坚持练习，计算越来越快！</small> </div> <div class="meta-row"> <div class="stamp">今日打卡 <span class="box">☐</span></div> <div class="stamp">全对奖励 <span class="box">★</span></div> </div> <div class="grid" id="grid"></div> <div class="footer-section"> <div class="score-box"> <h3>今日成绩单</h3> <div class="score-grid"> <div class="item">总题数 <span class="line"></span> 100</div> <div class="item">对 <span class="line"></span> 题</div> <div class="item">错 <span class="line"></span> 题</div> <div class="item">正确率 <span class="line"></span> %</div> <div class="item">用时 <span class="line"></span> 分</div> <div class="item">等级 <span class="line"></span></div> </div> </div> <div class="tips-box"> <h3>等级标准</h3> <ul> <li>S 级 — 8分钟内全对，口算达人！</li> <li>A 级 — 10分钟内错≤5题，非常棒！</li> <li>B 级 — 15分钟内完成，继续加油！</li> <li>每天一练，坚持就是胜利！</li> </ul> </div> </div> </div> <script> // Seed-based pseudo-random for reproducible daily sheets function seededRandom(seed) { let s = seed; return function() { s = (s * 16807 + 0) % 2147483647; return (s - 1) / 2147483646; }; } // Use today's date as seed const today = new Date(); const seed = today.getFullYear() * 10000 + (today.getMonth() + 1) * 100 + today.getDate(); const rand = seededRandom(seed); function generateProblems(count) { const problems = []; const used = new Set(); while (problems.length < count) { const type = rand() < 0.5 ? '+' : '-'; let a, b, result, key; if (type === '+') { a = Math.floor(rand() * 99) + 1; // 1–99 b = Math.floor(rand() * (100 - a)) + 1; // ensure a+b ≤ 100 result = a + b; key = `${a}+${b}`; } else { a = Math.floor(rand() * 99) + 2; // 2–100 b = Math.floor(rand() * a) + 1; // 1 ≤ b < a, result ≥ 1 result = a - b; key = `${a}-${b}`; } if (!used.has(key) && result >= 0 && result <= 100) { used.add(key); problems.push({ a, b, op: type, result }); } } return problems; } const problems = generateProblems(100); const grid = document.getElementById('grid'); problems.forEach((p, i) => { const el = document.createElement('div'); el.className = 'problem'; el.innerHTML = ` <span class="num">${i + 1}.</span> <span class="expr">${p.a} ${p.op} ${p.b}</span> <span class="eq">＝</span> <span class="ans-blank"></span> `; grid.appendChild(el); }); </script> </body> </html> 这是一个完整的可打印口算练习页面，直接复制保存为 .html 文件用浏览器打开即可，按 Ctrl+P 打印。 页面特点： - 每天打开题目自动刷新（以当天日期为随机种子，同一天题目相同） - 100题均匀分布为4列网格，加减法混合 - 所有算式结果均在 0–100 范围内，无重复题 - 顶部留有姓名、班级、日期和计时栏 - 底部含成绩统计区和等级评定标准（S/A/B 三级） - 鼠标悬停高亮方便屏幕端练习，打印时自动去掉装饰 - 移动端自动切换为2列布局
