使用layui实现模拟考试页面，完成做题，得分，错题详解等功能

纳尔哒哒

已于 2023-11-06 19:50:11 修改

阅读量1.4k

点赞数 1

分类专栏： JavaScript layui 文章标签： layui 前端 javascript

于 2023-10-18 21:42:20 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50963877/article/details/133915231

版权

概述与效果图

相信大家疫情期间都有线上考试的经历，我自己对这个很感兴趣，就模拟考试做了一个页面

先给大家看看效果图吧

这是没有具体题目的一个模拟页面，有具体题目的页面在后面

下面这个是完整的换一种风格的模拟页面

话不多说，上代码

第一种的代码

一定要记得引入layui的相关库啊！！！！！

html及部分css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>考核页面</title>
		<style>
			*{
			    margin: 0;
			    padding: 0;
			    font-family: 'Microsoft YaHei';
			}
			html,body {
				width: 100%;
				height: 100%;
			}
			.testitem {
				width: 100%;
				height: 100%;
			}
			.theory {
				width: 100%;
				height: 100%;
			}
			.testitem-left {
				float: left;
				height: 100%;
				width: 75%;
				color:#000;
			}
			.testitem-right {
				float: right;
				width: 25%;
				height: 100%;
				background-color: #e9e9e9;
				position: relative;
			}
			.testtime {
				height: 19px;
				color: #000;
				/* text-align: center; */
				margin: 20px ;
			}
			.testitem-right-content li{
				display: inline-block;
				float: left;
				width: 32px;
				height: 32px;
				color:#000;
				background-color: #fff;
				border: 1px solid #d4d4d4;
				margin: 10px 0;
				margin-left: 14px;
				text-align: center;
				line-height: 32px;
				font-size:14px;
			}
			.thisli {
				border: 1px solid #0095ff!important;
			}
			.thislis {
				background-color: #0095ff;
				color: #fff;
			}
			.testtitle {
				font-size: 14px;
				margin: 30px 0 0 40px;
				font-weight: 700;
			}
			.testitem-item {
				margin: 20px 0 0 40px;
			}
			.testitem-item  li {
				list-style: none;
				margin: 10px 0;
			}
			.testitem-right-bottom {
				position: absolute;
				bottom: 0;
				left:0;
			}
			.prevtest, .nexttest, .submit, .goback {
				width: 85px;
				height: 39px;
				line-height: 39px;
				float: left;
				color:#fff;
				background-color: #0095ff;
				font-size: 16px;
				text-align: center;
				border-radius: 4px;
				margin:0 0 20px 25px;
				cursor: pointer;
			}
			.answer {
				display: none;
				width: 146px;
				height: 27px;
				font-size: 16px;
				color:#000;
				font-weight: 700;
				text-align: center;
				line-height: 27px;
				background-color: #eee;
				margin-left:40px ;
				border-radius: 25px;
			}
			.analysistitle {
				display: none;
				font-size: 14px;
				font-weight: 700;
				margin:20px 0 0 40px ;
			}
			.analysis {
				display: none;
				width: 665px;
				font-size: 16px;
				margin:20px 0 0 40px ;
				text-indent: 2em;
			}
		</style>
		<script src="./js/testdata.js"></script>
	</head>
	<body>
		<div class="testitem"></div>
	</body>
	<script src="./js/jquery-3.3.1.min.js"></script>
	<!-- <script src="./js/DSdata.js"></script> -->
	
	<script src="./js/layer-v3.5.1/layer/layer.js" type="text/javascript"></script>
	<script src="./js/layui-2.6.8.js" type="text/javascript"></script>
	<script>
		let menuchild = {}
		let resultdata = [] //成绩数据
		var result=0;  //分数
		var testcontent = "理论考核";  //考核内容
		var timer = 0; //考试倒计时
		var timers;//定义定时器
		var times;//考试开始时间
		var myanswer = []; //定义做题答案
		var $theory = '<div class="theory"><div class="testitem-left"></div><div class="testitem-right"><div class="testtime"></div><ul class="testitem-right-content"></ul><div class="testitem-right-bottom"><div class="prevtest" onclick="prevtest()">上一题</div><div class="nexttest" onclick="nexttest()">下一题</div><div class="submit" style="display:none" onclick="submits()">提交</div><div class="goback" style="display:none" onclick="goback()">返回</div></div></div></div>'
		if($(".lilun").length == 0){
			$(".testitem").append($theory);
			funitem1(data);
		}		
		if(timer == 0){
				$(".testitem-item").empty()
				timer = 60;
				timerset = 60;
				times = formattime($.now())
				timers = setInterval(function(){
					$(".testtime").text("剩余时间："+timer+"秒")
					timer--;
					if(timer == 0){
						endtime()
						$.each(data,function(index,obj){
							if($("#"+index+"").length == 0){
								var $div ="<div id="+index+" style='display:none;'><div class='testtitle'>"+data[index].name+"</div><ul class='testitem-item'></ul><div class='answer'>正确答案: "+data[index].answer+"</div><p class='analysistitle'>试题详解：</p><p class='analysis'>"+data[index].analysis+"</p></div>"
								$(".testitem-left").append($div)
								if($("#"+index+" li").length == 0){
									$.each(data[index].children,function(indexs,obj){
										var $li ="<li><label><input type='radio' onchange='done(this)' name="+index+" value="+data[index].children[indexs].key+">&nbsp;&nbsp;"+data[index].children[indexs].key+": "+data[index].children[indexs].value+"</label></li>"
										$("#"+index+" .testitem-item").append($li)
									})
								}
							}
						})
					}
			},1000);
			}
			$(".testitem-right-content li:first-child").click()
			//遍历生成右侧题号
			function funitem1(data){
				$.each(data,function(index,arr){
					var $li
					if(index == 0){
						 $li = "<li class='thisli' onclick='funitem2(this)'>"+ parseInt(index+1) +"</li>"
						$($li).click();
					}else{
						 $li = "<li onclick='funitem2(this)'>"+ parseInt(index+1) +"</li>"
					}
					$(".testitem-right-content").append($li)
				})
			}
			//点击题号显示
			function funitem2(_this){
				$(_this).addClass("thisli")
				$(_this).siblings().removeClass("thisli")
				var i = $(_this).index();
				if($("#"+i+"").length == 0){
					var $div ="<div id="+i+"><div class='testtitle'>"+data[i].name+"</div><ul class='testitem-item'></ul><div class='answer'>正确答案: "+data[i].answer+"</div><p class='analysistitle'>试题详解：</p><p class='analysis'>"+data[i].analysis+"</p></div>"
					$(".testitem-left").append($div)
				}
				$("#"+i+"").siblings().hide()
				$("#"+i+"").show()
				if($("#"+i+" li").length == 0){
					$.each(data[i].children,function(index,obj){
						var $li ="<li><label><input type='radio' onchange='done(this)' name="+i+" value="+data[i].children[index].key+">&nbsp;&nbsp;"+data[i].children[index].key+": "+data[i].children[index].value+"</label></li>"
						$("#"+i+" .testitem-item").append($li)
					})
				}
			}
			//选择时触发
			function done(_this){
					var uuid =  parseInt($(_this).parents("ul").parent().attr("id"))
					if($(_this).val() == data[uuid].answer){
						$(".testitem-right-content li").eq(uuid).removeClass("errorli")
						$(".testitem-right-content li").eq(uuid).addClass("answerli")
					}else {
						$(".testitem-right-content li").eq(uuid).addClass("errorli")
						$(".testitem-right-content li").eq(uuid).removeClass("answerli")
					}
					$(".testitem-right-content li").eq(uuid).css("background","#0095ff").css("color","#fff")
					var obj = {}
					obj.key = uuid + 1;
					obj.myanswer = $(_this).val();
					obj.answer = data[uuid].answer;
					if(obj.myanswer == obj.answer){
						obj.score = data[uuid].score;
					}else {
						obj.score = 0;
					}
					myanswer[uuid] = obj;
					
			}
			// 上一题
				function prevtest(){
					$(".nexttest").show();
					if($(".answer").css("display") == "none"){
						$(".submit").hide();
					}else{
						$(".goback").hide();
					}
					console.log($(".thisli").index())
					var myindex = $(".thisli").index();
					if(myindex > 0){
						myindex--
						$(".testitem-right-content li").eq(myindex).addClass("thisli")
						$(".testitem-right-content li").eq(myindex).siblings().removeClass("thisli")
						if($("#"+myindex+"").length == 0){
							var $div ="<div id="+myindex+"><div class='testtitle'>"+data[myindex].name+"</div><ul class='testitem-item'></ul><div class='answer'>正确答案: "+data[myindex].answer+"</div><p class='analysistitle'>试题详解：</p><p class='analysis'>"+data[myindex].analysis+"</p></div>"
							$(".testitem-left").append($div)
						}
						$("#"+myindex+"").siblings().hide()
						$("#"+myindex+"").show()
						if($("#"+myindex+" li").length == 0){
							$.each(data[myindex].children,function(index,obj){
								var $li

最低0.47元/天解锁文章