纯原生JavaScript（Vanilla JavaScript）迷你测验应用开发技术咨询
2026-3-31
纯原生JavaScript（Vanilla JavaScript）迷你测验应用开发技术咨询
嘿，我来手把手教你搭一个纯原生JS的迷你测验应用，完全不需要任何框架，功能全满足：显示题目+选项、判断对错算分、下一题切换，最后出总分。咱们一步步来，保证你能看懂～
第一步：先搭HTML结构
首先咱们把页面的基本架子写好，需要放题目、选项、分数显示和下一题按钮的地方，结构超简单：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>迷你JS测验</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="quiz-container"> <h1>迷你知识测验</h1> <!-- 分数显示 --> <div class="score">当前得分: <span id="score">0</span></div> <!-- 题目区域 --> <div class="question" id="question"></div> <!-- 选项容器 --> <div class="options-container" id="options-container"></div> <!-- 下一题按钮 --> <button id="next-btn">下一题</button> </div> <script src="app.js"></script> </body> </html>
每个部分的作用一目了然：quiz-container包起所有元素让布局更规整；score实时展示当前得分；question放当前题目；options-container动态生成选项按钮；next-btn负责切换题目。
第二步：加一点基础CSS美化
咱们给它整个舒服点的样式，不用太复杂，重点是让选项看起来像可点击的按钮，交互状态清晰：
* { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, sans-serif; } .quiz-container { max-width: 800px; margin: 2rem auto; padding: 2rem; background-color: #f5f5f5; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .score { font-size: 1.2rem; font-weight: bold; margin-bottom: 1.5rem; color: #2c3e50; } .question { font-size: 1.5rem; margin-bottom: 1.5rem; color: #34495e; } .options-container { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; } .option-btn { padding: 1rem; border: none; border-radius: 5px; background-color: #3498db; color: white; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; } .option-btn:hover { background-color: #2980b9; } .option-btn.correct { background-color: #2ecc71; } .option-btn.incorrect { background-color: #e74c3c; } .option-btn:disabled { cursor: not-allowed; opacity: 0.8; } #next-btn { padding: 1rem 2rem; border: none; border-radius: 5px; background-color: #9b59b6; color: white; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; } #next-btn:hover { background-color: #8e44ad; } #next-btn:disabled { cursor: not-allowed; opacity: 0.6; }
重点提几个关键样式：
correct/incorrect类会在JS里用来标记对错选项的颜色- 禁用状态的按钮变灰，防止重复点击
- 容器加了阴影和圆角，避免页面太生硬
第三步：核心JS逻辑实现
这部分是灵魂，咱们分模块写，逻辑清晰，你可以直接复制，也可以自己改题目数据。
在app.js里写代码，咱们一步步解释：
1. 定义测验的题目数据
你可以随便改这些题目，格式就是数组里放对象，每个对象包含题目、选项数组、正确答案：
// 定义题目数据，你可以根据需求随便修改/添加 const quizQuestions = [ { question: "JavaScript中，以下哪个是原始数据类型？", options: ["Object", "Array", "String", "Function"], correct: "String" }, { question: "以下哪个方法可以向数组末尾添加元素？", options: ["shift()", "unshift()", "push()", "pop()"], correct: "push()" }, { question: "在HTML中，哪个标签用来引入外部JavaScript文件？", options: ["<script>", "<link>", "<style>", "<meta>"], correct: "<script>" }, { question: "以下哪个操作符用于严格相等比较？", options: ["==", "===", "!=", "!=="], correct: "===" } ];
2. 获取DOM元素并初始化变量
先把页面上的元素拿到，再定义当前题目索引、当前分数，还有标记是否已答题的变量：
// 获取DOM元素 const questionElement = document.getElementById('question'); const optionsContainer = document.getElementById('options-container'); const scoreElement = document.getElementById('score'); const nextBtn = document.getElementById('next-btn'); // 初始化核心变量 let currentQuestionIndex = 0; let score = 0; let answered = false; // 标记当前题目是否已经作答，防止重复点击
3. 渲染题目的函数
这个函数负责把当前题目和选项渲染到页面上，每次切换题目都要调用它：
// 渲染当前题目和选项 function renderQuestion() { // 重置答题状态 answered = false; nextBtn.disabled = true; optionsContainer.innerHTML = ''; // 清空之前的选项 // 获取当前题目数据 const currentQuestion = quizQuestions[currentQuestionIndex]; // 渲染题目文本 questionElement.textContent = currentQuestion.question; // 循环生成选项按钮 currentQuestion.options.forEach(option => { const optionBtn = document.createElement('button'); optionBtn.classList.add('option-btn'); optionBtn.textContent = option; // 给每个选项绑定点击事件 optionBtn.addEventListener('click', () => handleOptionClick(optionBtn, option)); optionsContainer.appendChild(optionBtn); }); // 更新分数显示 scoreElement.textContent = score; }
4. 处理选项点击的函数
点击选项后，判断对错、更新分数、标记选项样式，并且启用下一题按钮：
// 处理选项点击事件 function handleOptionClick(optionBtn, selectedOption) { if (answered) return; // 如果已经答过题，直接返回，防止重复点击 answered = true; nextBtn.disabled = false; const currentQuestion = quizQuestions[currentQuestionIndex]; // 判断选项是否正确 if (selectedOption === currentQuestion.correct) { score++; optionBtn.classList.add('correct'); } else { optionBtn.classList.add('incorrect'); // 顺便把正确选项标出来，让用户知道错在哪 const correctOptionBtn = Array.from(optionsContainer.children).find(btn => btn.textContent === currentQuestion.correct); if (correctOptionBtn) correctOptionBtn.classList.add('correct'); } // 禁用所有选项，避免误操作 Array.from(optionsContainer.children).forEach(btn => btn.disabled = true); // 更新分数显示 scoreElement.textContent = score; }
这里做了几个细节优化：
- 用
answered变量防止重复点击同一题的选项 - 答错时自动标记正确选项，提升用户体验
- 点击后禁用所有选项，避免多次操作
5. 处理下一题按钮的点击
切换到下一题，或者最后一题显示最终结果：
// 处理下一题按钮点击 function handleNextClick() { currentQuestionIndex++; // 判断是否还有题目 if (currentQuestionIndex < quizQuestions.length) { renderQuestion(); // 如果是最后一题，把按钮文本改成"查看结果" if (currentQuestionIndex === quizQuestions.length - 1) { nextBtn.textContent = "查看结果"; } } else { // 显示最终测验结果 showFinalResult(); } } // 显示最终结果 function showFinalResult() { questionElement.textContent = `测验结束！你的总分是 ${score}/${quizQuestions.length}`; optionsContainer.innerHTML = ''; nextBtn.style.display = 'none'; // 隐藏下一题按钮 // 可选：添加重新开始按钮 const restartBtn = document.createElement('button'); restartBtn.textContent = "重新开始"; restartBtn.classList.add('option-btn'); restartBtn.addEventListener('click', () => restartQuiz()); optionsContainer.appendChild(restartBtn); } // 重新开始测验（可选功能） function restartQuiz() { currentQuestionIndex = 0; score = 0; nextBtn.textContent = "下一题"; nextBtn.style.display = 'block'; renderQuestion(); }
6. 初始化测验
最后，页面加载完成后调用渲染函数，并且给下一题按钮绑定事件：
// 页面加载完成后初始化测验 document.addEventListener('DOMContentLoaded', () => { renderQuestion(); nextBtn.addEventListener('click', handleNextClick); });
最后：运行测试
把这三个文件（HTML、CSS、JS）放在同一个文件夹里，打开HTML文件就能用了！你可以随便修改题目数据，加更多题目，或者调整样式，完全自定义。
注意事项
- 题目数据里的
correct值必须和options里的某一个完全一致，不然会判断错误 - 如果要加更多功能（比如计时、题目分类），都可以在这个基础上扩展
- 纯原生JS写的，所有现代浏览器都支持，不需要任何依赖
怎么样，是不是超简单？有问题随时问我～ 😊
