怎么实现类似粉笔题库的底部答题卡，举个代码实例

可以使用 HTML、CSS 和 JavaScript 实现类似粉笔题库的底部答题卡。

Code Example:

HTML:

<div class="answer-sheet">
  <div class="answer-sheet-header">
    <span>Answer Sheet</span>
  </div>
  <div class="answer-sheet-body">
    <ul class="answer-list">
      <li class="unanswered">Question 1</li>
      <li class="unanswered">Question 2</li>
      <li class="answered">Question 3</li>
      <li class="skipped">Question 4</li>
    </ul>
    <div class="answer-sheet-footer">
      <button class="submit-btn">Submit</button>
    </div>
  </div>
</div>

CSS:

.answer-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #fff;
  border-top: 1px solid #ccc;
  box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.1);
}

.answer-sheet-header {
  height: 30px;
  padding: 5px 10px;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  font-weight: bold;
}

.answer-sheet-body {
  height: 60px;
  padding: 5px;
  display: flex;
  flex-direction: row;
}

.answer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.answer-list li {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
}

.answer-list li.unanswered {
  background-color: #fff;
}

.answer-list li.answered {
  background-color: #5cb85c;
  color: #fff;
}

.answer-list li.skipped {
  background-color: #ff6666;
  color: #fff;
}

.answer-sheet-footer {
  margin-top: 5px;
  text-align: right;
}

.submit-btn {
  border: none;
  background-color: #5cb85c;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #4cae4c;
}

JavaScript:

const answerList = document.querySelectorAll('.answer-list li');
const submitBtn = document.querySelector('.submit-btn');

answerList.forEach((answer) => {
  answer.addEventListener('click', () => {
    answerList.forEach((answer) => {
      answer.classList.remove('selected');
    });
    answer.classList.add('selected');
  });
});

submitBtn.addEventListener('click', () => {
  const answeredQuestions = document.querySelectorAll('.answered').length;
  console.log(`You have answered ${answeredQuestions} questions.`);
});

解释：

以上 HTML 代码用于创建答题卡，CSS 代码用于样式设计，JavaScript 代码用于交互与动态效果。通过遍历答题卡中每个选项的 DOM 元素，为其添加 click 事件监听器，点击后，清除所有选项的 selected 类名，再为被点击的选项添加 selected 类名，用于表示当前选中状态。同时，为提交按钮添加 click 事件监听器，统计已经回答的问题数量，使用 console.log() 方法输出结果。