超实用！用 HTML 和 JavaScript 打造可翻转、可切换的词汇闪卡学习神器

这是一个设计精美的词汇闪卡HTML页面，我来补充JavaScript功能实现闪卡翻转和词汇切换： ```javascript // 词汇数据数组 const vocabulary = [ { word: "boy", meaning: "男孩", example: "The boy is playing football in the park." }, { word: "girl", meaning: "女孩", example: "The girl is reading a book under the tree." }, { word: "apple", meaning: "苹果", example: "She eats an apple every morning." }, { word: "computer", meaning: "电脑", example: "I use my computer to study programming." } ]; let currentIndex = 0; const flashcard = document.getElementById('flashcard'); const wordElement = document.getElementById('word'); const wordBackElement = document.getElementById('word-back'); const meaningElement = document.getElementById('meaning'); const exampleElement = document.getElementById('example'); // 翻转卡片函数 function flipCard() { flashcard.classList.toggle('flipped'); } // 更新卡片内容 function updateCard() { const currentWord = vocabulary[currentIndex]; wordElement.textContent = currentWord.word; wordBackElement.textContent = currentWord.word; meaningElement.textContent = currentWord.meaning; exampleElement.textContent = currentWord.example; // 如果不是翻转状态就翻转回来 if (flashcard.classList.contains('flipped')) { setTimeout(() => { flashcard.classList.remove('flipped'); }, 300); } } // 下一张卡片 function nextCard() { currentIndex = (currentIndex + 1) % vocabulary.length; updateCard(); } // 上一张卡片 function prevCard() { currentIndex = (currentIndex - 1 + vocabulary.length) % vocabulary.length; updateCard(); } // 初始化显示第一张卡片 updateCard(); // 添加控制按钮到HTML中 document.body.innerHTML += ` <div class="controls"> <button onclick="prevCard()">Previous</button> <button onclick="nextCard()">Next</button> </div> <div class="progress"> Card ${currentIndex + 1} of ${vocabulary.length} </div> `; // 更新进度显示的函数 function updateProgress() { const progressElement = document.querySelector('.progress'); if (progressElement) { progressElement.textContent = `Card ${currentIndex + 1} of ${vocabulary.length}`; } } // 修改nextCard和prevCard函数以更新进度 function nextCard() { currentIndex = (currentIndex + 1) % vocabulary.length; updateCard(); updateProgress(); } function prevCard() { currentIndex = (currentIndex - 1 + vocabulary.length) % vocabulary.length; updateCard(); updateProgress(); } ``` 代码逻辑说明： 1. 使用vocabulary数组存储所有词汇数据 2. currentIndex跟踪当前显示的词汇索引 3. flipCard()通过切换CSS类实现3D翻转效果 4. updateCard()更新卡片正反面内容 5. nextCard()和prevCard()实现前后导航功能 6. updateProgress()显示当前学习进度 额外注意事项： 1. 翻转动画使用CSS transition实现，确保性能流畅 2. 数组索引使用取模运算实现循环浏览 3. 更新卡片内容时自动检查并重置翻转状态 ######[AI写代码神器 | 719点数解答 | 2025-03-29 21:31:19]