// 计算机英语词汇学习应用 class VocabularyApp { constructor() { this.vocabulary = vocabularyData; this.currentIndex = 0; this.learningMode = 'sequential'; // sequential, random, reverse this.randomIndices = []; this.history = []; this.initializeElements(); this.initializeEventListeners(); this.initializeApp(); } initializeElements() { // 获取DOM元素 this.elements = { wordNumber: document.getElementById('wordNumber'), englishWord: document.getElementById('englishWord'), phonetic: document.getElementById('phonetic'), wordType: document.getElementById('wordType'), chineseMeaning: document.getElementById('chineseMeaning'), currentIndex: document.getElementById('currentIndex'), totalWords: document.getElementById('totalWords'), prevBtn: document.getElementById('prevBtn'), nextBtn: document.getElementById('nextBtn'), sequentialMode: document.getElementById('sequentialMode'), randomMode: document.getElementById('randomMode'), reverseMode: document.getElementById('reverseMode') }; } initializeEventListeners() { // 模式切换按钮 this.elements.sequentialMode.addEventListener('click', () => this.setLearningMode('sequential')); this.elements.randomMode.addEventListener('click', () => this.setLearningMode('random')); this.elements.reverseMode.addEventListener('click', () => this.setLearningMode('reverse')); // 绑定按钮事件 this.elements.prevBtn.addEventListener('click', () => this.previousWord()); this.elements.nextBtn.addEventListener('click', () => this.nextWord()); // 键盘快捷键 document.addEventListener('keydown', (e) => this.handleKeyPress(e)); } initializeApp() { // 设置总词汇数 this.elements.totalWords.textContent = this.vocabulary.length; // 生成随机索引数组 this.generateRandomIndices(); // 显示第一个词汇 this.displayCurrentWord(); // 更新按钮状态 this.updateButtonStates(); } generateRandomIndices() { // 生成随机索引数组 this.randomIndices = Array.from({length: this.vocabulary.length}, (_, i) => i); // Fisher-Yates 洗牌算法 for (let i = this.randomIndices.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [this.randomIndices[i], this.randomIndices[j]] = [this.randomIndices[j], this.randomIndices[i]]; } } setLearningMode(mode) { this.learningMode = mode; // 更新按钮样式 document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active')); this.elements[mode + 'Mode'].classList.add('active'); // 重置当前索引 this.currentIndex = 0; this.history = []; // 如果是随机模式,重新生成随机索引 if (mode === 'random') { this.generateRandomIndices(); } // 显示当前词汇 this.displayCurrentWord(); this.updateButtonStates(); } getCurrentWordIndex() { switch (this.learningMode) { case 'sequential': return this.currentIndex; case 'random': return this.randomIndices[this.currentIndex]; case 'reverse': return this.vocabulary.length - 1 - this.currentIndex; default: return this.currentIndex; } } displayCurrentWord() { const wordIndex = this.getCurrentWordIndex(); const word = this.vocabulary[wordIndex]; if (word) { this.elements.wordNumber.textContent = word.id; this.elements.englishWord.textContent = word.word; this.elements.phonetic.textContent = word.phonetic; this.elements.wordType.textContent = word.type; this.elements.chineseMeaning.textContent = word.meaning; this.elements.currentIndex.textContent = this.currentIndex + 1; // 添加动画效果 this.addDisplayAnimation(); } } addDisplayAnimation() { const card = document.querySelector('.vocabulary-card'); card.style.transform = 'scale(0.95)'; card.style.opacity = '0.7'; setTimeout(() => { card.style.transform = 'scale(1)'; card.style.opacity = '1'; }, 100); } nextWord() { // 记录当前位置到历史 this.history.push(this.currentIndex); // 移动到下一个词汇 if (this.currentIndex < this.vocabulary.length - 1) { this.currentIndex++; } else { // 到达末尾,根据模式处理 if (this.learningMode === 'random') { // 随机模式:重新洗牌 this.generateRandomIndices(); this.currentIndex = 0; } else { // 顺序或逆序模式:回到开头 this.currentIndex = 0; } } this.displayCurrentWord(); this.updateButtonStates(); } previousWord() { if (this.history.length > 0) { // 从历史记录中恢复 this.currentIndex = this.history.pop(); } else if (this.currentIndex > 0) { // 简单向前移动 this.currentIndex--; } else { // 在开头时,跳到末尾 this.currentIndex = this.vocabulary.length - 1; } this.displayCurrentWord(); this.updateButtonStates(); } updateButtonStates() { // 更新上一个按钮状态 const canGoPrevious = this.history.length > 0 || this.currentIndex > 0; this.elements.prevBtn.disabled = !canGoPrevious; // 更新下一个按钮状态(总是可用) this.elements.nextBtn.disabled = false; } handleKeyPress(e) { switch (e.key) { case 'ArrowLeft': e.preventDefault(); this.previousWord(); break; case 'ArrowRight': case ' ': // 空格键 e.preventDefault(); this.nextWord(); break; case '1': this.setLearningMode('sequential'); break; case '2': this.setLearningMode('random'); break; case '3': this.setLearningMode('reverse'); break; } } // 获取学习统计信息 getStats() { return { totalWords: this.vocabulary.length, currentPosition: this.currentIndex + 1, learningMode: this.learningMode, historyLength: this.history.length }; } } // 页面加载完成后初始化应用 document.addEventListener('DOMContentLoaded', () => { window.vocabularyApp = new VocabularyApp(); // 添加一些用户提示 console.log('计算机英语词汇学习应用已启动!'); console.log('快捷键提示:'); console.log('← 上一个词汇'); console.log('→ 或 空格 下一个词汇'); console.log('1 顺序模式'); console.log('2 随机模式'); console.log('3 逆序模式'); }); // 防止页面刷新时丢失进度(可选功能) window.addEventListener('beforeunload', () => { if (window.vocabularyApp) { const stats = window.vocabularyApp.getStats(); localStorage.setItem('vocabularyProgress', JSON.stringify({ currentIndex: window.vocabularyApp.currentIndex, learningMode: window.vocabularyApp.learningMode, timestamp: Date.now() })); } }); // 页面加载时恢复进度(可选功能) window.addEventListener('load', () => { const savedProgress = localStorage.getItem('vocabularyProgress'); if (savedProgress && window.vocabularyApp) { try { const progress = JSON.parse(savedProgress); // 只在24小时内的进度才恢复 if (Date.now() - progress.timestamp < 24 * 60 * 60 * 1000) { window.vocabularyApp.setLearningMode(progress.learningMode); window.vocabularyApp.currentIndex = progress.currentIndex; window.vocabularyApp.displayCurrentWord(); window.vocabularyApp.updateButtonStates(); } } catch (e) { console.log('无法恢复学习进度'); } } });