写一个背单词有单词选项的前端代码

好的，以下是一个简单的背单词有单词选项的前端代码：

HTML部分：

<div id="word-container">
  <h2 id="word">Word</h2>
  <ul id="options">
    <li class="option">Option 1</li>
    <li class="option">Option 2</li>
    <li class="option">Option 3</li>
    <li class="option">Option 4</li>
  </ul>
  <button id="next-btn">Next</button>
</div>

CSS部分：

#word-container {
  width: 400px;
  margin: 50px auto;
  text-align: center;
}

#word {
  font-size: 36px;
  margin-bottom: 20px;
}

#options {
  list-style: none;
  margin: 0;
  padding: 0;
}

.option {
  display: inline-block;
  margin: 10px;
  padding: 10px 20px;
  border: 2px solid #ccc;
  cursor: pointer;
}

.option:hover {
  background-color: #ccc;
}

#next-btn {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 24px;
  border: none;
  border-radius: 5px;
  background-color: #0066cc;
  color: #fff;
  cursor: pointer;
}

#next-btn:hover {
  background-color: #0052a3;
}

JavaScript部分：

// 单词列表
const words = [
  { word: 'apple', options: ['苹果', '香蕉', '橙子', '梨子'] },
  { word: 'banana', options: ['香蕉', '苹果', '橙子', '梨子'] },
  { word: 'orange', options: ['橙子', '苹果', '香蕉', '梨子'] },
  { word: 'pear', options: ['梨子', '苹果', '香蕉', '橙子'] }
];

// 随机获取一个单词
function getRandomWord() {
  return words[Math.floor(Math.random() * words.length)];
}

// 显示单词及选项
function displayWord(word) {
  const wordEl = document.querySelector('#word');
  const optionsEl = document.querySelector('#options');
  
  wordEl.textContent = word.word;
  
  // 清空选项再添加新选项
  optionsEl.innerHTML = '';
  word.options.forEach(option => {
    const li = document.createElement('li');
    li.textContent = option;
    li.classList.add('option');
    optionsEl.appendChild(li);
  });
}

// 点击下一个按钮获取下一个单词
document.querySelector('#next-btn').addEventListener('click', () => {
  const word = getRandomWord();
  displayWord(word);
});

// 初始化页面显示第一个单词
const firstWord = getRandomWord();
displayWord(firstWord);

以上代码仅供参考，可以根据实际需求进行修改和优化。