当前位置：首页 > JavaScript

js实现选择题

2026-04-04 03:56:02JavaScript

JavaScript 实现选择题功能

数据结构设计

使用数组存储题目信息，每个题目对象包含题干、选项和正确答案：

const questions = [
  {
    question: "JavaScript 是什么类型的语言？",
    options: ["编译型", "解释型", "混合型", "机器码"],
    answer: 1
  },
  {
    question: "以下哪个不是 JavaScript 的基本数据类型？",
    options: ["String", "Boolean", "Object", "Number"],
    answer: 2
  }
];

HTML 结构

创建基本的答题界面结构：

js实现选择题

<div id="quiz-container">
  <h2 id="question"></h2>
  <ul id="options"></ul>
  <button id="submit">提交答案</button>
  <p id="result"></p>
</div>

渲染题目

动态加载题目和选项到页面：

let currentQuestion = 0;
let score = 0;

function loadQuestion() {
  const questionElement = document.getElementById('question');
  const optionsElement = document.getElementById('options');

  questionElement.textContent = questions[currentQuestion].question;
  optionsElement.innerHTML = '';

  questions[currentQuestion].options.forEach((option, index) => {
    const li = document.createElement('li');
    li.innerHTML = `<input type="radio" name="option" value="${index}"> ${option}`;
    optionsElement.appendChild(li);
  });
}

答案验证

处理用户提交并验证答案：

js实现选择题

document.getElementById('submit').addEventListener('click', () => {
  const selectedOption = document.querySelector('input[name="option"]:checked');
  const resultElement = document.getElementById('result');

  if (!selectedOption) {
    resultElement.textContent = '请选择一个选项';
    return;
  }

  const answer = parseInt(selectedOption.value);
  if (answer === questions[currentQuestion].answer) {
    score++;
    resultElement.textContent = '回答正确！';
  } else {
    resultElement.textContent = '回答错误！';
  }

  setTimeout(() => {
    currentQuestion++;
    if (currentQuestion < questions.length) {
      loadQuestion();
    } else {
      showResult();
    }
  }, 1000);
});

结果显示

显示最终得分：

function showResult() {
  const quizContainer = document.getElementById('quiz-container');
  quizContainer.innerHTML = `
    <h2>测试完成</h2>
    <p>你的得分是: ${score}/${questions.length}</p>
    <button onclick="location.reload()">重新测试</button>
  `;
}

// 初始化加载第一题
loadQuestion();

样式优化

添加基础CSS样式增强用户体验：

#quiz-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

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

#options li {
  margin: 10px 0;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 5px;
}

#submit {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

#result {
  margin-top: 20px;
  font-weight: bold;
}