• 日期: 2028-11-21
  • 标签: 常规

前端考试界面：带计时器、答题卡、标记功能的交互式界面

本项目使用 HTML、CSS 和 JavaScript 创建了一个考试界面，包含计时器、答题卡、标记功能等交互功能，方便用户进行在线考试。

1. 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 question-1'>
				<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 question-2'>
				<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 question-3'>
				<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 question-4'>
				<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 question-5'>
				<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>

2. 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;
}

.question.current button {
	background-color: #8bc34a;
	color: white;
}

.question.marked button {
	border: 1px solid red;
	color: red;
}

3. 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);
questionDOMs[0].classList.remove('hidden');
updateSummary();

项目运行

  1. 将上述 HTML、CSS 和 JavaScript 代码分别保存为 index.html、style.css 和 script.js 文件。
  2. 在浏览器中打开 index.html 文件，即可体验考试界面。

功能说明

  1. 计时器: 页面右上角显示考试倒计时，初始时剩余 2 小时，当时间到时会弹出提示框。
  2. 答题卡: 页面右侧下方显示答题卡区域，每个题目对应一个小方框，点击左侧题目对应答案的按钮，答题卡区域对应的小方框变为绿色，表示该题已答题。
  3. 标记功能: 每个题目右下角有一个标记按钮，点击该按钮，对应题目的小方框右上角会有红色标记，表示该题已标记。再次点击标记按钮，红色标记消失，表示取消标记。
  4. 切换题目: 左侧题目可以上下滚动查看，点击答题卡区域的题目编号按钮，可以快速切换到该题目。

代码说明

  1. HTML 代码: 使用 div 标签创建了界面布局，使用 class 属性定义了每个元素的样式类。
  2. CSS 代码: 定义了界面的样式，包括字体、颜色、布局、按钮样式等。
  3. JavaScript 代码: 实现计时器、答题卡、标记功能以及切换题目的交互逻辑。

总结

该项目是一个简单的前端考试界面，实现了基本的功能，可以作为学习前端开发的基础练习项目。你可以根据自己的需求修改代码，添加更多功能，例如：

  1. 添加提交答案功能。
  2. 添加随机出题功能。
  3. 添加错题重做功能。
  4. 添加成绩统计功能。

希望本项目能够帮助你学习前端开发知识。

前端考试界面：带计时器、答题卡、标记功能的交互式界面

原文地址: https://www.cveoy.top/t/topic/nM2y 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录