<!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">
<title>5的整除特征 - 完整版</title>
<style>
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html, body {
margin: 0;
padding: 0;
background: #F0F0F0;
overflow: hidden;
height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#app {
height: 100vh;
width: 100%;
max-width: 480px;
margin: 0 auto;
background: #fff;
display: flex;
flex-direction: column;
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,0.05);
}
.content-area {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 80px;
position: relative;
}
.bottom-nav {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 480px;
height: 70px;
background: white;
border-top: 1px solid #e0e0e0;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 1000;
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
.nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 8px;
transition: all 0.3s;
}
.nav-item.active {
color: #f59e0b;
}
.nav-icon {
font-size: 24px;
margin-bottom: 4px;
}
.nav-label {
font-size: 12px;
}
/* Page 1: 概念引入 */
.intro-page {
padding: 40px 20px;
text-align: center;
}
.intro-emoji {
font-size: 80px;
margin: 20px 0;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.intro-title {
font-size: 28px;
font-weight: bold;
color: #333;
margin: 20px 0;
}
.intro-story {
font-size: 16px;
line-height: 1.8;
color: #666;
text-align: left;
background: #fffbeb;
padding: 20px;
border-radius: 12px;
margin: 20px 0;
border-left: 4px solid #f59e0b;
}
.highlight {
color: #f59e0b;
font-weight: bold;
}
.speak-btn {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
/* 演示页面样式 */
.demo-page {
padding: 20px;
}
/* 标签导航 */
.tab-nav {
display: flex;
border-bottom: 2px solid #e0e0e0;
margin-bottom: 20px;
}
.tab-item {
flex: 1;
padding: 12px;
text-align: center;
cursor: pointer;
color: #666;
font-weight: 500;
border-bottom: 3px solid transparent;
transition: all 0.3s;
}
.tab-item.active {
color: #f59e0b;
border-bottom-color: #f59e0b;
}
.demo-section {
display: none;
}
.demo-section.active {
display: block;
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animation-area {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
border-radius: 16px;
padding: 20px;
min-height: 320px;
max-height: 320px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
border: 2px solid #e0e0e0;
}
.math-area {
background: white;
border: 2px solid #f59e0b;
border-radius: 12px;
padding: 12px;
margin-bottom: 15px;
min-height: 90px;
}
.math-formula {
font-size: 16px;
text-align: center;
color: #333;
line-height: 2;
font-weight: 500;
}
.step-explanation {
font-size: 13px;
color: #666;
margin-top: 8px;
line-height: 1.5;
text-align: center;
padding: 8px;
background: #f8f9fa;
border-radius: 8px;
}
.control-bar {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.step-btn {
background: #f59e0b;
color: white;
border: none;
padding: 10px 25px;
border-radius: 20px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
}
.step-btn:disabled {
background: #ccc;
cursor: not-allowed;
}
.step-btn:hover:not(:disabled) {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
/* SVG动画样式 */
.svg-container {
width: 100%;
height: 100%;
min-height: 280px;
}
/* 讲解页面样式 */
.explain-page {
padding: 20px;
}
.explain-section {
display: none;
}
.explain-section.active {
display: block;
animation: fadeIn 0.3s;
}
.method-card {
background: white;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
border-left: 4px solid #f59e0b;
}
.method-title {
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.method-content {
font-size: 15px;
line-height: 1.8;
color: #555;
}
.example-box {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
margin: 10px 0;
border-left: 3px solid #10b981;
}
.example-title {
font-weight: bold;
color: #10b981;
margin-bottom: 8px;
}
.steps-list {
list-style: none;
padding: 0;
margin: 15px 0;
}
.steps-list li {
padding: 10px;
margin: 8px 0;
background: #f8f9fa;
border-radius: 8px;
position: relative;
padding-left: 40px;
}
.steps-list li::before {
content: attr(data-step);
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background: #f59e0b;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}
.question-examples {
margin-top: 20px;
}
.question-item {
background: white;
padding: 15px;
margin: 10px 0;
border-radius: 8px;
border: 2px solid #e0e0e0;
transition: all 0.3s;
cursor: pointer;
}
.question-item:hover {
border-color: #f59e0b;
transform: translateX(5px);
}
.question-item.expanded {
border-color: #f59e0b;
background: #fffbeb;
}
.question-header {
font-weight: bold;
color: #333;
display: flex;
justify-content: space-between;
align-items: center;
}
.question-answer {
margin-top: 15px;
padding-top: 15px;
border-top: 1px dashed #e0e0e0;
color: #555;
line-height: 1.8;
display: none;
}
.question-item.expanded .question-answer {
display: block;
}
.expand-icon {
color: #f59e0b;
transition: transform 0.3s;
}
.question-item.expanded .expand-icon {
transform: rotate(180deg);
}
/* 练习题样式 */
.practice-page {
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
}
.question-card {
background: white;
border-radius: 16px;
padding: 25px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.question-number {
background: #f59e0b;
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
}
.score-display {
background: #fcd34d;
padding: 5px 15px;
border-radius: 20px;
font-weight: bold;
color: #78350f;
}
.difficulty-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
margin-left: 10px;
}
.difficulty-bronze { background: #fed7aa; color: #9a3412; }
.difficulty-silver { background: #e5e7eb; color: #374151; }
.difficulty-gold { background: #fef3c7; color: #92400e; }
.question-text {
font-size: 18px;
line-height: 1.6;
color: #333;
margin: 20px 0;
}
.options-container {
display: flex;
flex-direction: column;
gap: 12px;
margin: 20px 0;
}
.option-btn {
background: white;
border: 2px solid #e0e0e0;
border-radius: 12px;
padding: 15px;
text-align: left;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
}
.option-btn:hover {
border-color: #f59e0b;
transform: translateX(5px);
}
.option-btn.correct {
background: #d1fae5;
border-color: #10b981;
}
.option-btn.wrong {
background: #fee2e2;
border-color: #ef4444;
}
.option-btn:disabled {
cursor: not-allowed;
}
.feedback-area {
margin-top: 20px;
padding: 15px;
border-radius: 12px;
font-size: 14px;
line-height: 1.6;
}
.feedback-correct {
background: #d1fae5;
color: #065f46;
}
.feedback-wrong {
background: #fee2e2;
color: #991b1b;
}
.hint-box {
background: #fffbeb;
border-left: 4px solid #f59e0b;
padding: 15px;
border-radius: 8px;
margin: 15px 0;
font-size: 14px;
line-height: 1.6;
}
.next-btn {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
margin-top: 15px;
width: 100%;
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
/* 通关秘籍 */
.secrets-container {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 20px;
gap: 16px;
height: 100%;
align-items: center;
-webkit-overflow-scrolling: touch;
}
.secrets-container::-webkit-scrollbar {
display: none;
}
.secret-card {
min-width: 85%;
height: 450px;
scroll-snap-align: center;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
border-radius: 20px;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
flex-shrink: 0;
}
.secret-emoji {
font-size: 80px;
margin-bottom: 20px;
}
.secret-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
text-align: center;
}
.secret-rule {
font-size: 20px;
background: rgba(255,255,255,0.2);
padding: 15px 25px;
border-radius: 15px;
margin: 20px 0;
text-align: center;
font-weight: bold;
}
.secret-explanation {
font-size: 15px;
line-height: 1.8;
text-align: center;
opacity: 0.95;
}
/* 完成页面 */
.completion-page {
padding: 40px 20px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.completion-emoji {
font-size: 100px;
margin: 20px 0;
}
.completion-title {
font-size: 32px;
font-weight: bold;
color: #f59e0b;
margin: 20px 0;
}
.final-score {
font-size: 48px;
font-weight: bold;
color: #fbbf24;
margin: 20px 0;
}
.restart-btn {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
border: none;
padding: 15px 40px;
border-radius: 30px;
font-size: 18px;
cursor: pointer;
margin-top: 20px;
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
</style>
</head>
<body>
<div id="app">
<div class="content-area">
<!-- Page 1: 概念引入 -->
<div v-show="currentPage === 1" class="intro-page">
<div class="intro-emoji">🏴☠️</div>
<div class="intro-title">5的整除特征</div>
<div class="intro-story">
<strong>🏴☠️ 海盗分金币的故事</strong><br><br>
想象一下,我们有一堆金币💰,要分给<span class="highlight">5个海盗</span>,要求<span class="highlight">必须分完,不能有剩余</span>。<br><br>
我们使用<span class="highlight">"打包魔法"</span>:把金币每10个装进一个钱袋子💼里。<br><br>
因为 <strong>10 ÷ 5 = 2</strong>,所以<span class="highlight">每一个钱袋子都能平均分给5个人</span>,不管有多少袋金币,统统都能分光!<br><br>
<strong>关键</strong>:剩下的就是<span class="highlight">散落在外面的零钱(个位)</span>。<br><br>
如果零钱是 <strong>0</strong> 或 <strong>5</strong>,正好分完!<br>
如果是其他数字,就分不匀了。😢
</div>
<button class="speak-btn" @click="speakIntro">🔊 听老师讲解</button>
</div>
<!-- Page 2: 演示动画 -->
<div v-show="currentPage === 2" class="demo-page">
<div class="tab-nav">
<div class="tab-item" :class="{active: demoTab === 'direct'}" @click="switchDemoTab('direct')">
直接判断
</div>
<div class="tab-item" :class="{active: demoTab === 'theory'}" @click="switchDemoTab('theory')">
位值原理
</div>
</div>
<!-- 直接判断动画 -->
<div class="demo-section" :class="{active: demoTab === 'direct'}">
<div class="animation-area">
<svg class="svg-container" viewBox="0 0 400 330" preserveAspectRatio="xMidYMid meet">
<text id="direct-title" x="200" y="25" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
方法一: 看个位数字
</text>
<g id="direct-number-group" opacity="1">
<text x="200" y="90" text-anchor="middle" font-size="50" font-weight="bold" fill="#f59e0b">1235</text>
<text x="200" y="120" text-anchor="middle" font-size="14" fill="#666">判断这个数能否被5整除?</text>
</g>
<g id="direct-split-group" opacity="0">
<rect x="50" y="70" width="80" height="65" rx="12" fill="#f3f4f6" stroke="#cbd5e0" stroke-width="2"/>
<text x="90" y="108" text-anchor="middle" font-size="32" fill="#666">1</text>
<text x="90" y="148" text-anchor="middle" font-size="10" fill="#999">千位</text>
<rect x="140" y="70" width="80" height="65" rx="12" fill="#f3f4f6" stroke="#cbd5e0" stroke-width="2"/>
<text x="180" y="108" text-anchor="middle" font-size="32" fill="#666">2</text>
<text x="180" y="148" text-anchor="middle" font-size="10" fill="#999">百位</text>
<rect x="230" y="70" width="80" height="65" rx="12" fill="#f3f4f6" stroke="#cbd5e0" stroke-width="2"/>
<text x="270" y="108" text-anchor="middle" font-size="32" fill="#666">3</text>
<text x="270" y="148" text-anchor="middle" font-size="10" fill="#999">十位</text>
<rect id="direct-ones-box" x="320" y="70" width="60" height="65" rx="12" fill="#fffbeb" stroke="#f59e0b" stroke-width="3"/>
<text id="direct-ones-digit" x="350" y="108" text-anchor="middle" font-size="32" font-weight="bold" fill="#f59e0b">5</text>
<text x="350" y="148" text-anchor="middle" font-size="10" font-weight="bold" fill="#f59e0b">个位</text>
</g>
<g id="direct-judge-group" opacity="0">
<rect x="50" y="165" width="300" height="50" rx="12" fill="#d1fae5" stroke="#10b981" stroke-width="2"/>
<text x="200" y="185" text-anchor="middle" font-size="12" fill="#065f46" font-weight="bold">
判断: 个位是 0 或 5 吗?
</text>
<text id="direct-judge-text" x="200" y="204" text-anchor="middle" font-size="14" font-weight="bold" fill="#10b981">
✓ 个位是 5
</text>
</g>
<g id="direct-result-group" opacity="0">
<circle cx="200" cy="260" r="32" fill="#d1fae5" stroke="#10b981" stroke-width="3"/>
<text x="200" y="270" text-anchor="middle" font-size="32">✓</text>
<text x="200" y="305" text-anchor="middle" font-size="12" font-weight="bold" fill="#10b981">能被5整除</text>
</g>
</svg>
</div>
<div class="math-area">
<div class="math-formula">
<div v-if="directStep === 0">1235 能被5整除吗?</div>
<div v-if="directStep === 1">
核心: 只看个位!<br>
<small style="color: #666;">个位是0或5 → 能整除</small>
</div>
<div v-if="directStep === 2">
个位是 <strong style="color: #f59e0b;">5</strong><br>
<small style="color: #666;">只有0和5这两个数字!</small>
</div>
<div v-if="directStep === 3">
✓ 1235 能被5整除<br>
<small style="color: #10b981;">验算: 1235 ÷ 5 = 247</small>
</div>
</div>
</div>
<div class="step-explanation" v-if="directStep === 0">
准备判断1235这个数
</div>
<div class="step-explanation" v-if="directStep === 1">
把数字拆开,重点关注个位!
</div>
<div class="step-explanation" v-if="directStep === 2">
判断个位是不是0或5
</div>
<div class="step-explanation" v-if="directStep === 3">
因为个位是5,所以能被5整除!
</div>
<div class="control-bar">
<button class="step-btn" @click="prevDirectStep" :disabled="directStep === 0">
◀ 上一步
</button>
<button class="step-btn" @click="nextDirectStep" :disabled="directStep === 3">
下一步 ▶
</button>
</div>
</div>
<!-- 位值原理动画 -->
<div class="demo-section" :class="{active: demoTab === 'theory'}">
<div class="animation-area">
<svg class="svg-container" viewBox="0 0 400 330" preserveAspectRatio="xMidYMid meet">
<text id="theory-title" x="200" y="30" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
位值原理: 为什么只看个位?
</text>
<g id="theory-number-group" opacity="1">
<text x="200" y="100" text-anchor="middle" font-size="50" font-weight="bold" fill="#f59e0b">1235</text>
<text x="200" y="135" text-anchor="middle" font-size="14" fill="#666">能被5整除吗?</text>
</g>
<g id="theory-split-group" opacity="0">
<text x="200" y="70" text-anchor="middle" font-size="14" fill="#666" font-weight="500">
任何数 = 整十部分 + 个位
</text>
<rect x="60" y="90" width="120" height="70" rx="10" fill="#fffbeb" stroke="#f59e0b" stroke-width="2"/>
<text x="120" y="120" text-anchor="middle" font-size="28" font-weight="bold" fill="#f59e0b">1230</text>
<text x="120" y="145" text-anchor="middle" font-size="12" fill="#f59e0b">整十部分</text>
<text x="200" y="130" text-anchor="middle" font-size="24" fill="#333">+</text>
<rect x="220" y="90" width="120" height="70" rx="10" fill="#fee2e2" stroke="#ef4444" stroke-width="2"/>
<text x="280" y="120" text-anchor="middle" font-size="28" font-weight="bold" fill="#ef4444">5</text>
<text x="280" y="145" text-anchor="middle" font-size="12" fill="#ef4444">个位</text>
</g>
<g id="theory-tens-group" opacity="0">
<rect x="50" y="180" width="300" height="70" rx="12" fill="#d1fae5" stroke="#10b981" stroke-width="2"/>
<text x="200" y="203" text-anchor="middle" font-size="14" font-weight="bold" fill="#065f46">
整十部分分析
</text>
<text x="200" y="223" text-anchor="middle" font-size="15" fill="#065f46">
1230 = 123 × 10
</text>
<text x="200" y="242" text-anchor="middle" font-size="13" fill="#047857">
因为 10 ÷ 5 = 2
</text>
</g>
<g id="theory-ones-group" opacity="0">
<rect x="50" y="265" width="140" height="50" rx="10" fill="#fee2e2" stroke="#ef4444" stroke-width="2"/>
<text x="120" y="287" text-anchor="middle" font-size="13" font-weight="bold" fill="#991b1b">
个位部分
</text>
<text x="120" y="305" text-anchor="middle" font-size="15" fill="#991b1b">
5 ÷ 5 = 1 ✓
</text>
<text x="210" y="295" text-anchor="middle" font-size="20" fill="#10b981" font-weight="bold">→</text>
<rect x="230" y="265" width="120" height="50" rx="10" fill="#d1fae5" stroke="#10b981" stroke-width="2"/>
<text x="290" y="285" text-anchor="middle" font-size="13" font-weight="bold" fill="#065f46">
结论
</text>
<text x="290" y="303" text-anchor="middle" font-size="13" fill="#065f46">
能被5整除 ✓
</text>
</g>
</svg>
</div>
<div class="math-area">
<div class="math-formula">
<div v-if="theoryStep === 0">1235 = ?</div>
<div v-if="theoryStep === 1">
1235 = 1230 + 5<br>
<small style="color: #666;">(整十部分 + 个位)</small>
</div>
<div v-if="theoryStep === 2">
1230 = 123 × 10<br>
10 ÷ 5 = 2 → <strong style="color: #10b981;">整十部分一定能被5整除</strong>
</div>
<div v-if="theoryStep === 3">
5 ÷ 5 = 1 ✓<br>
<small style="color: #10b981;">两部分都能整除,所以1235能被5整除!</small>
</div>
</div>
</div>
<div class="step-explanation" v-if="theoryStep === 0">
让我们探索为什么只看个位就够了
</div>
<div class="step-explanation" v-if="theoryStep === 1">
第一步: 把数字拆成整十部分和个位
</div>
<div class="step-explanation" v-if="theoryStep === 2">
关键: 因为10能被5整除,所以整十部分一定能被5整除!
</div>
<div class="step-explanation" v-if="theoryStep === 3">
只要个位也能被5整除,整个数就能被5整除!
</div>
<div class="control-bar">
<button class="step-btn" @click="prevTheoryStep" :disabled="theoryStep === 0">
◀ 上一步
</button>
<button class="step-btn" @click="nextTheoryStep" :disabled="theoryStep === 3">
下一步 ▶
</button>
</div>
</div>
</div>
<!-- Page 3: 讲解页 -->
<div v-show="currentPage === 3" class="explain-page">
<div class="tab-nav">
<div class="tab-item" :class="{active: explainTab === 'direct'}" @click="explainTab = 'direct'">
直接判断
</div>
<div class="tab-item" :class="{active: explainTab === 'theory'}" @click="explainTab = 'theory'">
位值原理
</div>
<div class="tab-item" :class="{active: explainTab === 'examples'}" @click="explainTab = 'examples'">
拆分验证
</div>
</div>
<!-- 直接判断 -->
<div class="explain-section" :class="{active: explainTab === 'direct'}">
<div class="method-card">
<div class="method-title">
<span>🎯</span> 方法一: 看个位数字
</div>
<div class="method-content">
<p><strong>核心口诀:</strong> "不管前面多复杂,只看尾巴0和5!"</p>
<div class="example-box">
<div class="example-title">判断规则:</div>
个位是 <strong style="color: #10b981;">0 或 5</strong> → 能被5整除 ✓<br>
个位是 <strong style="color: #ef4444;">1,2,3,4,6,7,8,9</strong> → 不能被5整除 ✗
</div>
<ul class="steps-list">
<li data-step="1">找到个位数字</li>
<li data-step="2">判断是0还是5</li>
<li data-step="3">得出结论</li>
</ul>
<div class="example-box">
<div class="example-title">实例:</div>
• 1235 → 个位是5 → <strong style="color: #10b981;">能整除</strong><br>
• 4560 → 个位是0 → <strong style="color: #10b981;">能整除</strong><br>
• 7893 → 个位是3 → <strong style="color: #ef4444;">不能整除</strong>
</div>
</div>
</div>
<div class="method-card">
<div class="method-title">
<span>⚡</span> 秒杀技巧
</div>
<div class="method-content">
<p>遇到超大数字也不用慌:</p>
<div class="example-box">
123456789012345 → 只看最后一位: 5 → <strong style="color: #10b981;">能整除</strong>
</div>
<p style="margin-top: 10px; color: #f59e0b;">
💡 前面有多少位都不重要,一秒锁定个位!
</p>
</div>
</div>
</div>
<!-- 位值原理 -->
<div class="explain-section" :class="{active: explainTab === 'theory'}">
<div class="method-card">
<div class="method-title">
<span>📐</span> 为什么只看个位?
</div>
<div class="method-content">
<p><strong>核心原理:</strong> 10是5的倍数!</p>
<div class="example-box">
<div class="example-title">打包魔法:</div>
任何数 = 整十部分 + 个位<br><br>
<strong>例如:</strong> 1235 = 1230 + 5<br>
<span style="color: #f59e0b;">= 123 × 10 + 5</span>
</div>
<ul class="steps-list">
<li data-step="1">
整十部分: 123 × 10<br>
<small style="color: #666;">因为10 ÷ 5 = 2,所以一定能被5整除</small>
</li>
<li data-step="2">
个位部分: 5<br>
<small style="color: #666;">5 ÷ 5 = 1,能被5整除</small>
</li>
<li data-step="3">
结论: 两部分都能整除,所以1235能被5整除!
</li>
</ul>
<div class="example-box">
<div class="example-title">反例:</div>
1237 = 1230 + 7<br>
• 整十部分1230能被5整除 ✓<br>
• 个位7不能被5整除 ✗<br>
→ 所以1237不能被5整除
</div>
</div>
</div>
<div class="method-card">
<div class="method-title">
<span>🔍</span> 数学证明
</div>
<div class="method-content">
<p>设任意数为 N = 10a + b (其中b是个位)</p>
<div class="example-box">
N ÷ 5 = (10a + b) ÷ 5<br>
= 10a ÷ 5 + b ÷ 5<br>
= 2a + b ÷ 5
</div>
<p style="margin-top: 15px;">
因为 <strong>2a</strong> 一定是整数,所以:<br>
<span style="color: #f59e0b;">N能被5整除 ⟺ b能被5整除 ⟺ b=0或5</span>
</p>
</div>
</div>
</div>
<!-- 拆分验证 -->
<div class="explain-section" :class="{active: explainTab === 'examples'}">
<div class="method-card">
<div class="method-title">
<span>🧮</span> 实战演练
</div>
<div class="method-content">
<p>点击题目查看详细解析:</p>
</div>
</div>
<div class="question-examples">
<div class="question-item" :class="{expanded: expandedQ === 1}" @click="toggleQuestion(1)">
<div class="question-header">
<span>判断 1235 能否被5整除</span>
<span class="expand-icon">▼</span>
</div>
<div class="question-answer">
<strong>📝 完整过程:</strong><br><br>
<strong>步骤1:</strong> 拆分数字<br>
1235 = 1230 + 5<br>
= 123 × 10 + 5<br><br>
<strong>步骤2:</strong> 分析整十部分<br>
123 × 10 ÷ 5 = 123 × 2 = 246 ✓<br>
(整十部分一定能被5整除)<br><br>
<strong>步骤3:</strong> 分析个位<br>
5 ÷ 5 = 1 ✓<br>
(5能被5整除)<br><br>
<strong style="color: #10b981;">✅ 结论: 1235能被5整除</strong><br>
验算: 1235 ÷ 5 = 247
</div>
</div>
<div class="question-item" :class="{expanded: expandedQ === 2}" @click="toggleQuestion(2)">
<div class="question-header">
<span>判断 7893 能否被5整除</span>
<span class="expand-icon">▼</span>
</div>
<div class="question-answer">
<strong>📝 完整过程:</strong><br><br>
<strong>步骤1:</strong> 拆分数字<br>
7893 = 7890 + 3<br>
= 789 × 10 + 3<br><br>
<strong>步骤2:</strong> 分析整十部分<br>
789 × 10 ÷ 5 = 789 × 2 = 1578 ✓<br>
(整十部分一定能被5整除)<br><br>
<strong>步骤3:</strong> 分析个位<br>
3 ÷ 5 = 0 余 3 ✗<br>
(3不能被5整除)<br><br>
<strong style="color: #ef4444;">❌ 结论: 7893不能被5整除</strong><br>
验算: 7893 ÷ 5 = 1578.6
</div>
</div>
<div class="question-item" :class="{expanded: expandedQ === 3}" @click="toggleQuestion(3)">
<div class="question-header">
<span>四位数 37□5 的□里填什么都能被5整除?</span>
<span class="expand-icon">▼</span>
</div>
<div class="question-answer">
<strong>📝 完整分析:</strong><br><br>
<strong>关键发现:</strong><br>
个位已经是5,所以这个数一定能被5整除!<br><br>
<strong>原理:</strong><br>
37□5 = 3700 + □×10 + 5<br><br>
• 3700 能被5整除 ✓ (整百)<br>
• □×10 能被5整除 ✓ (整十)<br>
• 5 能被5整除 ✓<br><br>
<strong style="color: #10b981;">✅ 答案: □里可以填0-9任意数字,共10种!</strong><br><br>
验证:<br>
3705 ÷ 5 = 741 ✓<br>
3755 ÷ 5 = 751 ✓<br>
3795 ÷ 5 = 759 ✓
</div>
</div>
<div class="question-item" :class="{expanded: expandedQ === 4}" @click="toggleQuestion(4)">
<div class="question-header">
<span>用0,1,2,5组成能被5整除的三位数(不重复)</span>
<span class="expand-icon">▼</span>
</div>
<div class="question-answer">
<strong>📝 完整思路:</strong><br><br>
<strong>步骤1:</strong> 确定个位<br>
要被5整除,个位必须是0或5<br><br>
<strong>情况A: 个位是0</strong><br>
百位从1,2,5中选(不能选0)<br>
十位从剩下2个数中选<br>
共3×2 = 6种<br><br>
<strong>情况B: 个位是5</strong><br>
百位从1,2中选(不能选0或5)<br>
十位从剩下2个数中选(包括0)<br>
共2×2 = 4种<br><br>
<strong style="color: #10b981;">✅ 答案: 6+4=10个</strong><br><br>
列举: 120, 150, 210, 250, 510, 520, 105, 205, 125, 215
</div>
</div>
</div>
</div>
</div>
<!-- Page 4: 课内练习 -->
<div v-show="currentPage === 4" class="practice-page">
<div v-if="!practiceCompleted">
<div class="question-card">
<div class="question-header">
<div class="question-number">第 {{currentQuestion + 1}}/{{practiceQuestions.length}} 题</div>
<div class="score-display">⭐ {{score}}分</div>
</div>
<div class="question-text" v-html="practiceQuestions[currentQuestion].text"></div>
<div class="options-container">
<button
v-for="(option, index) in practiceQuestions[currentQuestion].options"
:key="'opt'+index"
class="option-btn"
:class="{
'correct': answered && option.correct,
'wrong': answered && selectedOption === index && !option.correct
}"
@click="selectOption(index, option.correct)"
:disabled="answered"
>
{{option.text}}
</button>
</div>
<div v-if="answered" class="feedback-area" :class="isCorrect ? 'feedback-correct' : 'feedback-wrong'">
<div v-if="isCorrect">
<strong>🎉 太棒了!</strong><br>
{{practiceQuestions[currentQuestion].explanation}}
</div>
<div v-else>
<strong>💡 让我们一起分析:</strong><br>
{{practiceQuestions[currentQuestion].explanation}}
</div>
</div>
<button v-if="answered" class="next-btn" @click="nextQuestion">
{{currentQuestion < practiceQuestions.length - 1 ? '下一题 →' : '完成练习 ✓'}}
</button>
</div>
</div>
<div v-else class="completion-page">
<div class="completion-emoji">🎊</div>
<div class="completion-title">课内练习完成!</div>
<div class="final-score">{{score}}分</div>
<div style="font-size: 18px; color: #666; margin: 20px 0;">
{{score >= 60 ? '太棒了!可以挑战奥数题了!' : '继续加油哦!'}}
</div>
<button class="restart-btn" @click="switchPage(5)">
挑战奥数题 →
</button>
</div>
</div>
<!-- Page 5: 奥数挑战 -->
<div v-show="currentPage === 5" class="practice-page">
<div v-if="!olympiadCompleted">
<div class="question-card">
<div class="question-header">
<div>
<span class="question-number">第 {{currentOlympiad + 1}}/{{olympiadQuestions.length}} 题</span>
<span class="difficulty-badge" :class="'difficulty-' + olympiadQuestions[currentOlympiad].difficulty">
{{olympiadQuestions[currentOlympiad].difficultyText}}
</span>
</div>
<div class="score-display">⭐ {{olympiadScore}}分</div>
</div>
<div class="question-text" v-html="olympiadQuestions[currentOlympiad].text"></div>
<div class="options-container">
<button
v-for="(option, index) in olympiadQuestions[currentOlympiad].options"
:key="'olopt'+index"
class="option-btn"
:class="{
'correct': olympiadAnswered && option.correct,
'wrong': olympiadAnswered && selectedOlympiadOption === index && !option.correct
}"
@click="selectOlympiadOption(index, option.correct)"
:disabled="olympiadAnswered"
>
{{option.text}}
</button>
</div>
<div v-if="wrongAttempts > 0 && !olympiadAnswered">
<div class="hint-box" v-if="wrongAttempts === 1">
<strong>💡 提示1:</strong> {{olympiadQuestions[currentOlympiad].hint1}}
</div>
<div class="hint-box" v-if="wrongAttempts === 2">
<strong>💡 提示2:</strong> {{olympiadQuestions[currentOlympiad].hint2}}
</div>
</div>
<div v-if="olympiadAnswered" class="feedback-area" :class="isOlympiadCorrect ? 'feedback-correct' : 'feedback-wrong'">
<div v-if="isOlympiadCorrect">
<strong>🏆 厉害!</strong><br>
{{olympiadQuestions[currentOlympiad].explanation}}
</div>
<div v-else>
<strong>📖 详细解析:</strong><br>
{{olympiadQuestions[currentOlympiad].explanation}}
</div>
</div>
<button v-if="olympiadAnswered || wrongAttempts >= 3" class="next-btn" @click="nextOlympiad">
{{currentOlympiad < olympiadQuestions.length - 1 ? '下一题 →' : '完成挑战 ✓'}}
</button>
</div>
</div>
<div v-else class="completion-page">
<div class="completion-emoji">🏆</div>
<div class="completion-title">奥数挑战完成!</div>
<div class="final-score">{{olympiadScore}}分</div>
<div style="font-size: 18px; color: #666; margin: 20px 0;">
{{olympiadScore >= 60 ? '你是真正的数学高手!' : '继续努力,你会更棒!'}}
</div>
<button class="restart-btn" @click="switchPage(6)">
查看通关秘籍 →
</button>
</div>
</div>
<!-- Page 6: 通关秘籍 -->
<div v-show="currentPage === 6" class="secrets-container">
<div class="secret-card">
<div class="secret-emoji">🎯</div>
<div class="secret-title">核心口诀</div>
<div class="secret-rule">
"不管前面多复杂,<br>只看尾巴 0 和 5!"
</div>
<div class="secret-explanation">
个位是 0 或 5 的数,<br>
都能被 5 整除。<br><br>
记住:只有这两个数字!
</div>
</div>
<div class="secret-card" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
<div class="secret-emoji">💼</div>
<div class="secret-title">打包魔法</div>
<div class="secret-rule">
任何数 = 钱袋 + 零钱
</div>
<div class="secret-explanation">
钱袋(整十部分)一定能被5整除,<br>
因为10 ÷ 5 = 2<br><br>
所以只需要判断零钱(个位)!<br><br>
例: 1235 = 1230 + 5<br>
只看5能不能被5整除
</div>
</div>
<div class="secret-card" style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);">
<div class="secret-emoji">⚡</div>
<div class="secret-title">秒杀技巧</div>
<div class="secret-rule">
看个位,一秒搞定!
</div>
<div class="secret-explanation">
遇到很大的数也不怕:<br><br>
358920 → 个位是0 → ✓<br>
777775 → 个位是5 → ✓<br>
1234567 → 个位是7 → ✗<br><br>
前面的数字再多也不管它!
</div>
</div>
</div>
</div>
<!-- 底部导航 -->
<div class="bottom-nav">
<div class="nav-item" :class="{active: currentPage === 1}" @click="switchPage(1)">
<div class="nav-icon">💡</div>
<div class="nav-label">概念</div>
</div>
<div class="nav-item" :class="{active: currentPage === 2}" @click="switchPage(2)">
<div class="nav-icon">🎬</div>
<div class="nav-label">演示</div>
</div>
<div class="nav-item" :class="{active: currentPage === 3}" @click="switchPage(3)">
<div class="nav-icon">📝</div>
<div class="nav-label">讲解</div>
</div>
<div class="nav-item" :class="{active: currentPage === 4}" @click="switchPage(4)">
<div class="nav-icon">✏️</div>
<div class="nav-label">练习</div>
</div>
<div class="nav-item" :class="{active: currentPage === 5}" @click="switchPage(5)">
<div class="nav-icon">🏆</div>
<div class="nav-label">奥数</div>
</div>
<div class="nav-item" :class="{active: currentPage === 6}" @click="switchPage(6)">
<div class="nav-icon">🎁</div>
<div class="nav-label">秘籍</div>
</div>
</div>
</div>
<script src="https://www.xinghuo.tv/wp-content/themes/xinghuo-tv/assets/js/vue.global.prod.js"></script>
<script src="https://www.xinghuo.tv/wp-content/themes/xinghuo-tv/assets/js/gsap.min.js"></script>
<script src="https://www.xinghuo.tv/wp-content/themes/xinghuo-tv/assets/js/confetti.browser.min.js"></script>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
currentPage: 1,
demoTab: 'direct',
explainTab: 'direct',
expandedQ: null,
directStep: 0,
theoryStep: 0,
// 课内练习
currentQuestion: 0,
score: 0,
answered: false,
isCorrect: false,
selectedOption: null,
practiceCompleted: false,
practiceQuestions: [
{
text: '下面哪些数能被5整除?',
options: [
{ text: '123', correct: false },
{ text: '450', correct: true },
{ text: '7895', correct: true },
{ text: '10001', correct: false }
],
explanation: '看末尾! 450(尾0)✅, 7895(尾5)✅。其他个位不是0或5,都不能被5整除。'
},
{
text: '1到100中,有多少个数能被5整除?',
options: [
{ text: '10个', correct: false },
{ text: '15个', correct: false },
{ text: '20个', correct: true },
{ text: '25个', correct: false }
],
explanation: '5, 10, 15, 20...一直到100。用100÷5=20个。每隔5个就有一个!'
},
{
text: '四位数37□5能被5整除,方框里可以填哪些数字?',
options: [
{ text: '只能填0', correct: false },
{ text: '只能填5', correct: false },
{ text: '0-9都可以', correct: true },
{ text: '只能填偶数', correct: false }
],
explanation: '个位已经是5了,所以这个数一定能被5整除! 方框在十位,填什么都行。0-9共10个数字。'
},
{
text: '一个三位数,百位是5,个位是3,它能被5整除吗?',
options: [
{ text: '能', correct: false },
{ text: '不能', correct: true }
],
explanation: '只看个位! 个位是3,不是0也不是5,所以不能被5整除。百位是什么不重要。'
},
{
text: '数字12345的个位是5,它能被5整除吗?',
options: [
{ text: '能', correct: true },
{ text: '不能', correct: false }
],
explanation: '个位是5,所以12345能被5整除! 12345 ÷ 5 = 2469。'
}
],
// 奥数挑战
currentOlympiad: 0,
olympiadScore: 0,
olympiadAnswered: false,
isOlympiadCorrect: false,
selectedOlympiadOption: null,
wrongAttempts: 0,
olympiadCompleted: false,
olympiadQuestions: [
{
difficulty: 'bronze',
difficultyText: '🥉 青铜',
text: '一个四位数37□5能被5整除，方框里可以填哪些数字？',
options: [
{ text: '只能填0和5', correct: false },
{ text: '只能填偶数', correct: false },
{ text: '0-9都可以，共10种', correct: true },
{ text: '只能填奇数', correct: false }
],
hint1: '个位已经是5了，这意味着什么？',
hint2: '只要个位是5，整个数就能被5整除。方框在十位，对整除性没有影响。',
explanation: '因为个位是5，所以这个数一定能被5整除！方框在十位上，对整除性没有影响。所以0-9任意数字都可以填，共10种填法。'
},
{
difficulty: 'bronze',
difficultyText: '🥉 青铜',
text: '算式1×2×3×...×2025的结果，加上13之后，除以5的余数是多少？',
options: [
{ text: '0', correct: false },
{ text: '1', correct: false },
{ text: '2', correct: false },
{ text: '3', correct: true }
],
hint1: '前面一大串乘法里有没有因子5？',
hint2: '前面的乘法部分能被5整除（余0），只看13。',
explanation: '1×2×3×...×2025里包含因子5，所以乘法部分能被5整除（余0）。只需要看13÷5=2余3。答案是余3。'
},
{
difficulty: 'silver',
difficultyText: '🥈 白银',
text: '用0、1、2、5这四张数字卡片，能组成多少个没有重复数字且能被5整除的三位数？',
options: [
{ text: '6个', correct: false },
{ text: '8个', correct: false },
{ text: '10个', correct: true },
{ text: '12个', correct: false }
],
hint1: '个位必须是0或5，分两种情况讨论。',
hint2: '个位0时：百位3选1×十位2选1。个位5时：百位2选1×十位2选1。',
explanation: '情况A(个位0)：百位选1,2,5(3种)×十位(剩2个)=6个。情况B(个位5)：百位选1,2(2种)×十位选0和剩1个(2种)=4个。总共6+4=10个。'
},
{
difficulty: 'silver',
difficultyText: '🥈 白银',
text: '五位数4□7□5能被15整除，求这个五位数最大是多少？',
options: [
{ text: '49785', correct: true },
{ text: '49775', correct: false },
{ text: '48795', correct: false },
{ text: '49795', correct: false }
],
hint1: '能被15整除=既能被3整除，又能被5整除。',
hint2: '个位是5，满足被5整除。要被3整除，各位数字和必须是3的倍数。',
explanation: '个位5满足被5整除。要被3整除：4+万位+7+十位+5=16+两框，需是3的倍数。为了最大，万位填9。16+9+十位=25+十位。25+8=33(是3的倍数)。答案：49785。'
},
{
difficulty: 'silver',
difficultyText: '🥈 白银',
text: '有5个连续的自然数，它们的和是5的倍数。这5个数中最小的一个数除以5的余数可能是几？',
options: [
{ text: '只能是0', correct: false },
{ text: '只能是1', correct: false },
{ text: '0,1,2,3,4都可能', correct: true },
{ text: '只能是0或5', correct: false }
],
hint1: '设5个连续数为n-2, n-1, n, n+1, n+2，算算它们的和。',
hint2: '5个连续数的和=5n，一定是5的倍数！最小数n-2可以是任何自然数。',
explanation: '设5个数为n-2, n-1, n, n+1, n+2，和=5n。任何5个连续数的和都能被5整除！最小数n-2可以是1(余1)、5(余0)、3(余3)等。所以余数0,1,2,3,4都可能。'
},
{
difficulty: 'gold',
difficultyText: '🥇 黄金',
text: '一个数除以3余2，除以5余3，这个数最小是多少？',
options: [
{ text: '3', correct: false },
{ text: '8', correct: true },
{ text: '13', correct: false },
{ text: '18', correct: false }
],
hint1: '除以5余3，个位是3或8。',
hint2: '列举：3,8,13,18... 验证哪个除以3余2。',
explanation: '除以5余3的数：3,8,13,18... 验证除以3：3÷3=1余0(❌)，8÷3=2余2(✅)。最小是8。'
},
{
difficulty: 'gold',
difficultyText: '🥇 黄金',
text: '在123456789101112...99100这个数字串中，划去100个数字。要让剩下的数能被5整除，最后必须保留哪个位置的数字？',
options: [
{ text: '保留最后的0', correct: true },
{ text: '保留任意数字都行', correct: false },
{ text: '保留最后的5', correct: false },
{ text: '保留第一个9', correct: false }
],
hint1: '要被5整除，个位必须是0或5。',
hint2: '原数串最后一位是0（来自100）。',
explanation: '原数串结尾是...9899100，最后一位是0。要被5整除，必须保留最末位的0。只要不划掉这个0，无论前面怎么划，剩下的数都能被5整除！'
},
{
difficulty: 'gold',
difficultyText: '🥇 黄金',
text: '六位数abcde5乘以3后变成5abcde，个位数字e是多少？',
options: [
{ text: '0', correct: false },
{ text: '5', correct: true },
{ text: '2', correct: false },
{ text: '7', correct: false }
],
hint1: '原数个位是5，乘以3后末位是什么？',
hint2: '5×3=15，新数个位应该是5。新数是5abcde，所以e=5。',
explanation: '原数个位是5，5×3=15。新数5abcde的个位是e，应该等于5×3的个位5。所以e=5。这是数字谜题，利用个位突破！'
}
]
};
},
mounted() {
console.log('5的整除特征完整版已加载!');
},
methods: {
switchPage(page) {
if (window.speechSynthesis) {
window.speechSynthesis.cancel();
}
const audio = document.getElementById('tts-audio');
if (audio) audio.pause();
this.currentPage = page;
if (page === 2) {
setTimeout(() => {
if (this.demoTab === 'direct') {
this.speakDirectStep();
} else {
this.speakTheoryStep();
}
}, 300);
}
},
switchDemoTab(tab) {
this.demoTab = tab;
if (tab === 'direct') {
this.directStep = 0;
this.$nextTick(() => {
this.initDirectAnimation();
this.speakDirectStep();
});
} else {
this.theoryStep = 0;
this.$nextTick(() => {
this.initTheoryAnimation();
this.speakTheoryStep();
});
}
},
toggleQuestion(num) {
this.expandedQ = this.expandedQ === num ? null : num;
},
speak(text) {
if (window.speechSynthesis) window.speechSynthesis.cancel();
const isWeChat = /MicroMessenger/i.test(navigator.userAgent);
if (isWeChat) {
let audio = document.getElementById('tts-audio');
if (!audio) {
audio = document.createElement('audio');
audio.id = 'tts-audio';
audio.style.display = 'none';
document.body.appendChild(audio);
}
const themePath = 'https://www.xinghuo.tv/wp-content/themes/xinghuo-tv';
const url = `${themePath}/tts.php?text=${encodeURIComponent(text)}&t=${Date.now()}`;
audio.src = url;
audio.play().catch(error => {
console.error("Audio playback failed:", error);
});
} else {
if (window.speechSynthesis) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 0.9;
window.speechSynthesis.speak(utterance);
}
}
},
speakIntro() {
this.speak('想象一下,我们有一堆金币,要分给5个海盗,要求必须分完,不能有剩余。我们使用打包魔法,把金币每10个装进一个钱袋子里。');
},
// ========== 直接判断动画 ==========
initDirectAnimation() {
if (typeof gsap === 'undefined') return;
gsap.set("#direct-number-group", {opacity: 1});
gsap.set("#direct-split-group", {opacity: 0});
gsap.set("#direct-judge-group", {opacity: 0});
gsap.set("#direct-result-group", {opacity: 0});
},
nextDirectStep() {
if (this.directStep < 3) {
this.directStep++;
this.$nextTick(() => {
this.runDirectAnimation();
this.speakDirectStep();
});
}
},
prevDirectStep() {
if (this.directStep > 0) {
this.directStep--;
this.$nextTick(() => {
this.runDirectAnimation();
this.speakDirectStep();
});
}
},
speakDirectStep() {
const texts = [
'让我们来判断1235这个数能不能被5整除',
'第一步，把数字拆开，重点关注个位！个位是5',
'第二步，判断个位是不是0或5。5符合条件',
'因为个位是5，所以1235能被5整除！验算：1235除以5等于247'
];
this.speak(texts[this.directStep]);
},
runDirectAnimation() {
if (typeof gsap === 'undefined') return;
const tl = gsap.timeline();
if (this.directStep === 0) {
tl.to("#direct-number-group", {opacity: 1, duration: 0.3})
.to("#direct-split-group", {opacity: 0, duration: 0.2}, "<")
.to("#direct-judge-group", {opacity: 0, duration: 0.2}, "<")
.to("#direct-result-group", {opacity: 0, duration: 0.2}, "<");
}
if (this.directStep === 1) {
tl.to("#direct-number-group", {opacity: 0, y: -20, duration: 0.4})
.to("#direct-split-group", {opacity: 1, duration: 0.5})
.from("#direct-split-group rect", {
scale: 0,
stagger: 0.15,
ease: "back.out(1.7)",
duration: 0.6
}, "<0.2")
.to("#direct-ones-box", {
scale: 1.05,
duration: 0.3,
yoyo: true,
repeat: 1
});
}
if (this.directStep === 2) {
tl.to("#direct-judge-group", {opacity: 1, duration: 0.5})
.from("#direct-judge-group", {y: 20, duration: 0.5}, "<")
.to("#direct-ones-box", {
fill: "#d1fae5",
stroke: "#10b981",
duration: 0.4
})
.to("#direct-ones-digit", {
fill: "#10b981",
scale: 1.2,
duration: 0.3,
yoyo: true,
repeat: 1
}, "<");
}
if (this.directStep === 3) {
tl.to("#direct-result-group", {opacity: 1, scale: 1, duration: 0.5})
.from("#direct-result-group circle", {
scale: 0,
rotation: 360,
ease: "back.out(2)",
duration: 0.8
}, "<");
if (typeof confetti !== 'undefined') {
setTimeout(() => {
confetti({
particleCount: 80,
spread: 60,
origin: { y: 0.6 },
colors: ['#fbbf24', '#f59e0b', '#d97706']
});
}, 400);
}
}
},
// ========== 位值原理动画 ==========
initTheoryAnimation() {
if (typeof gsap === 'undefined') return;
gsap.set("#theory-number-group", {opacity: 1});
gsap.set("#theory-split-group", {opacity: 0});
gsap.set("#theory-tens-group", {opacity: 0});
gsap.set("#theory-ones-group", {opacity: 0});
},
nextTheoryStep() {
if (this.theoryStep < 3) {
this.theoryStep++;
this.$nextTick(() => {
this.runTheoryAnimation();
this.speakTheoryStep();
});
}
},
prevTheoryStep() {
if (this.theoryStep > 0) {
this.theoryStep--;
this.$nextTick(() => {
this.runTheoryAnimation();
this.speakTheoryStep();
});
}
},
speakTheoryStep() {
const texts = [
'让我们探索为什么只看个位就够了。来看1235这个数',
'第一步，把数字拆成整十部分和个位。1235等于1230加5',
'关键来了！因为10能被5整除，所以整十部分1230一定能被5整除',
'只要个位5也能被5整除，整个数就能被5整除！所以1235能被5整除'
];
this.speak(texts[this.theoryStep]);
},
runTheoryAnimation() {
if (typeof gsap === 'undefined') return;
const tl = gsap.timeline();
if (this.theoryStep === 0) {
tl.to("#theory-number-group", {opacity: 1, duration: 0.3})
.to("#theory-split-group", {opacity: 0, duration: 0.2}, "<")
.to("#theory-tens-group", {opacity: 0, duration: 0.2}, "<")
.to("#theory-ones-group", {opacity: 0, duration: 0.2}, "<");
}
if (this.theoryStep === 1) {
tl.to("#theory-number-group", {opacity: 0, y: -30, duration: 0.4})
.to("#theory-split-group", {opacity: 1, duration: 0.5})
.from("#theory-split-group rect", {
scale: 0,
y: 50,
stagger: 0.2,
ease: "back.out(1.5)",
duration: 0.7
}, "<0.2");
}
if (this.theoryStep === 2) {
tl.to("#theory-tens-group", {opacity: 1, duration: 0.5})
.from("#theory-tens-group rect", {
scale: 0,
rotation: -10,
ease: "elastic.out(1, 0.5)",
duration: 0.8
}, "<0.2")
.to("#theory-split-group rect:first-child", {
fill: "#d1fae5",
stroke: "#10b981",
duration: 0.4
});
}
if (this.theoryStep === 3) {
tl.to("#theory-ones-group", {opacity: 1, duration: 0.5})
.from("#theory-ones-group rect", {
scale: 0,
x: -30,
stagger: 0.15,
ease: "back.out(1.5)",
duration: 0.6
}, "<0.2");
if (typeof confetti !== 'undefined') {
setTimeout(() => {
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 },
colors: ['#fbbf24', '#f59e0b', '#d97706']
});
}, 500);
}
}
},
// ========== 练习题逻辑 ==========
selectOption(index, correct) {
if (this.answered) return;
this.answered = true;
this.isCorrect = correct;
this.selectedOption = index;
if (correct) {
this.score += 20;
if (typeof confetti !== 'undefined') {
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 },
colors: ['#fbbf24', '#f59e0b', '#d97706']
});
}
} else {
if (typeof gsap !== 'undefined') {
const wrongBtn = document.querySelector('.option-btn.wrong');
if (wrongBtn) {
gsap.to(wrongBtn, {
x: [-5, 5, -5, 5, 0],
duration: 0.5
});
}
}
}
},
nextQuestion() {
if (this.currentQuestion < this.practiceQuestions.length - 1) {
this.currentQuestion++;
this.answered = false;
this.isCorrect = false;
this.selectedOption = null;
} else {
this.practiceCompleted = true;
}
},
selectOlympiadOption(index, correct) {
if (this.olympiadAnswered) return;
this.selectedOlympiadOption = index;
if (correct) {
this.olympiadAnswered = true;
this.isOlympiadCorrect = true;
if (this.wrongAttempts === 0) {
this.olympiadScore += 15;
} else if (this.wrongAttempts === 1) {
this.olympiadScore += 10;
} else {
this.olympiadScore += 5;
}
if (typeof confetti !== 'undefined') {
confetti({
particleCount: 150,
spread: 80,
origin: { y: 0.6 },
colors: ['#fbbf24', '#f59e0b', '#d97706']
});
}
} else {
this.wrongAttempts++;
if (typeof gsap !== 'undefined') {
setTimeout(() => {
const wrongBtn = document.querySelector('.option-btn.wrong');
if (wrongBtn) {
gsap.to(wrongBtn, {
x: [-5, 5, -5, 5, 0],
duration: 0.5
});
}
}, 50);
}
if (this.wrongAttempts >= 3) {
this.olympiadAnswered = true;
this.isOlympiadCorrect = false;
}
setTimeout(() => {
this.selectedOlympiadOption = null;
}, 500);
}
},
nextOlympiad() {
if (this.currentOlympiad < this.olympiadQuestions.length - 1) {
this.currentOlympiad++;
this.olympiadAnswered = false;
this.isOlympiadCorrect = false;
this.selectedOlympiadOption = null;
this.wrongAttempts = 0;
} else {
this.olympiadCompleted = true;
}
}
}
}).mount('#app');
</script>
</body>
</html>💡 这段代码完全由 gemini 生成。
登录后可复制完整代码