<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>整除消消乐 - 7和13的秘密</title>
<style>
:root {
--primary: #38B2AC;
--primary-dark: #319795;
--accent: #ED8936;
--bg-body: #E6FFFA;
--bg-app: #FFFFFF;
--text-main: #2D3748;
--text-sub: #718096;
--danger: #E53E3E;
--success: #48BB78;
--shadow: 0 10px 40px rgba(56, 178, 172, 0.15);
}
* {
box-sizing: border-box;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
/* --- 核心修复：改为 APP 布局模式 --- */
html, body {
margin: 0; padding: 0;
width: 100%; height: 100%; /* 锁死高度 */
overflow: hidden; /* 禁止整页滚动 */
background-color: var(--bg-body);
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
color: var(--text-main);
display: flex; justify-content: center;
}
#app {
width: 100%; max-width: 480px;
height: 100%; /* 占满高度 */
background: var(--bg-app);
position: relative; /* 为绝对定位提供锚点 */
box-shadow: var(--shadow);
display: flex; flex-direction: column; /* 垂直排列 */
overflow: hidden; /* 防止溢出 */
}
header {
flex-shrink: 0; /* 防止头部被压缩 */
padding: 20px; text-align: center;
background: linear-gradient(135deg, var(--bg-app) 0%, #F0FFF4 100%);
border-bottom: 1px solid #eee;
z-index: 10;
}
h1 { font-size: 20px; margin: 0; color: var(--primary-dark); }
h2 { font-size: 14px; color: var(--text-sub); margin: 5px 0 0; font-weight: normal; }
/* --- 核心修复：内容区域独立滚动 --- */
.content-area {
flex: 1; /* 占据剩余空间 */
overflow-y: auto; /* 允许内部滚动 */
padding: 20px;
padding-bottom: 100px; /* 留出导航栏高度，防止遮挡 */
-webkit-overflow-scrolling: touch; /* 丝滑滚动 */
}
.content-area::-webkit-scrollbar { display: none; }
/* --- 核心修复：导航栏绝对定位 --- */
.navbar {
position: absolute; /* 绝对定位在 #app 内部底部 */
bottom: 0; left: 0; width: 100%;
z-index: 1000;
background: rgba(255, 255, 255, 0.98);
border-top: 1px solid #E2E8F0;
display: flex; justify-content: space-around;
/* 适配全面屏底部黑条 */
padding-top: 10px;
padding-bottom: calc(10px + env(safe-area-inset-bottom));
box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
}
.nav-item {
display: flex; flex-direction: column; align-items: center;
font-size: 10px; color: #A0AEC0; cursor: pointer; width: 20%;
}
.nav-item.active { color: var(--primary); font-weight: bold; }
.nav-icon { font-size: 20px; margin-bottom: 4px; }
/* 组件样式 */
.card {
background: #F7FAFC; border-radius: 12px; padding: 16px;
margin-bottom: 20px; border: 1px solid #EDF2F7;
}
.btn {
background: var(--primary); color: white; border: none;
padding: 12px 24px; border-radius: 50px; font-size: 16px; width: 100%;
cursor: pointer; box-shadow: 0 4px 6px rgba(56, 178, 172, 0.3);
transition: transform 0.1s;
}
.btn:active { transform: scale(0.98); }
.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.math-block {
font-family: 'Courier New', monospace; background: #2D3748; color: #E2E8F0;
padding: 10px; border-radius: 8px; margin: 10px 0; text-align: center;
font-weight: bold; font-size: 16px; line-height: 1.6;
}
.highlight { color: var(--accent); font-weight: bold; }
.overline { text-decoration: overline; letter-spacing: 2px; }
/* 动画区 */
.demo-box {
min-height: 200px; display: flex; flex-direction: column;
align-items: center; justify-content: center; position: relative;
}
.number-grid { display: flex; gap: 10px; margin-bottom: 20px; }
.num-bubble {
width: 40px; height: 40px; border-radius: 50%; border: 2px solid #CBD5E0;
display: flex; align-items: center; justify-content: center;
font-weight: bold; color: #CBD5E0; transition: all 0.3s; cursor: pointer;
}
.num-bubble.active { border-color: var(--accent); color: var(--accent); transform: scale(1.2); background: #FFF5F5; }
.num-bubble.active-13 { border-color: var(--primary); color: var(--primary); transform: scale(1.2); background: #F0FFF4; }
.formula-step { opacity: 0; transform: translateY(20px); transition: all 0.5s; margin-top: 15px; width: 100%; }
.formula-step.show { opacity: 1; transform: translateY(0); }
.vertical-math {
background: #2D3748; color: white; padding: 15px; border-radius: 8px;
font-family: 'Courier New', monospace; font-size: 18px; line-height: 1.5;
width: fit-content; margin: 0 auto; text-align: right; border: 2px solid #4A5568;
}
.weapon-card {
background: linear-gradient(135deg, #FFFAF0 0%, #FEFCBF 100%);
border: 2px solid var(--accent); padding: 20px; border-radius: 16px;
text-align: center; margin: 20px 0;
box-shadow: 0 4px 15px rgba(237, 137, 54, 0.2);
}
.reason-box {
background: #EDF2F7; padding: 10px; border-radius: 8px;
font-size: 13px; color: #4A5568; margin-bottom: 15px; text-align: left;
border-left: 4px solid var(--text-sub);
}
.question-card { border-left: 5px solid var(--primary); position: relative; }
.q-tag { background: var(--primary); color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; display: inline-block; margin-bottom: 8px; }
.q-input { width: 100%; padding: 10px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 16px; margin: 10px 0; outline: none; }
.q-input:focus { border-color: var(--primary); }
.feedback { margin-top: 10px; font-weight: bold; min-height: 24px; font-size: 14px; }
.shake { animation: shake 0.5s; border-color: var(--danger) !important; color: var(--danger) !important; }
@keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } }
</style>
</head>
<body>
<div id="app">
<header>
<h1>整除探险队</h1>
<h2>消灭尾巴怪</h2>
</header>
<div class="content-area">
<div id="tab-concept" class="tab-content active">
<div class="card">
<h3>🦄 为什么要把尾巴变成 0？</h3>
<p>数字 <b>392</b> 太大了，一眼看不出是不是 7 的倍数。</p>
<p>如果我们把个位变成 0（比如 350），那 0 就可以直接忽略！</p>
<p><b>因为 350 ÷ 10 = 35</b>，我们只要判断 35 是不是 7 的倍数就行了。</p>
</div>
<div class="card">
<h3>💡 核心策略</h3>
<p>1. 找到一个特殊的倍数（武器）。</p>
<p>2. 利用它把尾巴消成 0。</p>
<p>3. 判断剩下的“身体”能不能被整除。</p>
</div>
<button class="btn" onclick="switchTab('visuals')">去寻找武器 ➜</button>
</div>
<div id="tab-visuals" class="tab-content">
<h3 style="text-align: center;">第一章：7 的消尾术</h3>
<div class="card demo-box">
<div class="reason-box">
<b>🎯 目标：</b>把 392 的尾巴 "2" 变成 "0"。<br>
<b>💡 策略：</b>找个位是 1 的武器，乘以 2 倍去抵消。
</div>
<div class="number-grid">
<div class="num-bubble" onclick="wrongAnswer(this)">7</div>
<div class="num-bubble" onclick="wrongAnswer(this)">14</div>
<div class="num-bubble" id="b-21" onclick="revealWeapon7()">?</div>
<div class="num-bubble" onclick="wrongAnswer(this)">28</div>
</div>
<p id="hint-7" style="font-size:12px; color:#A0AEC0;">点击问号寻找个位是1的武器</p>
<div id="weapon-reveal-7" style="display:none; width: 100%;">
<div class="weapon-card">
<div style="color:var(--accent); font-weight:900; font-size:18px;">🗡️ 武器：21</div>
<div style="font-size: 14px; color:#718096; margin-top:5px;">7 × 3 = 21 (个位是1)</div>
</div>
<div class="formula-step" id="step1-7">
<p><b>例子：判断 39<span class="highlight">2</span></b></p>
<div class="vertical-math">
3 9 <span style="color:var(--accent)">2</span><br>
- 4 <span style="color:var(--accent)">2</span> <span style="font-size:12px; color:#A0AEC0;">(2x21)</span><br>
-------<br>
<span style="color:var(--success); font-weight:bold;">3 5</span> <span style="color:#718096">0</span>
</div>
</div>
<div class="formula-step" id="step2-7" style="background:#F0FFF4; padding:10px; border-radius:8px;">
<p style="margin:0; font-weight:bold; color:var(--success);">👀 关键时刻！</p>
<p>1. 尾巴变成 0，<b>直接忽略</b>。</p>
<p>2. 剩下 <b>35</b>。</p>
<p>3. 35 能被 7 整除吗？<br><b>能！(5×7=35)</b></p>
</div>
<div class="formula-step" id="step3-7" style="margin-top:10px;">
<p style="text-align:center; font-size:18px; font-weight:bold; color:var(--primary);">🎉 结论：392 能被 7 整除！</p>
</div>
</div>
</div>
<button class="btn btn-outline" onclick="resetAnimation7()" style="margin-bottom:10px;">重播 7 的演示</button>
<h3 style="text-align: center; margin-top: 30px;">第二章：13 的凑整术</h3>
<div class="card demo-box">
<div class="reason-box" style="background:#F0FFF4; border-left-color:var(--success);">
<b>🎯 目标：</b>判断 <b>143</b> 能否被 13 整除。<br>
<b>💡 策略：</b>尾巴是 3，找个位 9 的武器凑成 10 (进位变0)。
</div>
<div class="number-grid">
<div class="num-bubble" onclick="wrongAnswer(this)">13</div>
<div class="num-bubble" onclick="wrongAnswer(this)">26</div>
<div class="num-bubble" id="b-39" onclick="revealWeapon13()" style="border-color:var(--primary);">39</div>
</div>
<div id="weapon-reveal-13" style="display:none; width: 100%;">
<div class="weapon-card" style="background: linear-gradient(135deg, #F0FFF4 0%, #C6F6D5 100%); border-color: var(--primary);">
<div style="color:var(--primary); font-weight:900; font-size:18px;">🛡️ 武器：39</div>
<div style="font-size: 14px; color:#4A5568; margin-top:5px;">13 × 3 = 39 (个位是9)</div>
</div>
<div class="formula-step" id="step1-13">
<p><b>例子：判断 14<span class="highlight">3</span></b></p>
<div class="vertical-math" style="text-align: right;">
1 4 <span style="color:var(--accent)">3</span><br>
+ 1 1 <span style="color:var(--accent)">7</span> <span style="font-size:12px; color:#A0AEC0;">(3x39)</span><br>
-------<br>
<span style="color:var(--success); font-weight:bold;">2 6</span> <span style="color:#718096">0</span>
</div>
<p style="font-size:12px; color:#718096; text-align:center;">(尾巴是3，所以加 3个39)</p>
</div>
<div class="formula-step" id="step2-13" style="background:#F0FFF4; padding:10px; border-radius:8px;">
<p style="margin:0; font-weight:bold; color:var(--success);">👀 关键时刻！</p>
<p>1. 尾巴变成 0，<b>忽略它</b>。</p>
<p>2. 剩下 <b>26</b>。</p>
<p>3. 26 是 13 的倍数吗？<br><b>是！(13×2=26)</b></p>
</div>
<div class="formula-step" id="step3-13" style="margin-top:10px;">
<p style="text-align:center; font-size:18px; font-weight:bold; color:var(--primary);">🎉 结论：143 能被 13 整除！</p>
</div>
</div>
</div>
<button class="btn btn-outline" onclick="resetAnimation13()">重播 13 的演示</button>
</div>
<div id="tab-basic" class="tab-content">
<div class="card">
<h3>📖 基础练习</h3>
<p>判断 <b>343</b> 是否是 7 的倍数？</p>
<div class="math-block">343</div>
<p>1. 去尾 3，剩 34。</p>
<p>2. 减去尾巴的 2 倍：3 × 2 = 6</p>
<p>3. 计算：34 - 6 = 28</p>
<p>4. <b>判断：</b> 28 是 7 的倍数吗？</p>
<div style="display:flex; gap:10px;">
<button class="btn" onclick="alert('✅ 正确！28是7的倍数，所以343也是！')">是</button>
<button class="btn btn-outline" onclick="alert('❌ 28 = 4 × 7 哦！')">否</button>
</div>
</div>
<div class="card">
<h3>📖 进阶练习</h3>
<p>判断 <b>133</b> 是否是 7 的倍数？</p>
<p>提示：13 - (3x2) = ?</p>
<div style="display:flex; gap:10px;">
<button class="btn" onclick="alert('✅ 正确！13-6=7，是7的倍数。')">是</button>
<button class="btn btn-outline" onclick="alert('❌ 算算看？13减6等于多少？')">否</button>
</div>
</div>
</div>
<div id="tab-olympiad" class="tab-content">
<div class="card" style="background:#FFF5F5; border-color:#FED7D7;">
<h3 style="color:#C53030;">🔥 闯关挑战：奥数 6 题</h3>
<p style="font-size:12px;">请准备好纸和笔，冲击金牌！</p>
</div>
<div class="card question-card">
<span class="q-tag">第 1 题：7 的应用</span>
<p>判断 <b>959</b> 是否能被 7 整除？</p>
<button class="btn btn-outline" onclick="toggleAns('ans1')">显示解析</button>
<div id="ans1" style="display:none; margin-top:10px; background:#F0FFF4; padding:10px; border-radius:8px;">
<p><b>能。</b><br>1. 去尾 9，剩 95。<br>2. 95 - (9×2) = 95 - 18 = 77。<br>3. 77 = 7 × 11。✅</p>
</div>
</div>
<div class="card question-card">
<span class="q-tag">第 2 题：13 的应用</span>
<p>判断 <b>2028</b> 是否能被 13 整除？</p>
<button class="btn btn-outline" onclick="toggleAns('ans2')">显示解析</button>
<div id="ans2" style="display:none; margin-top:10px; background:#F0FFF4; padding:10px; border-radius:8px;">
<p><b>能。</b><br>1. 202 + (8×4) = 234<br>2. 23 + (4×4) = 23 + 16 = 39<br>3. 39 = 13 × 3。✅</p>
</div>
</div>
<div class="card question-card">
<span class="q-tag">第 3 题：逆向思维</span>
<p>四位数 <span class="overline">51A3</span> 能被 7 整除，A=?</p>
<input type="number" id="input-q3" class="q-input" placeholder="输入 A">
<button class="btn" onclick="checkAnswer('q3', 7)">提交</button>
<div id="fb-q3" class="feedback"></div>
</div>
<div class="card question-card">
<span class="q-tag">第 4 题：13 的逆向</span>
<p><span class="overline">1A4</span> 能被 13 整除，A=?</p>
<input type="number" id="input-q4" class="q-input" placeholder="输入 A">
<button class="btn" onclick="checkAnswer('q4', 0)">提交</button>
<div id="fb-q4" class="feedback"></div>
</div>
<div class="card question-card">
<span class="q-tag">第 5 题：判断题</span>
<p>六位数 <b>987987</b> 能被 13 整除吗？</p>
<div style="display:flex; gap:10px;">
<button class="btn btn-outline" onclick="alert('✅ 正确！987-987=0，0能被任何数整除。')">能</button>
<button class="btn btn-outline" onclick="alert('❌ 错了。利用截断法：前三位与后三位差为0。')">不能</button>
</div>
</div>
<div class="card question-card" style="border-left-color: var(--accent);">
<span class="q-tag" style="background:var(--accent)">第 6 题：终极挑战</span>
<p>六位数 <span class="overline">24068A</span> 能被 13 整除，求 A。</p>
<input type="number" id="input-q6" class="q-input" placeholder="输入 A">
<button class="btn" onclick="checkAnswer('q6', 2)">提交</button>
<div id="fb-q6" class="feedback"></div>
</div>
</div>
<div id="tab-cheatsheet" class="tab-content">
<div class="card">
<h3>📜 判别法速查表</h3>
<p><b>7 (减2):</b> 找个位1 -> 21</p>
<p><b>13 (加4):</b> 找个位9 -> 39</p>
<p><b>17 (减5):</b> 找个位1 -> 51</p>
<p><b>19 (加2):</b> 找个位9 -> 19</p>
</div>
<div class="card">
<h3>⚡ 三位截断法</h3>
<p>对于六位数 ABCDEF</p>
<p>计算：<b>ABC - DEF</b></p>
<p>如果结果能被 7, 11, 13 整除，原数就能被整除。</p>
</div>
</div>
</div>
<nav class="navbar">
<div class="nav-item active" onclick="switchTab('concept')"><span class="nav-icon">📖</span><span>概念</span></div>
<div class="nav-item" onclick="switchTab('visuals')"><span class="nav-icon">🎬</span><span>演示</span></div>
<div class="nav-item" onclick="switchTab('basic')"><span class="nav-icon">✏️</span><span>课内</span></div>
<div class="nav-item" onclick="switchTab('olympiad')"><span class="nav-icon">🏆</span><span>奥数</span></div>
<div class="nav-item" onclick="switchTab('cheatsheet')"><span class="nav-icon">📜</span><span>秘籍</span></div>
</nav>
</div>
<script>
function switchTab(tabId) {
document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
document.getElementById('tab-' + tabId).classList.add('active');
const ids = ['concept', 'visuals', 'basic', 'olympiad', 'cheatsheet'];
document.querySelectorAll('.nav-item')[ids.indexOf(tabId)].classList.add('active');
}
function wrongAnswer(el) {
el.classList.add('shake');
setTimeout(() => el.classList.remove('shake'), 500);
}
function revealWeapon7() {
document.getElementById('b-21').innerHTML = "21";
document.getElementById('b-21').classList.add('active');
document.getElementById('hint-7').style.display = 'none';
const revealArea = document.getElementById('weapon-reveal-7');
revealArea.style.display = 'block';
revealArea.scrollIntoView({behavior: "smooth", block: "nearest"});
setTimeout(() => document.getElementById('step1-7').classList.add('show'), 500);
setTimeout(() => document.getElementById('step2-7').classList.add('show'), 2000);
setTimeout(() => document.getElementById('step3-7').classList.add('show'), 3500);
}
function resetAnimation7() {
document.getElementById('b-21').innerHTML = "?";
document.getElementById('b-21').classList.remove('active');
document.getElementById('weapon-reveal-7').style.display = 'none';
document.querySelectorAll('#weapon-reveal-7 .formula-step').forEach(el => el.classList.remove('show'));
}
function revealWeapon13() {
document.getElementById('b-39').classList.add('active-13');
const revealArea = document.getElementById('weapon-reveal-13');
revealArea.style.display = 'block';
revealArea.scrollIntoView({behavior: "smooth", block: "nearest"});
setTimeout(() => document.getElementById('step1-13').classList.add('show'), 500);
setTimeout(() => document.getElementById('step2-13').classList.add('show'), 2000);
setTimeout(() => document.getElementById('step3-13').classList.add('show'), 3500);
}
function resetAnimation13() {
document.getElementById('b-39').classList.remove('active-13');
document.getElementById('weapon-reveal-13').style.display = 'none';
document.querySelectorAll('#weapon-reveal-13 .formula-step').forEach(el => el.classList.remove('show'));
}
function checkAnswer(id, correctVal) {
const val = document.getElementById('input-' + id).value;
const fb = document.getElementById('fb-' + id);
if (val == correctVal) {
fb.innerHTML = "<span style='color:var(--success)'>✅ 回答正确！</span>";
} else {
fb.innerHTML = "<span style='color:var(--danger)'>❌ 再算算看？</span>";
}
}
function toggleAns(id) {
const el = document.getElementById(id);
el.style.display = el.style.display === 'none' ? 'block' : 'none';
}
</script>
</body>
</html>💡 这段代码完全由 gemini 生成。
登录后可复制完整代码