update: 2026-03-28 20:59
This commit is contained in:
261
InfoGenie-frontend/public/toolbox/学习工具/计算机英语词汇学习/app.js
Normal file
261
InfoGenie-frontend/public/toolbox/学习工具/计算机英语词汇学习/app.js
Normal file
@@ -0,0 +1,261 @@
|
||||
// 计算机英语词汇学习应用
|
||||
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('无法恢复学习进度');
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user