利用前端知识写一个考试界面分为左侧和右侧左侧有五道单选题可以上下滚动查看每道题有四个答案每个答案前有一个按钮每道选择题右下角有标记按钮界面右侧上方显示考试倒计时初始时剩余两个小时下方为答题卡区域显示左侧每道题的题号和对应的小方框界面固定不可滚动。当答题者点击左侧某个题的某个答案时答案对应的单选按钮变绿色同时答题卡区域对应题目的白色小方框变为绿色当答题者点击某个题目右下角的标记按钮时题目对应的小方框
这是考试界面的HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>考试界面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="left">
<div class="timer">剩余时间：2小时0分0秒</div>
<div class="question">
<div class="title">1. 下列哪个不是前端框架？</div>
<div class="options">
<div class="option"><button></button>Angular</div>
<div class="option"><button></button>React</div>
<div class="option"><button></button>Vue</div>
<div class="option"><button></button>Spring</div>
</div>
<div class="mark"><button>标记</button></div>
</div>
<div class="question">
<div class="title">2. 下列哪个不是CSS框架？</div>
<div class="options">
<div class="option"><button></button>Bootstrap</div>
<div class="option"><button></button>Materialize</div>
<div class="option"><button></button>Bulma</div>
<div class="option"><button></button>jQuery</div>
</div>
<div class="mark"><button>标记</button></div>
</div>
<div class="question">
<div class="title">3. 下列哪个不是JavaScript框架？</div>
<div class="options">
<div class="option"><button></button>jQuery</div>
<div class="option"><button></button>React</div>
<div class="option"><button></button>Angular</div>
<div class="option"><button></button>Vue</div>
</div>
<div class="mark"><button>标记</button></div>
</div>
<div class="question">
<div class="title">4. 下列哪个不是前端构建工具？</div>
<div class="options">
<div class="option"><button></button>Webpack</div>
<div class="option"><button></button>Gulp</div>
<div class="option"><button></button>Grunt</div>
<div class="option"><button></button>Maven</div>
</div>
<div class="mark"><button>标记</button></div>
</div>
<div class="question">
<div class="title">5. 下列哪个是前端自动化测试工具？</div>
<div class="options">
<div class="option"><button></button>Selenium</div>
<div class="option"><button></button>Appium</div>
<div class="option"><button></button>Protractor</div>
<div class="option"><button></button>Cypress</div>
</div>
<div class="mark"><button>标记</button></div>
</div>
</div>
<div class="right">
<div class="summary">
<div class="title">答题卡</div>
<div class="questions">
<div class="question"><button>1</button></div>
<div class="question"><button>2</button></div>
<div class="question"><button>3</button></div>
<div class="question"><button>4</button></div>
<div class="question"><button>5</button></div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
这是考试界面的CSS代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
height: 100vh;
}
.left {
flex: 3;
padding: 20px;
background-color: #f1f1f1;
overflow-y: auto;
}
.timer {
font-size: 20px;
margin-bottom: 20px;
}
.question {
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 20px;
}
.title {
font-size: 18px;
margin-bottom: 10px;
}
.options {
margin-bottom: 10px;
}
.option {
display: flex;
align-items: center;
margin-bottom: 10px;
}
button {
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 50%;
border: none;
}
button.selected {
background-color: #8bc34a;
}
.mark {
display: flex;
justify-content: flex-end;
}
.mark button {
background-color: white;
border: 1px solid red;
color: red;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
}
.summary {
padding: 20px;
background-color: #fff;
flex: 1;
}
.title {
font-size: 18px;
margin-bottom: 10px;
}
.questions {
display: flex;
flex-wrap: wrap;
}
.question {
width: 20%;
padding: 10px;
text-align: center;
}
.question button {
width: 100%;
height: 100%;
background-color: white;
border: 1px solid #ccc;
color: #ccc;
font-size: 16px;
border-radius: 50%;
}
.question button.selected {
background-color: #8bc34a;
color: white;
}
这是考试界面的JavaScript代码：
var time = 7200; // 考试时间，单位为秒
var currentQuestion = 1; // 当前题号
var answers = []; // 答案数组，初始为空
// 获取DOM元素
var timerDOM = document.querySelector('.timer');
var questionDOMs = document.querySelectorAll('.question');
var optionDOMs = document.querySelectorAll('.option button');
var markDOMs = document.querySelectorAll('.mark button');
var questionButtonDOMs = document.querySelectorAll('.questions button');
// 格式化时间
function formatTime(time) {
var hour = Math.floor(time / 3600);
var minute = Math.floor((time % 3600) / 60);
var second = time % 60;
return hour + '小时' + minute + '分' + second + '秒';
}
// 更新计时器
function updateTimer() {
time--;
timerDOM.innerHTML = '剩余时间：' + formatTime(time);
if (time === 0) {
alert('考试时间到！');
}
}
// 更新答题卡
function updateSummary() {
for (var i = 0; i < questionButtonDOMs.length; i++) {
if (answers[i] !== undefined) {
questionButtonDOMs[i].classList.add('selected');
} else {
questionButtonDOMs[i].classList.remove('selected');
}
if (i + 1 === currentQuestion) {
questionButtonDOMs[i].classList.add('current');
} else {
questionButtonDOMs[i].classList.remove('current');
}
if (markDOMs[i].classList.contains('marked')) {
questionButtonDOMs[i].classList.add('marked');
} else {
questionButtonDOMs[i].classList.remove('marked');
}
}
}
// 更新答案
function updateAnswer(question, option) {
answers[question - 1] = option;
}
// 更新选项
function updateOption(question, option) {
for (var i = 0; i < optionDOMs.length; i++) {
if (optionDOMs[i].parentNode.parentNode.parentNode.classList.contains('question-' + question)) {
optionDOMs[i].classList.remove('selected');
}
}
option.classList.add('selected');
}
// 更新标记
function updateMark(question) {
if (markDOMs[question - 1].classList.contains('marked')) {
markDOMs[question - 1].classList.remove('marked');
} else {
markDOMs[question - 1].classList.add('marked');
}
}
// 切换题目
function switchQuestion(question) {
for (var i = 0; i < questionDOMs.length; i++) {
if (questionDOMs[i].classList.contains('question-' + question)) {
questionDOMs[i].classList.remove('hidden');
} else {
questionDOMs[i].classList.add('hidden');
}
}
currentQuestion = question;
updateSummary();
}
// 绑定事件
for (var i = 0; i < optionDOMs.length; i++) {
optionDOMs[i].addEventListener('click', function(event) {
var question = event.target.parentNode.parentNode.parentNode.classList[1].split('-')[1];
var option = event.target;
updateOption(question, option);
updateAnswer(question, option.innerHTML);
updateSummary();
});
}
for (var i = 0; i < markDOMs.length; i++) {
markDOMs[i].addEventListener('click', function(event) {
var question = event.target.parentNode.parentNode.classList[1].split('-')[1];
updateMark(question);
updateSummary();
});
}
for (var i = 0; i < questionButtonDOMs.length; i++) {
questionButtonDOMs[i].addEventListener('click', function(event) {
var question = parseInt(event.target.innerHTML);
switchQuestion(question);
});
}
// 初始化
timerDOM.innerHTML = '剩余时间：' + formatTime(time);
setInterval(updateTimer, 1000);
switchQuestion(currentQuestion);
``
原文地址: https://www.cveoy.top/t/topic/d5XM 著作权归作者所有。请勿转载和采集!