酷代码 AI
菜单
全部AI  /  AI写代码神器
服务商

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vocabulary Flashcards</title> <style> body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh;

这是一个设计精美的词汇闪卡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. 更新卡片内容时自动检查并重置翻转状态 [2025-03-29 21:31:19 | AI写代码神器 | 719点数解答]

热门AI查看更多
“AI写代码神器”擅长各种语言编程、解释代码、注解补充。 在这里填写你的问题。如:写出java冒泡排序算法。
一个入口掌握所有。 在这输入任何问题,或者要AI输出的内容。
将阿拉伯数字转为人明币大写,如:数字1000转换为壹仟。
AI生成爆文标题,能够快速创作出极具吸引力的标题,促使短视频、自媒体文章的点击率与阅读量迅猛攀升。 此处填写一个原始标题,如:一般人怎样打理自身的社交圈?
AI生成新闻评论。 在这里填入新闻内容。
AI生成内容摘要。 在此处填入需要生成摘要的内容,还可以输入4000字。
AI生成主持词,擅长团建、年会、婚礼、节日等场合的主持词编写。 在这里填入主持场景,如:运动会
AI快速生成周报、月报、日报、年终总结等各类总结报告。 在这里简单输入工作目标、指标、成果,没有任何格式或特殊需求。如:计划年销售业绩1000万,实际完成800万。
输入一个字,显示以这个字开头的歇后语
输入一个字,显示以这个字开头的成语
极速在线生成证件照
极速更换证件照红、蓝、白底色
实用工具查看更多
数独游戏 [娱乐类]
数独(Sudoku)是经典的9x9数字逻辑谜题。在有81个小格的九宫格内,玩家依据初始数字推理填入1 - 9的数字,要保证每行、每列以及每个3x3宫格中的数字都不重复。这款在线数独游戏有多难度可选,没有头绪时,可以点开答案看一下哦^_^
3D魔方 [娱乐类]
基于three.js的小游戏,锻炼玩家的眼力和反应力,非常不错
经典推箱子 [娱乐类]
基于H5的经典推箱子小游戏,锻炼玩家的眼力和反应力,非常不错
摸鱼五子棋 [娱乐类]
基于H5的五子棋人机对练,锻炼玩家的眼力和反应力,非常不错
速度打字机 [娱乐类]
打字速度挑战游戏可以训练玩家的打字速度与准确率。玩家要在给定时间内输入尽量多的单词或句子,从而在规定时间里争取获得最高分。
键盘打字 [娱乐类]
基于H5的键盘打字小游戏,锻炼玩家的眼力和反应力,非常不错
扫雷 [娱乐类]
基于H5的小游戏,锻炼玩家的眼力和反应力,非常不错
2048 [娱乐类]
H5版2048小游戏,锻炼玩家的前瞻力,非常不错
36万 进入2048
相关提问