写一个背单词前端代码
时间: 2024-02-05 21:14:05 浏览: 26
好的,以下是一个简单的背单词前端代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背单词</title>
</head>
<body>
<h1>背单词</h1>
<div>
<p id="word"></p>
<p id="definition"></p>
</div>
<button onclick="showNextWord()">下一个单词</button>
<script>
const words = [
{word: 'apple', definition: '苹果'},
{word: 'banana', definition: '香蕉'},
{word: 'orange', definition: '橙子'},
{word: 'watermelon', definition: '西瓜'},
{word: 'grape', definition: '葡萄'}
];
let currentWordIndex = -1;
const wordElement = document.getElementById('word');
const definitionElement = document.getElementById('definition');
function showNextWord() {
currentWordIndex++;
if (currentWordIndex >= words.length) {
currentWordIndex = 0;
}
const currentWord = words[currentWordIndex];
wordElement.textContent = currentWord.word;
definitionElement.textContent = currentWord.definition;
}
showNextWord();
</script>
</body>
</html>
```
该代码利用了 HTML、CSS 和 JavaScript 技术,可以在浏览器中运行。它包括一个“背单词”标题、一个显示单词和释义的 div 元素、一个“下一个单词”按钮和一些 JavaScript 代码。单词和释义存储在一个数组中,每次点击按钮时会显示下一个单词。