一个JQuery前端实现的考试页面，带进度条，倒计时和答题卡

最新推荐文章于 2024-08-12 00:32:33 发布

sswangyulongss

最新推荐文章于 2024-08-12 00:32:33 发布

阅读量7.3k

点赞数 5

分类专栏：前端文章标签： jquery 前端

本文链接：https://blog.csdn.net/u014678284/article/details/78117268

版权

这是一个使用jQuery编写的考试页面，具备时间显示、进度条跟踪以及答题卡功能。页面能显示题目、选项，并记录用户的选择。考生可以查看已完成的题目数量和总题目数，同时有收藏题目和切换答题卡的选项。页面还包含暂停和继续计时的控制，以及提交试卷的按钮。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>带进度条和时间的jQuery代码</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap-3.3.4.css">
<link href="css/index.css" rel="stylesheet" type="text/css">

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/Questions.js"></script>
<script>
var HH = 0;//时
var mm = 0;//分
var ss = 0;//秒
var timeState = true;//时间状态默认为true 开启时间
var questions= QuestionJosn;
var itemList=["A","B","C","D","E","F"]
var activeQuestion=0; //当前操作的考题编号
var questioned = 0; //
var checkQues = []; //已做答的题的集合
/*实现计时器*/
var time = setInterval(function () {
if (timeState) {
if (HH == 24) HH = 0;
str = "";
if (++ss == 60) {
if (++mm == 60) { HH++; mm = 0; }
ss = 0;
}
str += HH < 10 ? "0" + HH : HH;
str += ":";
str += mm < 10 ? "0" + mm : mm;
str += ":";
str += ss < 10 ? "0" + ss : ss;
$(".time").text(str);
} else {
$(".time").text(str);
}
}, 1000);
//展示考卷信息
function showQuestion(id){
$(".questioned").text(id+1);
questioned = (id+1)/questions.length
if(activeQuestion!=undefined){
$("#ques"+activeQuestion).removeClass("question_id").addClass("active_question_id");
}
activeQuestion = id;
$(".question").find(".question_info").remove();
var question = questions[id];
$(".question_title").html("<strong>第 "+(id+1)+" 题、</strong>"+question.questionTitle);
var items = question.questionItems.split(";");
var item="";
for(var i=0;i<items.length;i++){
item ="<li class='question_info' οnclick='clickTrim(this)' id='item"
+i+"'><input type='radio' name='item' value='"+itemList[i]+"'> "+itemList[i]+"."+items[i]+"</li>";
$(".question").append(item);
}
$(".question").attr("id","question"+id);
$("#ques"+id).removeClass("active_question_id").addClass("question_id");
for(var i=0;i<checkQues.length;i