用前端知识制作一个考试界面作答区域有五个单选题倒计时区域显示考试剩余时间总时间为两个小时答题卡区域用户在答题区域作答后答题卡对应题目的右侧的第一个小方框变绿显示已做标记题目的功能在每个题目的右下角有个标记标签用户选中后答题卡区域对应题目的右侧第二个小方框变红提交试卷的功能请给我html css js 代码
<p>HTML代码：</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>考试界面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h1>考试界面</h1>
<div class="timer">
<p>剩余时间：</p>
<span id="countdown"></span>
</div>
</div>
<div class="container">
<div class="question">
<p>1. 单选题1</p>
<label><input type="radio" name="q1">选项A</label>
<label><input type="radio" name="q1">选项B</label>
<label><input type="radio" name="q1">选项C</label>
<label><input type="radio" name="q1">选项D</label>
<div class="mark">
<input type="checkbox">标记
</div>
</div>
<div class="question">
<p>2. 单选题2</p>
<label><input type="radio" name="q2">选项A</label>
<label><input type="radio" name="q2">选项B</label>
<label><input type="radio" name="q2">选项C</label>
<label><input type="radio" name="q2">选项D</label>
<div class="mark">
<input type="checkbox">标记
</div>
</div>
<div class="question">
<p>3. 单选题3</p>
<label><input type="radio" name="q3">选项A</label>
<label><input type="radio" name="q3">选项B</label>
<label><input type="radio" name="q3">选项C</label>
<label><input type="radio" name="q3">选项D</label>
<div class="mark">
<input type="checkbox">标记
</div>
</div>
<div class="question">
<p>4. 单选题4</p>
<label><input type="radio" name="q4">选项A</label>
<label><input type="radio" name="q4">选项B</label>
<label><input type="radio" name="q4">选项C</label>
<label><input type="radio" name="q4">选项D</label>
<div class="mark">
<input type="checkbox">标记
</div>
</div>
<div class="question">
<p>5. 单选题5</p>
<label><input type="radio" name="q5">选项A</label>
<label><input type="radio" name="q5">选项B</label>
<label><input type="radio" name="q5">选项C</label>
<label><input type="radio" name="q5">选项D</label>
<div class="mark">
<input type="checkbox">标记
</div>
</div>
</div>
<div class="sidebar">
<div class="card">
<h2>答题卡</h2>
<div class="card-item">
<span>1</span>
<div class="status">
<div class="done"></div>
<div class="marked"></div>
</div>
</div>
<div class="card-item">
<span>2</span>
<div class="status">
<div class="done"></div>
<div class="marked"></div>
</div>
</div>
<div class="card-item">
<span>3</span>
<div class="status">
<div class="done"></div>
<div class="marked"></div>
</div>
</div>
<div class="card-item">
<span>4</span>
<div class="status">
<div class="done"></div>
<div class="marked"></div>
</div>
</div>
<div class="card-item">
<span>5</span>
<div class="status">
<div class="done"></div>
<div class="marked"></div>
</div>
</div>
<button class="submit-btn">提交试卷</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
<p>CSS代码：</p>
<ul>
<li>{
margin: 0;
padding: 0;
box-sizing: border-box;
}</li>
</ul>
<p>body {
font-family: Arial, sans-serif;
}</p>
<p>.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: #f5f5f5;
}</p>
<p>.header h1 {
font-size: 28px;
font-weight: bold;
}</p>
<p>.timer {
display: flex;
align-items: center;
font-size: 24px;
font-weight: bold;
}</p>
<p>.container {
display: flex;
flex-wrap: wrap;
padding: 20px;
background-color: #fff;
}</p>
<p>.question {
flex-basis: 50%;
margin-bottom: 20px;
padding: 20px;
border: 1px solid #ccc;
}</p>
<p>.question p {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}</p>
<p>.question label {
display: block;
margin-bottom: 10px;
font-size: 16px;
}</p>
<p>.mark {
display: flex;
align-items: center;
margin-top: 10px;
}</p>
<p>.mark input[type="checkbox"] {
margin-right: 10px;
}</p>
<p>.sidebar {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 300px;
padding: 20px;
background-color: #f5f5f5;
overflow: auto;
}</p>
<p>.card {
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}</p>
<p>.card h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}</p>
<p>.card-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}</p>
<p>.card-item span {
display: inline-block;
width: 30px;
height: 30px;
background-color: #ccc;
border-radius: 50%;
text-align: center;
line-height: 30px;
font-size: 16px;
margin-right: 10px;
}</p>
<p>.status {
display: flex;
align-items: center;
margin-left: auto;
}</p>
<p>.status div {
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
}</p>
<p>.done {
background-color: #00cc00;
}</p>
<p>.marked {
background-color: #ff0000;
}</p>
<p>.submit-btn {
display: block;
margin-top: 20px;
padding: 10px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}</p>
<p>.submit-btn:hover {
background-color: #3e8e41;
}</p>
<p>.submit-btn:active {
transform: translateY(1px);
}</p>
<p>@media screen and (max-width: 768px) {
.question {
flex-basis: 100%;
}
}</p>
<p>JS代码：</p>
<p>window.onload = function() {
// 定义考试时间
var examTime = 2 * 60 * 60; // 2小时
// 获取剩余时间节点
var countdown = document.getElementById('countdown');
// 定义倒计时函数
function timer() {
var hour = Math.floor(examTime / 3600);
var minute = Math.floor((examTime - hour * 3600) / 60);
var second = examTime - hour * 3600 - minute * 60;
countdown.innerHTML = hour + '小时' + minute + '分钟' + second + '秒';
examTime--;
if (examTime < 0) {
clearInterval(timerInterval);
countdown.innerHTML = '考试时间已结束';
// TODO: 考试时间结束后的操作
}
}
// 调用倒计时函数
timer();
// 每秒执行一次倒计时函数
var timerInterval = setInterval(timer, 1000);</p>
<pre><code>// 获取答题卡节点
var cardItems = document.querySelectorAll('.card-item');
// 获取题目节点
var questions = document.querySelectorAll('.question');
// 获取标记节点
var markCheckboxes = document.querySelectorAll('.mark input[type="checkbox"]');
// 遍历题目节点
for (var i = 0; i < questions.length; i++) {
// 点击题目时，答题卡对应题目的第一个小方框变绿显示已做
questions[i].onclick = function() {
var index = this.getAttribute('data-index');
cardItems[index].querySelector('.done').style.backgroundColor = '#00cc00';
}
// 遍历标记节点
for (var j = 0; j < markCheckboxes.length; j++) {
// 点击标记时，答题卡对应题目的第二个小方框变红
markCheckboxes[j].onclick = function(event) {
event.stopPropagation();
var index = this.parentNode.parentNode.getAttribute('data-index');
if (this.checked) {
cardItems[index].querySelector('.marked').style.backgroundColor = '#ff0000';
} else {
cardItems[index].querySelector('.marked').style.backgroundColor = '';
}
}
}
}
// 提交试卷按钮点击事件
var submitBtn = document.querySelector('.submit-btn');
submitBtn.onclick = function() {
// TODO: 提交试卷操作
}
</code></pre>
原文地址: http://www.cveoy.top/t/topic/d6u9 著作权归作者所有。请勿转载和采集!