<!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>9的整除特征 - 完整版</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: #805AD5;
}
.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: #FAF5FF;
padding: 20px;
border-radius: 12px;
margin: 20px 0;
border-left: 4px solid #805AD5;
}
.highlight {
color: #805AD5;
font-weight: bold;
}
.speak-btn {
background: linear-gradient(135deg, #805AD5 0%, #6B46C1 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(128, 90, 213, 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: #805AD5;
border-bottom-color: #805AD5;
}
.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, #FAF5FF 0%, #F3E8FF 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 #805AD5;
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: #805AD5;
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(128, 90, 213, 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 #805AD5;
}
.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: #805AD5;
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: #805AD5;
transform: translateX(5px);
}
.question-item.expanded {
border-color: #805AD5;
background: #FAF5FF;
}
.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: #805AD5;
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: #805AD5;
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: #805AD5;
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: #FAF5FF;
border-left: 4px solid #805AD5;
padding: 15px;
border-radius: 8px;
margin: 15px 0;
font-size: 14px;
line-height: 1.6;
}
.next-btn {
background: linear-gradient(135deg, #805AD5 0%, #6B46C1 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(128, 90, 213, 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, #805AD5 0%, #6B46C1 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: #805AD5;
margin: 20px 0;
}
.final-score {
font-size: 48px;
font-weight: bold;
color: #6B46C1;
margin: 20px 0;
}
.restart-btn {
background: linear-gradient(135deg, #805AD5 0%, #6B46C1 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(128, 90, 213, 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">9的整除特征</div>
<div class="intro-story">
<strong>🔍 深度解密</strong><br><br>
很多小朋友不懂，为什么<span class="highlight">56473</span>这个大数，<br>
可以变成<span class="highlight">5+6+4+7+3</span>来判断？<br><br>
这都要归功于数字<strong>10</strong>的一个小秘密：<br>
<span class="highlight">10 = 9 + 1</span><br><br>
<strong>核心原理</strong>：<br>
• 10 = 9 + 1 (9能被9整除)<br>
• 100 = 99 + 1 (99能被9整除)<br>
• 1000 = 999 + 1 (999能被9整除)<br><br>
所以：<br>
56473 = 5×10000 + 6×1000 + 4×100 + 7×10 + 3<br>
= 5×(9999+1) + 6×(999+1) + 4×(99+1) + 7×(9+1) + 3<br>
= (5×9999 + 6×999 + 4×99 + 7×9) + (5+6+4+7+3)<br><br>
前面括号里全是<strong>9的倍数</strong>（能被9整除），可以直接扔掉！<br>
只看<span class="highlight">5+6+4+7+3=25</span>就够了！<br><br>
25÷9=2...7，不能整除，所以56473也不能被9整除。
</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 === 'decompose'}" @click="switchDemoTab('decompose')">
拆解原理
</div>
<div class="tab-item" :class="{active: demoTab === 'quick'}" @click="switchDemoTab('quick')">
快速判断
</div>
</div>
<!-- 拆解原理动画 -->
<div class="demo-section" :class="{active: demoTab === 'decompose'}">
<div class="animation-area">
<svg class="svg-container" viewBox="0 0 400 330" preserveAspectRatio="xMidYMid meet">
<text id="decompose-title" x="200" y="25" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
189的完整拆解
</text>
<g id="decompose-number-group" opacity="1">
<text x="200" y="90" text-anchor="middle" font-size="50" font-weight="bold" fill="#805AD5">189</text>
<text x="200" y="120" text-anchor="middle" font-size="14" fill="#666">如何变成1+8+9?</text>
</g>
<g id="decompose-step1-group" opacity="0">
<text x="200" y="60" text-anchor="middle" font-size="13" fill="#666">
位值拆分
</text>
<rect x="70" y="80" width="90" height="60" rx="8" fill="#D6BCFA" stroke="#805AD5" stroke-width="2"/>
<text x="115" y="107" text-anchor="middle" font-size="22" font-weight="bold" fill="#6B46C1">1</text>
<text x="115" y="128" text-anchor="middle" font-size="11" fill="#6B46C1">百位</text>
<rect x="170" y="80" width="90" height="60" rx="8" fill="#D6BCFA" stroke="#805AD5" stroke-width="2"/>
<text x="215" y="107" text-anchor="middle" font-size="22" font-weight="bold" fill="#6B46C1">8</text>
<text x="215" y="128" text-anchor="middle" font-size="11" fill="#6B46C1">十位</text>
<rect x="270" y="80" width="60" height="60" rx="8" fill="#D6BCFA" stroke="#805AD5" stroke-width="2"/>
<text x="300" y="107" text-anchor="middle" font-size="22" font-weight="bold" fill="#6B46C1">9</text>
<text x="300" y="128" text-anchor="middle" font-size="11" fill="#6B46C1">个位</text>
</g>
<g id="decompose-step2-group" opacity="0">
<text x="200" y="160" text-anchor="middle" font-size="12" fill="#10b981" font-weight="bold">
核心魔法: 10=9+1, 100=99+1
</text>
<rect x="30" y="175" width="170" height="50" rx="10" fill="#d1fae5" stroke="#10b981" stroke-width="2"/>
<text x="115" y="193" text-anchor="middle" font-size="11" font-weight="bold" fill="#065f46">
9的倍数部分
</text>
<text x="115" y="213" text-anchor="middle" font-size="12" fill="#065f46">
1×99 + 8×9
</text>
<text x="215" y="205" text-anchor="middle" font-size="18" fill="#333">+</text>
<rect x="235" y="175" width="135" height="50" rx="10" fill="#FEE2E2" stroke="#EF4444" stroke-width="2"/>
<text x="302" y="193" text-anchor="middle" font-size="11" font-weight="bold" fill="#991b1b">
余数部分
</text>
<text x="302" y="213" text-anchor="middle" font-size="12" fill="#991b1b">
1+8+9
</text>
</g>
<g id="decompose-step3-group" opacity="0">
<rect x="50" y="245" width="140" height="50" rx="10" fill="#d1fae5" stroke="#10b981" stroke-width="2"/>
<text x="120" y="267" text-anchor="middle" font-size="11" font-weight="bold" fill="#065f46">
9的倍数
</text>
<text x="120" y="283" text-anchor="middle" font-size="13" fill="#065f46">
能被9整除 ✓
</text>
<text x="210" y="275" text-anchor="middle" font-size="20" fill="#805AD5" font-weight="bold">→</text>
<rect x="230" y="245" width="120" height="50" rx="10" fill="#FEE2E2" stroke="#EF4444" stroke-width="2"/>
<text x="290" y="267" text-anchor="middle" font-size="11" font-weight="bold" fill="#991b1b">
只看这个!
</text>
<text x="290" y="283" text-anchor="middle" font-size="14" fill="#991b1b">
1+8+9=18
</text>
</g>
<g id="decompose-result-group" opacity="0">
<circle cx="200" cy="265" r="30" fill="#d1fae5" stroke="#10b981" stroke-width="3"/>
<text x="200" y="275" text-anchor="middle" font-size="30">✓</text>
<text x="200" y="310" text-anchor="middle" font-size="12" font-weight="bold" fill="#10b981">18÷9=2,能整除!</text>
</g>
</svg>
</div>
<div class="math-area">
<div class="math-formula">
<div v-if="decomposeStep === 0">189 ÷ 9 = ?</div>
<div v-if="decomposeStep === 1">
189 = 100 + 80 + 9<br>
<small style="color: #666;">按位拆分</small>
</div>
<div v-if="decomposeStep === 2">
= 1×(99+1) + 8×(9+1) + 9<br>
<small style="color: #10b981;">利用9的倍数!</small>
</div>
<div v-if="decomposeStep === 3">
= (1×99+8×9) + (1+8+9)<br>
<small style="color: #10b981;">前面能被9整除,只看后面!</small>
</div>
</div>
</div>
<div class="step-explanation" v-if="decomposeStep === 0">
判断189能否被9整除
</div>
<div class="step-explanation" v-if="decomposeStep === 1">
按位拆分: 百位、十位、个位
</div>
<div class="step-explanation" v-if="decomposeStep === 2">
核心: 10=9+1, 100=99+1，都能被9整除
</div>
<div class="step-explanation" v-if="decomposeStep === 3">
9的倍数部分一定能被9整除,只要各位数字之和能被9整除就行!
</div>
<div class="control-bar">
<button class="step-btn" @click="prevDecomposeStep" :disabled="decomposeStep === 0">
◀ 上一步
</button>
<button class="step-btn" @click="nextDecomposeStep" :disabled="decomposeStep === 3">
下一步 ▶
</button>
</div>
</div>
<!-- 快速判断动画 -->
<div class="demo-section" :class="{active: demoTab === 'quick'}">
<div class="animation-area">
<svg class="svg-container" viewBox="0 0 400 330" preserveAspectRatio="xMidYMid meet">
<text id="quick-title" x="200" y="25" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
弃9法快速判断
</text>
<g id="quick-number-group" opacity="1">
<text x="200" y="90" text-anchor="middle" font-size="50" font-weight="bold" fill="#805AD5">135</text>
<text x="200" y="120" text-anchor="middle" font-size="14" fill="#666">能被9整除吗?</text>
</g>
<g id="quick-split-group" opacity="0">
<text x="200" y="60" text-anchor="middle" font-size="13" fill="#666" font-weight="500">
第一步: 提取各位数字
</text>
<circle cx="120" cy="100" r="22" fill="#D6BCFA" stroke="#805AD5" stroke-width="2"/>
<text x="120" y="107" text-anchor="middle" font-size="20" font-weight="bold" fill="#6B46C1">1</text>
<text x="170" y="105" text-anchor="middle" font-size="18" fill="#333">+</text>
<circle cx="220" cy="100" r="22" fill="#D6BCFA" stroke="#805AD5" stroke-width="2"/>
<text x="220" y="107" text-anchor="middle" font-size="20" font-weight="bold" fill="#6B46C1">3</text>
<text x="270" y="105" text-anchor="middle" font-size="18" fill="#333">+</text>
<circle cx="320" cy="100" r="22" fill="#D6BCFA" stroke="#805AD5" stroke-width="2"/>
<text x="320" y="107" text-anchor="middle" font-size="20" font-weight="bold" fill="#6B46C1">5</text>
</g>
<g id="quick-sum-group" opacity="0">
<rect x="80" y="150" width="240" height="50" rx="12" fill="#FEF3C7" stroke="#F59E0B" stroke-width="2"/>
<text x="200" y="170" text-anchor="middle" font-size="12" font-weight="bold" fill="#92400e">
第二步: 计算和
</text>
<text x="200" y="189" text-anchor="middle" font-size="16" fill="#92400e">
1 + 3 + 5 = 9
</text>
</g>
<g id="quick-check-group" opacity="0">
<rect x="80" y="220" width="240" height="50" rx="12" fill="#d1fae5" stroke="#10b981" stroke-width="2"/>
<text x="200" y="240" text-anchor="middle" font-size="12" font-weight="bold" fill="#065f46">
第三步: 判断9
</text>
<text x="200" y="259" text-anchor="middle" font-size="14" fill="#065f46">
9 ÷ 9 = 1 ✓
</text>
</g>
<g id="quick-result-group" opacity="0">
<circle cx="200" cy="255" r="30" fill="#d1fae5" stroke="#10b981" stroke-width="3"/>
<text x="200" y="265" text-anchor="middle" font-size="30">✓</text>
<text x="200" y="300" text-anchor="middle" font-size="12" font-weight="bold" fill="#10b981">135能被9整除!</text>
</g>
<g id="quick-magic-group" opacity="0" transform="translate(200, 135)">
<rect x="-60" y="0" width="120" height="26" rx="13" fill="#FEE2E2" stroke="#EF4444" stroke-width="2"/>
<text x="0" y="17" text-anchor="middle" font-size="11" font-weight="bold" fill="#991b1b">
弃9法: 见9就删!
</text>
</g>
</svg>
</div>
<div class="math-area">
<div class="math-formula">
<div v-if="quickStep === 0">135 = ?</div>
<div v-if="quickStep === 1">
提取: 1, 3, 5<br>
<small style="color: #666;">各位数字</small>
</div>
<div v-if="quickStep === 2">
1 + 3 + 5 = 9<br>
<small style="color: #F59E0B;">求和</small>
</div>
<div v-if="quickStep === 3">
9 ÷ 9 = 1<br>
<small style="color: #10b981;">能整除,所以135也能!</small>
</div>
</div>
</div>
<div class="step-explanation" v-if="quickStep === 0">
使用弃9法快速判断
</div>
<div class="step-explanation" v-if="quickStep === 1">
提取每一位的数字: 1, 3, 5
</div>
<div class="step-explanation" v-if="quickStep === 2">
把所有数字加起来: 1+3+5=9，正好是9!
</div>
<div class="step-explanation" v-if="quickStep === 3">
9能被9整除,所以原数135也能被9整除!
</div>
<div class="control-bar">
<button class="step-btn" @click="prevQuickStep" :disabled="quickStep === 0">
◀ 上一步
</button>
<button class="step-btn" @click="nextQuickStep" :disabled="quickStep === 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 === 'principle'}" @click="explainTab = 'principle'">
核心原理
</div>
<div class="tab-item" :class="{active: explainTab === 'methods'}" @click="explainTab = 'methods'">
判断方法
</div>
<div class="tab-item" :class="{active: explainTab === 'examples'}" @click="explainTab = 'examples'">
典型例题
</div>
</div>
<!-- 核心原理 -->
<div class="explain-section" :class="{active: explainTab === 'principle'}">
<div class="method-card">
<div class="method-title">
<span>🔬</span> 为什么只看各位数字之和?
</div>
<div class="method-content">
<p><strong>核心发现:</strong></p>
<div class="example-box">
• 10 = 9 + 1 (9能被9整除)<br>
• 100 = 99 + 1 (99能被9整除)<br>
• 1000 = 999 + 1 (999能被9整除)<br>
• 10000 = 9999 + 1 (9999能被9整除)
</div>
<p style="margin-top: 15px;"><strong>推导过程:</strong></p>
<div class="example-box">
<div class="example-title">以189为例:</div>
189 = 1×100 + 8×10 + 9<br>
= 1×(99+1) + 8×(9+1) + 9<br>
= 1×99 + 1 + 8×9 + 8 + 9<br>
= (1×99 + 8×9) + (1+8+9)<br><br>
前面括号: 都是<strong style="color: #10b981;">9的倍数</strong>,能被9整除 ✓<br>
后面括号: 就是<strong style="color: #805AD5;">各位数字之和</strong>
</div>
<p style="margin-top: 15px;">
所以,一个数能否被9整除,<strong>只取决于各位数字之和!</strong>
</p>
</div>
</div>
<div class="method-card">
<div class="method-title">
<span>🔗</span> 9与3的关系
</div>
<div class="method-content">
<p><strong>重要性质:</strong></p>
<div class="example-box">
能被9整除 → 一定能被3整除<br>
能被3整除 ← 不一定能被9整除
</div>
<p style="margin-top: 15px;">
<strong>原因:</strong> 9 = 3 × 3<br>
所以9的倍数一定是3的倍数,但3的倍数不一定是9的倍数。
</p>
<div class="example-box">
<div class="example-title">例子:</div>
• 18: 能被9整除 → 也能被3整除 ✓<br>
• 6: 能被3整除 → 但不能被9整除 ✗<br>
• 12: 能被3整除 → 但不能被9整除 ✗
</div>
</div>
</div>
</div>
<!-- 判断方法 -->
<div class="explain-section" :class="{active: explainTab === 'methods'}">
<div class="method-card">
<div class="method-title">
<span>📋</span> 方法一: 求和法
</div>
<div class="method-content">
<p><strong>步骤:</strong></p>
<ul class="steps-list">
<li data-step="1">提取各位数字</li>
<li data-step="2">求和</li>
<li data-step="3">判断和能否被9整除</li>
</ul>
<div class="example-box">
<div class="example-title">实例:</div>
判断189:<br>
1. 各位数字: 1, 8, 9<br>
2. 求和: 1+8+9 = 18<br>
3. 判断: 18÷9 = 2 ✓ → <strong style="color: #10b981;">能整除</strong>
</div>
</div>
</div>
<div class="method-card">
<div class="method-title">
<span>✂️</span> 方法二: 弃9法(最快!)
</div>
<div class="method-content">
<p><strong>核心思想:</strong> 直接划掉9或和为9的数字</p>
<div class="example-box">
<div class="example-title">可以消掉的:</div>
• 单个9<br>
• 组合: 1+8, 2+7, 3+6, 4+5<br>
• 三个: 1+2+6, 1+3+5, 2+3+4
</div>
<div class="example-box">
<div class="example-title">实例: 135</div>
1 + 3 + 5 = 9 → 全部消掉 ✓<br>
消完了 → <strong style="color: #10b981;">能被9整除</strong>
</div>
<div class="example-box">
<div class="example-title">实例: 6378</div>
6 + 3 = 9 → 消掉<br>
7 + 8 = 15 → 1+5=6,留下6<br>
剩余6 → <strong style="color: #ef4444;">不能被9整除</strong>
</div>
</div>
</div>
<div class="method-card">
<div class="method-title">
<span>⚡</span> 余数法则
</div>
<div class="method-content">
<p><strong>重要性质:</strong></p>
<div class="example-box">
原数除以9的余数 = 各位数字之和除以9的余数
</div>
<div class="example-box">
<div class="example-title">实例:</div>
56473除以9的余数?<br><br>
<strong>方法:</strong><br>
各位和: 5+6+4+7+3 = 25<br>
25 ÷ 9 = 2 ... 7<br><br>
<strong style="color: #10b981;">答案: 余7</strong>
</div>
</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>判断 189 能否被9整除</span>
<span class="expand-icon">▼</span>
</div>
<div class="question-answer">
<strong>📝 方法一(求和法):</strong><br><br>
<strong>步骤1:</strong> 提取各位数字<br>
1, 8, 9<br><br>
<strong>步骤2:</strong> 求和<br>
1 + 8 + 9 = 18<br><br>
<strong>步骤3:</strong> 判断<br>
18 ÷ 9 = 2 ✓<br><br>
<strong style="color: #10b981;">✅ 结论: 能被9整除</strong><br><br>
<strong>📝 方法二(弃9法):</strong><br>
9直接消掉, 1+8=9消掉 → 全消完 ✓
</div>
</div>
<div class="question-item" :class="{expanded: expandedQ === 2}" @click="toggleQuestion(2)">
<div class="question-header">
<span>一个数各位数字之和是16，它除以9余几?</span>
<span class="expand-icon">▼</span>
</div>
<div class="question-answer">
<strong>📝 完整过程:</strong><br><br>
<strong>关键:</strong> 余数与各位数字之和的余数相同<br><br>
<strong>计算:</strong><br>
16 ÷ 9 = 1 ... 7<br><br>
<strong style="color: #10b981;">✅ 答案: 余7</strong>
</div>
</div>
<div class="question-item" :class="{expanded: expandedQ === 3}" @click="toggleQuestion(3)">
<div class="question-header">
<span>五位数 12□45 能被9整除,□里填几?</span>
<span class="expand-icon">▼</span>
</div>
<div class="question-answer">
<strong>📝 完整分析:</strong><br><br>
<strong>方法一(求和法):</strong><br>
已知: 1 + 2 + □ + 4 + 5 = 12 + □<br>
条件: 12 + □ 必须是9的倍数<br><br>
可能值: 9, 18, 27...<br>
12 + □ = 18<br>
□ = 6<br><br>
<strong>方法二(弃9法):</strong><br>
4 + 5 = 9 → 消掉<br>
剩下: 1 + 2 + □ = 3 + □<br>
要凑成9: □ = 6<br><br>
<strong style="color: #10b981;">✅ 答案: 6</strong>
</div>
</div>
<div class="question-item" :class="{expanded: expandedQ === 4}" @click="toggleQuestion(4)">
<div class="question-header">
<span>四位数N减去S(N)等于2007。N是多少?</span>
<span class="expand-icon">▼</span>
</div>
<div class="question-answer">
<strong>📝 巧妙思路:</strong><br><br>
<strong>关键性质:</strong><br>
N - S(N) 一定是9的倍数！<br><br>
<strong>原因:</strong><br>
N和S(N)除以9的余数相同<br>
所以它们的差能被9整除<br><br>
<strong>验证2007:</strong><br>
2007 ÷ 9 = 223 ✓ (能整除)<br><br>
<strong>枚举四位数:</strong><br>
设N = 20AB (两千多的四位数)<br>
S(N) = 2+0+A+B = 2+A+B<br>
N - S(N) = 2007<br><br>
尝试: N = 2019<br>
S(2019) = 2+0+1+9 = 12<br>
2019 - 12 = 2007 ✓<br><br>
<strong style="color: #10b981;">✅ 答案: 2019</strong>
</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">9的秘密</div>
<div class="secret-rule">
10 = 9 + 1<br>
100 = 99 + 1<br>
1000 = 999 + 1
</div>
<div class="secret-explanation">
所有9, 99, 999...都能被9整除！<br><br>
所以大数的位值部分可以直接忽略，<br>
只看各位数字之和就够了。<br><br>
这就是9的整除特征的核心原理！
</div>
</div>
<div class="secret-card" style="background: linear-gradient(135deg, #319795 0%, #2C7A7B 100%);">
<div class="secret-emoji">✂️</div>
<div class="secret-title">弃9法</div>
<div class="secret-rule">
见9就删!
</div>
<div class="secret-explanation">
<strong>直接消掉:</strong><br>
单个9<br><br>
<strong>组合消掉:</strong><br>
1+8, 2+7, 3+6, 4+5<br>
1+2+6, 1+3+5, 2+3+4<br><br>
<strong>例:</strong> 135<br>
1+3+5=9 → 全消 → 能整除!
</div>
</div>
<div class="secret-card" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
<div class="secret-emoji">⚠️</div>
<div class="secret-title">9与3的关系</div>
<div class="secret-rule">
包含关系
</div>
<div class="secret-explanation">
能被9整除 → 一定能被3整除<br>
能被3整除 ← 不一定能被9整除<br><br>
<strong>原因:</strong> 9 = 3 × 3<br><br>
<strong>例子:</strong><br>
• 18: 能被9整除 ✓ 也能被3整除 ✓<br>
• 6: 能被3整除 ✓ 但不能被9整除 ✗
</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: 'decompose',
explainTab: 'principle',
expandedQ: null,
decomposeStep: 0,
quickStep: 0,
// 课内练习
currentQuestion: 0,
score: 0,
answered: false,
isCorrect: false,
selectedOption: null,
practiceCompleted: false,
practiceQuestions: [
{
text: '189能被9整除吗？',
options: [
{ text: '能', correct: true },
{ text: '不能', correct: false }
],
explanation: '1+8+9=18，18÷9=2，可以整除。'
},
{
text: '下面哪个数是9的倍数？',
options: [
{ text: '123', correct: false },
{ text: '810', correct: true },
{ text: '555', correct: false }
],
explanation: '123(1+2+3=6), 810(8+1+0=9✓), 555(5+5+5=15)。选810。'
},
{
text: '用弃9法判断91827',
options: [
{ text: '能整除', correct: true },
{ text: '不能整除', correct: false }
],
explanation: '9划掉，1+8=9划掉，2+7=9划掉。全消完了，能整除!'
},
{
text: '一个数各位数字之和是25，它除以9余几？',
options: [
{ text: '0', correct: false },
{ text: '5', correct: false },
{ text: '7', correct: true }
],
explanation: '原数除以9的余数 = 各位和除以9的余数。25÷9=2...7。'
},
{
text: '135既能被9整除，也能被3整除吗？',
options: [
{ text: '是', correct: true },
{ text: '否', correct: false }
],
explanation: '1+3+5=9，能被9整除。能被9整除一定能被3整除(因为9=3×3)。'
}
],
// 奥数挑战
currentOlympiad: 0,
olympiadScore: 0,
olympiadAnswered: false,
isOlympiadCorrect: false,
selectedOlympiadOption: null,
wrongAttempts: 0,
olympiadCompleted: false,
olympiadQuestions: [
{
difficulty: 'bronze',
difficultyText: '🥉 青铜',
text: '五位数 12□45 能被9整除，□里填几？',
options: [
{ text: '4', correct: false },
{ text: '5', correct: false },
{ text: '6', correct: true }
],
hint1: '先算已知数字的和',
hint2: '1+2+4+5=12，12+□必须是9的倍数',
explanation: '弃9法：4+5=9消掉。剩下1+2=3。要凑成9，□必须填6。'
},
{
difficulty: 'bronze',
difficultyText: '🥉 青铜',
text: '一个数各位数字之和是16，它除以9余几？',
options: [
{ text: '0', correct: false },
{ text: '5', correct: false },
{ text: '7', correct: true }
],
hint1: '原数的余数=各位和的余数',
hint2: '16÷9等于多少余几？',
explanation: '原数除以9的余数 = 各位和除以9的余数。16÷9=1...7。'
},
{
difficulty: 'silver',
difficultyText: '🥈 白银',
text: '用0,1,2,6组成能被9整除的三位数(不重复)，有几个？',
options: [
{ text: '4个', correct: false },
{ text: '6个', correct: true },
{ text: '10个', correct: false }
],
hint1: '先找哪些数字组合和是9',
hint2: '0+1+2+6=9，但0不能在首位',
explanation: '0+1+2+6=9，但要用不重复的三个数。只能用{1,2,6}。排列：126,162,216,261,612,621。共6个。'
},
{
difficulty: 'silver',
difficultyText: '🥈 白银',
text: '1234 × 5678 × 910 除以9的余数是？',
options: [
{ text: '0', correct: false },
{ text: '1', correct: false },
{ text: '8', correct: true }
],
hint1: '积的余数=各余数的积',
hint2: '1234余1, 5678余8, 910余1',
explanation: '1234余1; 5678余8; 910余1。积的余数 = 1×8×1 = 8。'
},
{
difficulty: 'silver',
difficultyText: '🥈 白银',
text: '既能被9整除，又能被5整除的最小三位数是？',
options: [
{ text: '100', correct: false },
{ text: '135', correct: true },
{ text: '145', correct: false }
],
hint1: '被5整除末尾是0或5',
hint2: '100: 1+0+0=1(×), 135: 1+3+5=9(✓)',
explanation: '被5整除末尾0或5。被9整除和是9的倍数。100(和=1), 135(和=9, OK)。'
},
{
difficulty: 'gold',
difficultyText: '🥇 黄金',
text: '四位数 3a7b 能被45整除，a+b=？',
options: [
{ text: '8', correct: true },
{ text: '12', correct: false },
{ text: '15', correct: false }
],
hint1: '45=5×9，要同时被5和9整除',
hint2: 'b只能是0或5，分别验证',
explanation: '被45整除=被5和9整除。b只能是0或5。若b=0, 3+a+7=10+a, a=8 (a+b=8)。若b=5, 3+a+7+5=15+a, a=3 (a+b=8)。'
},
{
difficulty: 'gold',
difficultyText: '🥇 黄金',
text: '把1到2025连起来写的大数，除以9余几？',
options: [
{ text: '0', correct: true },
{ text: '1', correct: false },
{ text: '3', correct: false }
],
hint1: '大数的余数=所有数字之和的余数',
hint2: '(1+2025)×2025÷2，2025能被9整除',
explanation: '大数的余数=所有自然数之和的余数。(1+2025)×2025÷2。2025=9×225，所以乘积一定是9的倍数。余0。'
},
{
difficulty: 'gold',
difficultyText: '🥇 黄金',
text: '四位数N减去S(N)等于2007。N是多少？',
options: [
{ text: '2019', correct: true },
{ text: '2028', correct: false },
{ text: '2030', correct: false }
],
hint1: 'N-S(N)一定是9的倍数',
hint2: '验证选项：2019-12=2007',
explanation: 'N - S(N) 一定是9的倍数。2007÷9=223。验证：2019数字和12。2019-12=2007。Bingo！'
}
]
};
},
mounted() {
console.log('9的整除特征完整版已加载!');
},
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 === 'decompose') {
this.speakDecomposeStep();
} else {
this.speakQuickStep();
}
}, 300);
}
},
switchDemoTab(tab) {
this.demoTab = tab;
if (tab === 'decompose') {
this.decomposeStep = 0;
this.$nextTick(() => {
this.initDecomposeAnimation();
this.speakDecomposeStep();
});
} else {
this.quickStep = 0;
this.$nextTick(() => {
this.initQuickAnimation();
this.speakQuickStep();
});
}
},
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('今天我们要彻底搞懂9的整除特征。核心秘密是：10等于9加1，100等于99加1，1000等于999加1。所有9、99、999这些数都能被9整除！所以一个数的位值部分可以直接扔掉，只看各位数字之和就够了！');
},
// ========== 拆解原理动画 ==========
initDecomposeAnimation() {
if (typeof gsap === 'undefined') return;
gsap.set("#decompose-number-group", {opacity: 1});
gsap.set("#decompose-step1-group", {opacity: 0});
gsap.set("#decompose-step2-group", {opacity: 0});
gsap.set("#decompose-step3-group", {opacity: 0});
gsap.set("#decompose-result-group", {opacity: 0});
},
nextDecomposeStep() {
if (this.decomposeStep < 3) {
this.decomposeStep++;
this.$nextTick(() => {
this.runDecomposeAnimation();
this.speakDecomposeStep();
});
}
},
prevDecomposeStep() {
if (this.decomposeStep > 0) {
this.decomposeStep--;
this.$nextTick(() => {
this.runDecomposeAnimation();
this.speakDecomposeStep();
});
}
},
speakDecomposeStep() {
const texts = [
'让我们来看看189这个数是怎么变成1加8加9的',
'第一步，按位拆分。1在百位，8在十位，9在个位',
'核心魔法来了！10等于9加1，100等于99加1。9、99都能被9整除',
'所以可以分成两部分：9的倍数部分一定能被9整除，只要看余数部分1加8加9就行了！18能被9整除，所以189也能被9整除'
];
this.speak(texts[this.decomposeStep]);
},
runDecomposeAnimation() {
if (typeof gsap === 'undefined') return;
const tl = gsap.timeline();
if (this.decomposeStep === 0) {
tl.to("#decompose-number-group", {opacity: 1, duration: 0.3})
.to("#decompose-step1-group", {opacity: 0, duration: 0.2}, "<")
.to("#decompose-step2-group", {opacity: 0, duration: 0.2}, "<")
.to("#decompose-step3-group", {opacity: 0, duration: 0.2}, "<")
.to("#decompose-result-group", {opacity: 0, duration: 0.2}, "<");
}
if (this.decomposeStep === 1) {
tl.to("#decompose-number-group", {opacity: 0, y: -20, duration: 0.4})
.to("#decompose-step1-group", {opacity: 1, duration: 0.5})
.from("#decompose-step1-group rect", {
scale: 0,
y: 50,
stagger: 0.15,
ease: "back.out(1.5)",
duration: 0.7
}, "<0.2");
}
if (this.decomposeStep === 2) {
tl.to("#decompose-step2-group", {opacity: 1, duration: 0.5})
.from("#decompose-step2-group rect", {
scale: 0,
x: -30,
stagger: 0.2,
ease: "back.out(1.5)",
duration: 0.6
}, "<0.2");
}
if (this.decomposeStep === 3) {
tl.to("#decompose-step3-group", {opacity: 1, duration: 0.5})
.from("#decompose-step3-group rect", {
scale: 0,
stagger: 0.15,
ease: "back.out(1.5)",
duration: 0.6
}, "<0.2")
.to("#decompose-result-group", {opacity: 1, scale: 1, ease: "back.out(2)", duration: 0.5}, "-=0.2");
if (typeof confetti !== 'undefined') {
setTimeout(() => {
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 },
colors: ['#805AD5', '#6B46C1', '#553C9A']
});
}, 500);
}
}
},
// ========== 快速判断动画 ==========
initQuickAnimation() {
if (typeof gsap === 'undefined') return;
gsap.set("#quick-number-group", {opacity: 1});
gsap.set("#quick-split-group", {opacity: 0});
gsap.set("#quick-sum-group", {opacity: 0});
gsap.set("#quick-check-group", {opacity: 0});
gsap.set("#quick-result-group", {opacity: 0});
gsap.set("#quick-magic-group", {opacity: 0});
},
nextQuickStep() {
if (this.quickStep < 3) {
this.quickStep++;
this.$nextTick(() => {
this.runQuickAnimation();
this.speakQuickStep();
});
}
},
prevQuickStep() {
if (this.quickStep > 0) {
this.quickStep--;
this.$nextTick(() => {
this.runQuickAnimation();
this.speakQuickStep();
});
}
},
speakQuickStep() {
const texts = [
'让我们用弃9法快速判断135',
'第一步，提取各位数字：1、3、5',
'第二步，把所有数字加起来：1加3加5等于9',
'第三步，9能被9整除！所以135也能被9整除。这就是弃9法，见9就删！'
];
this.speak(texts[this.quickStep]);
},
runQuickAnimation() {
if (typeof gsap === 'undefined') return;
const tl = gsap.timeline();
if (this.quickStep === 0) {
tl.to("#quick-number-group", {opacity: 1, duration: 0.3})
.to("#quick-split-group", {opacity: 0, duration: 0.2}, "<")
.to("#quick-sum-group", {opacity: 0, duration: 0.2}, "<")
.to("#quick-check-group", {opacity: 0, duration: 0.2}, "<")
.to("#quick-result-group", {opacity: 0, duration: 0.2}, "<")
.to("#quick-magic-group", {opacity: 0, duration: 0.2}, "<");
}
if (this.quickStep === 1) {
tl.to("#quick-number-group", {opacity: 0, y: -20, duration: 0.4})
.to("#quick-split-group", {opacity: 1, duration: 0.5})
.from("#quick-split-group circle", {
scale: 0,
y: 50,
stagger: 0.15,
ease: "back.out(1.7)",
duration: 0.7
}, "<0.2");
}
if (this.quickStep === 2) {
tl.to("#quick-sum-group", {opacity: 1, duration: 0.5})
.from("#quick-sum-group rect", {
scale: 0,
ease: "back.out(1.7)",
duration: 0.6
}, "<0.2")
.to("#quick-magic-group", {opacity: 1, scale: 1, ease: "back.out(2)", duration: 0.5}, "-=0.3");
}
if (this.quickStep === 3) {
tl.to("#quick-check-group", {opacity: 1, duration: 0.5})
.from("#quick-check-group rect", {
scale: 0,
ease: "back.out(1.7)",
duration: 0.6
}, "<0.2")
.to("#quick-result-group", {opacity: 1, scale: 1, ease: "back.out(2)", duration: 0.5}, "-=0.2");
if (typeof confetti !== 'undefined') {
setTimeout(() => {
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 },
colors: ['#805AD5', '#6B46C1', '#553C9A']
});
}, 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: ['#805AD5', '#6B46C1', '#553C9A']
});
}
} 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: ['#805AD5', '#6B46C1', '#553C9A']
});
}
} 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 生成。
登录后可复制完整代码