<!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>4和25的整除特征 - 完整版</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: #319795;
}
.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: #E6FFFA;
padding: 20px;
border-radius: 12px;
margin: 20px 0;
border-left: 4px solid #319795;
}
.highlight {
color: #319795;
font-weight: bold;
}
.speak-btn {
background: linear-gradient(135deg, #319795 0%, #2C7A7B 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(49, 151, 149, 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: #319795;
border-bottom-color: #319795;
}
.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, #E6FFFA 0%, #B2F5EA 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 #319795;
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: #319795;
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(49, 151, 149, 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 #319795;
}
.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: #319795;
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: #319795;
transform: translateX(5px);
}
.question-item.expanded {
border-color: #319795;
background: #E6FFFA;
}
.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: #319795;
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: #319795;
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: #319795;
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: #E6FFFA;
border-left: 4px solid #319795;
padding: 15px;
border-radius: 8px;
margin: 15px 0;
font-size: 14px;
line-height: 1.6;
}
.next-btn {
background: linear-gradient(135deg, #319795 0%, #2C7A7B 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(49, 151, 149, 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, #319795 0%, #2C7A7B 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: #319795;
margin: 20px 0;
}
.final-score {
font-size: 48px;
font-weight: bold;
color: #2C7A7B;
margin: 20px 0;
}
.restart-btn {
background: linear-gradient(135deg, #319795 0%, #2C7A7B 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(49, 151, 149, 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">4和25的整除特征</div>
<div class="intro-story">
<strong>🔑 VIP通道的秘密</strong><br><br>
想象一个神奇的数字<span class="highlight">100</span>！<br><br>
100有个超能力：<strong>100 = 4 × 25</strong><br>
这意味着100既能被4整除，也能被25整除！<br><br>
因为<span class="highlight">每100个就是一组VIP</span>，所以：<br>
• 200, 300, 1000, 5400... 百位及以上<strong>自动通过</strong><br>
• 只需要检查<span class="highlight">最后两位数字</span>就够了！<br><br>
<strong>举例</strong>：6549387<br>
= 6549300 + 87<br>
= 65493 × 100 + 87<br><br>
前面的65493个100都是VIP，<strong>免检</strong>！<br>
只看<span class="highlight">87</span>能不能被4或25整除。
</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 === 'direct4'}" @click="switchDemoTab('direct4')">
4的判断
</div>
<div class="tab-item" :class="{active: demoTab === 'direct25'}" @click="switchDemoTab('direct25')">
25的判断
</div>
</div>
<!-- 4的整除判断 -->
<div class="demo-section" :class="{active: demoTab === 'direct4'}">
<div class="animation-area">
<svg class="svg-container" viewBox="0 0 400 330" preserveAspectRatio="xMidYMid meet">
<text id="direct4-title" x="200" y="25" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
判断6524能否被4整除
</text>
<g id="direct4-number-group" opacity="1">
<text x="200" y="90" text-anchor="middle" font-size="50" font-weight="bold" fill="#319795">6524</text>
<text x="200" y="120" text-anchor="middle" font-size="14" fill="#666">能被4整除吗?</text>
</g>
<g id="direct4-split-group" opacity="0">
<text x="200" y="60" text-anchor="middle" font-size="14" fill="#666" font-weight="500">
拆分: 6500 + 24
</text>
<rect x="50" y="80" width="140" height="65" rx="10" fill="#d1fae5" stroke="#10b981" stroke-width="2"/>
<text x="120" y="108" text-anchor="middle" font-size="24" font-weight="bold" fill="#10b981">6500</text>
<text x="120" y="130" text-anchor="middle" font-size="11" fill="#10b981">整百部分</text>
<text x="210" y="115" text-anchor="middle" font-size="20" fill="#333">+</text>
<rect x="230" y="80" width="120" height="65" rx="10" fill="#FEE2E2" stroke="#EF4444" stroke-width="2"/>
<text x="290" y="108" text-anchor="middle" font-size="24" font-weight="bold" fill="#EF4444">24</text>
<text x="290" y="130" text-anchor="middle" font-size="11" fill="#EF4444">末两位</text>
</g>
<g id="direct4-hundred-group" opacity="0">
<rect x="50" y="170" width="300" height="50" rx="12" fill="#d1fae5" stroke="#10b981" stroke-width="2"/>
<text x="200" y="190" text-anchor="middle" font-size="12" font-weight="bold" fill="#065f46">
整百部分分析
</text>
<text x="200" y="210" text-anchor="middle" font-size="13" fill="#065f46">
6500 = 65 × 100 = 65 × (4 × 25) ✓
</text>
</g>
<g id="direct4-last-group" opacity="0">
<rect x="50" y="240" width="140" height="50" rx="10" fill="#FEE2E2" stroke="#EF4444" stroke-width="2"/>
<text x="120" y="262" text-anchor="middle" font-size="12" font-weight="bold" fill="#991b1b">
末两位判断
</text>
<text x="120" y="280" text-anchor="middle" font-size="14" fill="#991b1b">
24 ÷ 4 = 6 ✓
</text>
<text x="210" y="270" text-anchor="middle" font-size="20" fill="#10b981" font-weight="bold">→</text>
<rect x="230" y="240" width="120" height="50" rx="10" fill="#d1fae5" stroke="#10b981" stroke-width="2"/>
<text x="290" y="262" text-anchor="middle" font-size="12" font-weight="bold" fill="#065f46">
结论
</text>
<text x="290" y="280" text-anchor="middle" font-size="13" fill="#065f46">
能被4整除 ✓
</text>
</g>
</svg>
</div>
<div class="math-area">
<div class="math-formula">
<div v-if="direct4Step === 0">6524 = ?</div>
<div v-if="direct4Step === 1">
6524 = 6500 + 24<br>
<small style="color: #666;">(整百 + 末两位)</small>
</div>
<div v-if="direct4Step === 2">
6500 = 65 × 100 = 65 × 4 × 25<br>
<small style="color: #10b981;">整百部分一定能被4整除!</small>
</div>
<div v-if="direct4Step === 3">
24 ÷ 4 = 6 ✓<br>
<small style="color: #10b981;">末两位也能整除,所以6524能被4整除!</small>
</div>
</div>
</div>
<div class="step-explanation" v-if="direct4Step === 0">
判断6524能否被4整除
</div>
<div class="step-explanation" v-if="direct4Step === 1">
第一步: 拆分成整百部分和末两位
</div>
<div class="step-explanation" v-if="direct4Step === 2">
关键: 100=4×25,所以整百部分一定能被4整除
</div>
<div class="step-explanation" v-if="direct4Step === 3">
只要末两位24也能被4整除,整个数就能被4整除!
</div>
<div class="control-bar">
<button class="step-btn" @click="prevDirect4Step" :disabled="direct4Step === 0">
◀ 上一步
</button>
<button class="step-btn" @click="nextDirect4Step" :disabled="direct4Step === 3">
下一步 ▶
</button>
</div>
</div>
<!-- 25的整除判断 -->
<div class="demo-section" :class="{active: demoTab === 'direct25'}">
<div class="animation-area">
<svg class="svg-container" viewBox="0 0 400 330" preserveAspectRatio="xMidYMid meet">
<text id="direct25-title" x="200" y="25" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
判断6525能否被25整除
</text>
<g id="direct25-number-group" opacity="1">
<text x="200" y="90" text-anchor="middle" font-size="50" font-weight="bold" fill="#319795">6525</text>
<text x="200" y="120" text-anchor="middle" font-size="14" fill="#666">能被25整除吗?</text>
</g>
<g id="direct25-split-group" opacity="0">
<text x="200" y="60" text-anchor="middle" font-size="14" fill="#666" font-weight="500">
拆分: 6500 + 25
</text>
<rect x="50" y="80" width="140" height="65" rx="10" fill="#d1fae5" stroke="#10b981" stroke-width="2"/>
<text x="120" y="108" text-anchor="middle" font-size="24" font-weight="bold" fill="#10b981">6500</text>
<text x="120" y="130" text-anchor="middle" font-size="11" fill="#10b981">整百部分</text>
<text x="210" y="115" text-anchor="middle" font-size="20" fill="#333">+</text>
<rect x="230" y="80" width="120" height="65" rx="10" fill="#FEE2E2" stroke="#EF4444" stroke-width="2"/>
<text x="290" y="108" text-anchor="middle" font-size="24" font-weight="bold" fill="#EF4444">25</text>
<text x="290" y="130" text-anchor="middle" font-size="11" fill="#EF4444">末两位</text>
</g>
<g id="direct25-hundred-group" opacity="0">
<rect x="50" y="170" width="300" height="50" rx="12" fill="#d1fae5" stroke="#10b981" stroke-width="2"/>
<text x="200" y="190" text-anchor="middle" font-size="12" font-weight="bold" fill="#065f46">
整百部分分析
</text>
<text x="200" y="210" text-anchor="middle" font-size="13" fill="#065f46">
6500 = 65 × 100 = 65 × 25 × 4 ✓
</text>
</g>
<g id="direct25-last-group" opacity="0">
<rect x="50" y="240" width="140" height="50" rx="10" fill="#FEE2E2" stroke="#EF4444" stroke-width="2"/>
<text x="120" y="257" text-anchor="middle" font-size="12" font-weight="bold" fill="#991b1b">
末两位判断
</text>
<text x="120" y="275" text-anchor="middle" font-size="14" fill="#991b1b">
25 ÷ 25 = 1 ✓
</text>
<text x="210" y="270" text-anchor="middle" font-size="20" fill="#10b981" font-weight="bold">→</text>
<rect x="230" y="240" width="120" height="50" rx="10" fill="#d1fae5" stroke="#10b981" stroke-width="2"/>
<text x="290" y="257" text-anchor="middle" font-size="12" font-weight="bold" fill="#065f46">
结论
</text>
<text x="290" y="275" text-anchor="middle" font-size="13" fill="#065f46">
能被25整除 ✓
</text>
</g>
<g id="direct25-magic-group" opacity="0" transform="translate(200, 155)">
<rect x="-80" y="0" width="160" height="28" rx="14" fill="#FEFCBF" stroke="#D69E2E" stroke-width="2"/>
<text x="0" y="18" text-anchor="middle" font-size="11" font-weight="bold" fill="#975A16">
25的倍数: 00,25,50,75
</text>
</g>
</svg>
</div>
<div class="math-area">
<div class="math-formula">
<div v-if="direct25Step === 0">6525 = ?</div>
<div v-if="direct25Step === 1">
6525 = 6500 + 25<br>
<small style="color: #666;">(整百 + 末两位)</small>
</div>
<div v-if="direct25Step === 2">
6500 = 65 × 100 = 65 × 25 × 4<br>
<small style="color: #10b981;">整百部分一定能被25整除!</small>
</div>
<div v-if="direct25Step === 3">
25 ÷ 25 = 1 ✓<br>
<small style="color: #10b981;">末两位是25,能整除!</small>
</div>
</div>
</div>
<div class="step-explanation" v-if="direct25Step === 0">
判断6525能否被25整除
</div>
<div class="step-explanation" v-if="direct25Step === 1">
第一步: 拆分成整百部分和末两位
</div>
<div class="step-explanation" v-if="direct25Step === 2">
关键: 100=25×4,所以整百部分一定能被25整除
</div>
<div class="step-explanation" v-if="direct25Step === 3">
25的倍数末两位只有: 00, 25, 50, 75 这四种!
</div>
<div class="control-bar">
<button class="step-btn" @click="prevDirect25Step" :disabled="direct25Step === 0">
◀ 上一步
</button>
<button class="step-btn" @click="nextDirect25Step" :disabled="direct25Step === 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 === 'rule4'}" @click="explainTab = 'rule4'">
4的规则
</div>
<div class="tab-item" :class="{active: explainTab === 'rule25'}" @click="explainTab = 'rule25'">
25的规则
</div>
<div class="tab-item" :class="{active: explainTab === 'examples'}" @click="explainTab = 'examples'">
典型例题
</div>
</div>
<!-- 4的规则 -->
<div class="explain-section" :class="{active: explainTab === 'rule4'}">
<div class="method-card">
<div class="method-title">
<span>🎯</span> 4的整除特征
</div>
<div class="method-content">
<p><strong>核心口诀:</strong> "看末两位,除以4,整除就行!"</p>
<div class="example-box">
<div class="example-title">判断规则:</div>
一个数能被4整除 ⟺ <strong style="color: #319795;">末两位数能被4整除</strong>
</div>
<ul class="steps-list">
<li data-step="1">找出末两位数字</li>
<li data-step="2">判断末两位能否被4整除</li>
<li data-step="3">得出结论</li>
</ul>
<div class="example-box">
<div class="example-title">实例:</div>
• 6524 → 末两位24 → 24÷4=6 → <strong style="color: #10b981;">能整除</strong><br>
• 3518 → 末两位18 → 18÷4=4...2 → <strong style="color: #ef4444;">不能整除</strong><br>
• 7600 → 末两位00 → 00÷4=0 → <strong style="color: #10b981;">能整除</strong>
</div>
</div>
</div>
<div class="method-card">
<div class="method-title">
<span>🔍</span> 为什么只看末两位?
</div>
<div class="method-content">
<p><strong>原理:</strong> 100 = 4 × 25</p>
<div class="example-box">
任何数 = 整百部分 + 末两位<br><br>
<strong>例如:</strong> 6524 = 6500 + 24<br>
= 65 × 100 + 24<br>
= 65 × <span style="color: #319795; font-weight: bold;">4 × 25</span> + 24
</div>
<p style="margin-top: 15px;">
因为65×4×25中有因子4,所以<strong>整百部分一定能被4整除</strong>。<br>
只要末两位24也能被4整除,整个数就能被4整除!
</p>
</div>
</div>
</div>
<!-- 25的规则 -->
<div class="explain-section" :class="{active: explainTab === 'rule25'}">
<div class="method-card">
<div class="method-title">
<span>💎</span> 25的整除特征
</div>
<div class="method-content">
<p><strong>超级口诀:</strong> "末两位,四选一: 00, 25, 50, 75!"</p>
<div class="example-box">
<div class="example-title">判断规则:</div>
一个数能被25整除 ⟺ 末两位是 <strong style="color: #319795;">00, 25, 50, 75</strong>
</div>
<ul class="steps-list">
<li data-step="1">看末两位数字</li>
<li data-step="2">是00/25/50/75之一吗?</li>
<li data-step="3">是→能整除, 否→不能整除</li>
</ul>
<div class="example-box">
<div class="example-title">实例:</div>
• 6525 → 末两位<strong style="color: #10b981;">25</strong> → 能整除 ✓<br>
• 8750 → 末两位<strong style="color: #10b981;">50</strong> → 能整除 ✓<br>
• 3475 → 末两位<strong style="color: #10b981;">75</strong> → 能整除 ✓<br>
• 5600 → 末两位<strong style="color: #10b981;">00</strong> → 能整除 ✓<br>
• 1234 → 末两位<strong style="color: #ef4444;">34</strong> → 不能整除 ✗
</div>
</div>
</div>
<div class="method-card">
<div class="method-title">
<span>🎓</span> 为什么只有这4种?
</div>
<div class="method-content">
<p><strong>推导过程:</strong></p>
<div class="example-box">
0到99中,被25整除的数:<br>
0, 25, 50, 75, 100(=0)<br><br>
所以末两位只能是:<br>
<strong style="color: #319795; font-size: 18px;">00, 25, 50, 75</strong>
</div>
<p style="margin-top: 15px;">
记忆技巧: 从0开始,每次加25:<br>
0 → +25 → 25 → +25 → 50 → +25 → 75 → +25 → 100(=0)
</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>判断 6524 能否被4整除</span>
<span class="expand-icon">▼</span>
</div>
<div class="question-answer">
<strong>📝 完整过程:</strong><br><br>
<strong>步骤1:</strong> 拆分数字<br>
6524 = 6500 + 24<br><br>
<strong>步骤2:</strong> 分析整百部分<br>
6500 = 65 × 100 = 65 × 4 × 25<br>
(整百部分一定能被4整除)<br><br>
<strong>步骤3:</strong> 分析末两位<br>
24 ÷ 4 = 6 ✓<br><br>
<strong style="color: #10b981;">✅ 结论: 6524能被4整除</strong><br>
验算: 6524 ÷ 4 = 1631
</div>
</div>
<div class="question-item" :class="{expanded: expandedQ === 2}" @click="toggleQuestion(2)">
<div class="question-header">
<span>判断 8750 能否被25整除</span>
<span class="expand-icon">▼</span>
</div>
<div class="question-answer">
<strong>📝 快速判断:</strong><br><br>
<strong>步骤1:</strong> 看末两位<br>
末两位是 50<br><br>
<strong>步骤2:</strong> 对照四个特征数<br>
00, 25, <strong style="color: #319795;">50</strong>, 75<br>
50在列表中! ✓<br><br>
<strong style="color: #10b981;">✅ 结论: 8750能被25整除</strong><br>
验算: 8750 ÷ 25 = 350
</div>
</div>
<div class="question-item" :class="{expanded: expandedQ === 3}" @click="toggleQuestion(3)">
<div class="question-header">
<span>202□ 能被4整除,□可以填哪些数字?</span>
<span class="expand-icon">▼</span>
</div>
<div class="question-answer">
<strong>📝 完整分析:</strong><br><br>
<strong>关键:</strong> 只看末两位2□<br><br>
<strong>枚举法:</strong><br>
□=0: 20 ÷ 4 = 5 ✓<br>
□=1: 21 ÷ 4 = 5...1 ✗<br>
□=2: 22 ÷ 4 = 5...2 ✗<br>
□=3: 23 ÷ 4 = 5...3 ✗<br>
□=4: 24 ÷ 4 = 6 ✓<br>
□=5: 25 ÷ 4 = 6...1 ✗<br>
□=6: 26 ÷ 4 = 6...2 ✗<br>
□=7: 27 ÷ 4 = 6...3 ✗<br>
□=8: 28 ÷ 4 = 7 ✓<br>
□=9: 29 ÷ 4 = 7...1 ✗<br><br>
<strong style="color: #10b981;">✅ 答案: 0, 4, 8 (共3个)</strong>
</div>
</div>
<div class="question-item" :class="{expanded: expandedQ === 4}" @click="toggleQuestion(4)">
<div class="question-header">
<span>六位数 2025AB 能被25整除,A+B最大是多少?</span>
<span class="expand-icon">▼</span>
</div>
<div class="question-answer">
<strong>📝 完整思路:</strong><br><br>
<strong>关键:</strong> 末两位AB必须是00,25,50,75之一<br><br>
<strong>分析各种情况:</strong><br>
• AB = 00: A+B = 0+0 = 0<br>
• AB = 25: A+B = 2+5 = 7<br>
• AB = 50: A+B = 5+0 = 5<br>
• AB = 75: A+B = 7+5 = <strong style="color: #319795;">12</strong><br><br>
<strong style="color: #10b981;">✅ 答案: 最大是12 (当AB=75时)</strong><br><br>
验证: 202575 ÷ 25 = 8103
</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">
100 = 4 × 25<br>
只看末两位!
</div>
<div class="secret-explanation">
因为100既能被4整除,<br>
也能被25整除,<br><br>
所以百位以上统统免检!<br>
只需要判断末两位数字。
</div>
</div>
<div class="secret-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<div class="secret-emoji">4️⃣</div>
<div class="secret-title">4的特征</div>
<div class="secret-rule">
末两位能被4整除
</div>
<div class="secret-explanation">
看末两位数字:<br><br>
能整除的例子:<br>
12, 16, 20, 24, 28...<br><br>
判断方法:<br>
末两位 ÷ 4 看有无余数
</div>
</div>
<div class="secret-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<div class="secret-emoji">2️⃣5️⃣</div>
<div class="secret-title">25的特征</div>
<div class="secret-rule">
末两位必是:<br>
00, 25, 50, 75
</div>
<div class="secret-explanation">
只有这4种可能!<br><br>
记忆技巧:<br>
0 → 25 → 50 → 75 → 100<br>
每次加25<br><br>
看到这4个数就是25的倍数!
</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: 'direct4',
explainTab: 'rule4',
expandedQ: null,
direct4Step: 0,
direct25Step: 0,
// 课内练习
currentQuestion: 0,
score: 0,
answered: false,
isCorrect: false,
selectedOption: null,
practiceCompleted: false,
practiceQuestions: [
{
text: '6524 能被4整除吗？',
options: [
{ text: '能', correct: true },
{ text: '不能', correct: false }
],
explanation: '看末两位24。24÷4=6，能整除。所以6524能被4整除。'
},
{
text: '下列哪个数能被25整除？',
options: [
{ text: '325', correct: true },
{ text: '520', correct: false },
{ text: '715', correct: false },
{ text: '890', correct: false }
],
explanation: '看末两位：A.25(√) B.20(×) C.15(×) D.90(×)。25的倍数末两位只能是00,25,50,75。选A。'
},
{
text: '8750 既能被4整除，也能被25整除吗？',
options: [
{ text: '是', correct: false },
{ text: '否', correct: true }
],
explanation: '末两位50。50÷4=12...2(不能被4整除)，但50是25的倍数。所以只能被25整除，不能被4整除。'
},
{
text: '一个数的末两位是12，它能被4整除吗？',
options: [
{ text: '能', correct: true },
{ text: '不能', correct: false }
],
explanation: '12÷4=3，能整除。所以末两位是12的数都能被4整除。'
},
{
text: '2024能被4整除吗？(判断是否为闰年)',
options: [
{ text: '能', correct: true },
{ text: '不能', correct: false }
],
explanation: '末两位24。24÷4=6，能整除。所以2024年是闰年。'
}
],
// 奥数挑战
currentOlympiad: 0,
olympiadScore: 0,
olympiadAnswered: false,
isOlympiadCorrect: false,
selectedOlympiadOption: null,
wrongAttempts: 0,
olympiadCompleted: false,
olympiadQuestions: [
{
difficulty: 'bronze',
difficultyText: '🥉 青铜',
text: '下列哪个数能被4整除？',
options: [
{ text: '114', correct: false },
{ text: '216', correct: true },
{ text: '318', correct: false }
],
hint1: '只看末两位！',
hint2: '14÷4=3...2, 16÷4=4, 18÷4=4...2',
explanation: '看末两位：14(×), 16(√), 18(×)。只有216的末两位16能被4整除。'
},
{
difficulty: 'bronze',
difficultyText: '🥉 青铜',
text: '202□ 能被4整除，□可以填哪些数字？',
options: [
{ text: '0, 4, 8', correct: true },
{ text: '2, 4, 6', correct: false },
{ text: '1, 5, 9', correct: false }
],
hint1: '只看末两位2□，逐个试验。',
hint2: '20÷4=5, 24÷4=6, 28÷4=7',
explanation: '末两位2□: 20(√), 24(√), 28(√)。所以□可以填0,4,8。'
},
{
difficulty: 'silver',
difficultyText: '🥈 白银',
text: '12345□ 能被25整除，□只能填什么？',
options: [
{ text: '0', correct: true },
{ text: '5', correct: false },
{ text: '0或5', correct: false }
],
hint1: '25的倍数末两位只有00,25,50,75。',
hint2: '前面是5，所以末两位只能是50。',
explanation: '25的倍数末两位只有00,25,50,75。前面是5，所以只能是50，□=0。'
},
{
difficulty: 'silver',
difficultyText: '🥈 白银',
text: '100既能被4整除，也能被25整除吗？',
options: [
{ text: '是', correct: true },
{ text: '否', correct: false }
],
hint1: '这是VIP的来源！',
hint2: '100 = 4 × 25',
explanation: '100 = 4 × 25，所以100既能被4整除，也能被25整除。这就是为什么只看末两位！'
},
{
difficulty: 'silver',
difficultyText: '🥈 白银',
text: '1到100中，能被25整除的数有几个？',
options: [
{ text: '3个', correct: false },
{ text: '4个', correct: true },
{ text: '5个', correct: false }
],
hint1: '列举：25, 50, 75, 100',
hint2: '末两位是00,25,50,75的数',
explanation: '25, 50, 75, 100。共4个。100÷25=4。'
},
{
difficulty: 'gold',
difficultyText: '🥇 黄金',
text: '3□24 能被4整除，□最大填几？',
options: [
{ text: '8', correct: false },
{ text: '9', correct: true },
{ text: '7', correct: false }
],
hint1: '只看末两位！百位不影响。',
hint2: '末两位是24，已经能被4整除。',
explanation: '末两位是24，24÷4=6。百位填什么都不影响！最大填9。'
},
{
difficulty: 'gold',
difficultyText: '🥇 黄金',
text: '六位数 2025AB 能被25整除，A+B最大是多少？',
options: [
{ text: '12', correct: true },
{ text: '7', correct: false },
{ text: '5', correct: false }
],
hint1: '末两位AB可能是：00,25,50,75',
hint2: '哪个的A+B最大？',
explanation: '末两位可能：00(0+0=0), 25(2+5=7), 50(5+0=5), 75(7+5=12)。最大是12。'
},
{
difficulty: 'gold',
difficultyText: '🥇 黄金',
text: '1到100中，能被4整除的数有几个？',
options: [
{ text: '24个', correct: false },
{ text: '25个', correct: true },
{ text: '26个', correct: false }
],
hint1: '用100÷4计算',
hint2: '100÷4=25',
explanation: '100÷4=25。正好25个：4,8,12,...,96,100。'
}
]
};
},
mounted() {
console.log('4和25的整除特征完整版已加载!');
},
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 === 'direct4') {
this.speakDirect4Step();
} else {
this.speakDirect25Step();
}
}, 300);
}
},
switchDemoTab(tab) {
this.demoTab = tab;
if (tab === 'direct4') {
this.direct4Step = 0;
this.$nextTick(() => {
this.initDirect4Animation();
this.speakDirect4Step();
});
} else {
this.direct25Step = 0;
this.$nextTick(() => {
this.initDirect25Animation();
this.speakDirect25Step();
});
}
},
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('想象一个神奇的数字100！100有个超能力：100等于4乘以25。这意味着100既能被4整除，也能被25整除！因为每100个就是一组VIP，所以百位及以上自动通过，只需要检查最后两位数字就够了！');
},
// ========== 4的整除动画 ==========
initDirect4Animation() {
if (typeof gsap === 'undefined') return;
gsap.set("#direct4-number-group", {opacity: 1});
gsap.set("#direct4-split-group", {opacity: 0});
gsap.set("#direct4-hundred-group", {opacity: 0});
gsap.set("#direct4-last-group", {opacity: 0});
},
nextDirect4Step() {
if (this.direct4Step < 3) {
this.direct4Step++;
this.$nextTick(() => {
this.runDirect4Animation();
this.speakDirect4Step();
});
}
},
prevDirect4Step() {
if (this.direct4Step > 0) {
this.direct4Step--;
this.$nextTick(() => {
this.runDirect4Animation();
this.speakDirect4Step();
});
}
},
speakDirect4Step() {
const texts = [
'让我们来判断6524这个数能不能被4整除',
'第一步，把数字拆成整百部分和末两位。6524等于6500加24',
'关键来了！因为100等于4乘以25，所以整百部分6500一定能被4整除',
'只要末两位24也能被4整除，整个数就能被4整除！24除以4等于6，所以6524能被4整除'
];
this.speak(texts[this.direct4Step]);
},
runDirect4Animation() {
if (typeof gsap === 'undefined') return;
const tl = gsap.timeline();
if (this.direct4Step === 0) {
tl.to("#direct4-number-group", {opacity: 1, duration: 0.3})
.to("#direct4-split-group", {opacity: 0, duration: 0.2}, "<")
.to("#direct4-hundred-group", {opacity: 0, duration: 0.2}, "<")
.to("#direct4-last-group", {opacity: 0, duration: 0.2}, "<");
}
if (this.direct4Step === 1) {
tl.to("#direct4-number-group", {opacity: 0, y: -20, duration: 0.4})
.to("#direct4-split-group", {opacity: 1, duration: 0.5})
.from("#direct4-split-group rect", {
scale: 0,
y: 50,
stagger: 0.2,
ease: "back.out(1.5)",
duration: 0.7
}, "<0.2");
}
if (this.direct4Step === 2) {
tl.to("#direct4-hundred-group", {opacity: 1, duration: 0.5})
.from("#direct4-hundred-group rect", {
scale: 0,
ease: "back.out(1.7)",
duration: 0.6
}, "<0.2");
}
if (this.direct4Step === 3) {
tl.to("#direct4-last-group", {opacity: 1, duration: 0.5})
.from("#direct4-last-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: ['#319795', '#2C7A7B', '#285E61']
});
}, 500);
}
}
},
// ========== 25的整除动画 ==========
initDirect25Animation() {
if (typeof gsap === 'undefined') return;
gsap.set("#direct25-number-group", {opacity: 1});
gsap.set("#direct25-split-group", {opacity: 0});
gsap.set("#direct25-hundred-group", {opacity: 0});
gsap.set("#direct25-last-group", {opacity: 0});
gsap.set("#direct25-magic-group", {opacity: 0});
},
nextDirect25Step() {
if (this.direct25Step < 3) {
this.direct25Step++;
this.$nextTick(() => {
this.runDirect25Animation();
this.speakDirect25Step();
});
}
},
prevDirect25Step() {
if (this.direct25Step > 0) {
this.direct25Step--;
this.$nextTick(() => {
this.runDirect25Animation();
this.speakDirect25Step();
});
}
},
speakDirect25Step() {
const texts = [
'让我们来判断6525这个数能不能被25整除',
'第一步，把数字拆成整百部分和末两位。6525等于6500加25',
'关键来了！因为100等于25乘以4，所以整百部分6500一定能被25整除',
'末两位是25，25的倍数末两位只有00、25、50、75这四种！25正好在列表中，所以6525能被25整除'
];
this.speak(texts[this.direct25Step]);
},
runDirect25Animation() {
if (typeof gsap === 'undefined') return;
const tl = gsap.timeline();
if (this.direct25Step === 0) {
tl.to("#direct25-number-group", {opacity: 1, duration: 0.3})
.to("#direct25-split-group", {opacity: 0, duration: 0.2}, "<")
.to("#direct25-hundred-group", {opacity: 0, duration: 0.2}, "<")
.to("#direct25-last-group", {opacity: 0, duration: 0.2}, "<")
.to("#direct25-magic-group", {opacity: 0, duration: 0.2}, "<");
}
if (this.direct25Step === 1) {
tl.to("#direct25-number-group", {opacity: 0, y: -20, duration: 0.4})
.to("#direct25-split-group", {opacity: 1, duration: 0.5})
.from("#direct25-split-group rect", {
scale: 0,
y: 50,
stagger: 0.2,
ease: "back.out(1.5)",
duration: 0.7
}, "<0.2");
}
if (this.direct25Step === 2) {
tl.to("#direct25-hundred-group", {opacity: 1, duration: 0.5})
.from("#direct25-hundred-group rect", {
scale: 0,
ease: "back.out(1.7)",
duration: 0.6
}, "<0.2");
}
if (this.direct25Step === 3) {
tl.to("#direct25-last-group", {opacity: 1, duration: 0.5})
.from("#direct25-last-group rect", {
scale: 0,
x: -30,
stagger: 0.15,
ease: "back.out(1.5)",
duration: 0.6
}, "<0.2")
.to("#direct25-magic-group", {opacity: 1, scale: 1, ease: "back.out(2)", duration: 0.5}, "-=0.3");
if (typeof confetti !== 'undefined') {
setTimeout(() => {
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 },
colors: ['#319795', '#2C7A7B', '#285E61']
});
}, 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: ['#319795', '#2C7A7B', '#285E61']
});
}
} 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: ['#319795', '#2C7A7B', '#285E61']
});
}
} 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 生成。
登录后可复制完整代码