⼀个JQuery前端实现的考试页⾯，带进度条，倒计时和答题卡<!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++){
if(checkQues[i].id==id){
$("#"+checkQues[i].item).find("input").prop("checked","checked");
$("#"+checkQues[i].item).addClass("clickTrim");
$("#ques"+activeQuestion).removeClass("question_id").addClass("clickQue");
}
}
progress();
}
/*答题卡*/
function answerCard(){
$(".question_sum").text(questions.length);
for(var i=0;i<questions.length;i++){
var questionId ="<li id='ques"+i+"'οnclick='saveQuestionState("+i+")' class='questionId'>"+(i+1)+"</li>"; $("#answerCard ul").append(questionId);
}
}
/*选中考题*/
var Question;
function clickTrim(source){
var id = source.id;
$("#"+id).find("input").prop("checked","checked");
$("#"+id).addClass("clickTrim");
$("#ques"+activeQuestion).removeClass("question_id").addClass("clickQue");
var ques =0;
for(var i=0;i<checkQues.length;i++){
if( checkQues[i].id==activeQuestion&&checkQues[i].item!=id){
ques = checkQues[i].id;
checkQues[i].item = id;//获取当前考题的选项ID
checkQues[i].answer =$("#"+id).find("input[name=item]:checked").val();//获取当前考题的选项值
}
}
if(checkQues.length==0||Question!=activeQuestion&&activeQuestion!=ques){
var check ={};
check.id=activeQuestion;//获取当前考题的编号
check.item = id;//获取当前考题的选项ID
check.answer =$("#"+id).find("input[name=item]:checked").val();//获取当前考题的选项值
checkQues.push(check);
}
javascript进度条$(".question_info").each(function(){
var otherId =$(this).attr("id");
if(otherId!=id){
$("#"+otherId).find("input").prop("checked",false);
$("#"+otherId).removeClass("clickTrim");
}
})
Question = activeQuestion;
}
/*设置进度条*/
function progress(){
var prog = ($(".active_question_id").length+1)/questions.length;
var pro = $(".progress").parent().width() * prog;
$(".progres").text((prog*100).toString().substr(0,5)+"%")
$(".progress").animate({
width: pro,
opacity: 0.5
}, 1000);
}
/*保存考题状态 已做答的状态*/
function saveQuestionState(clickId){
showQuestion(clickId)
}
$(function(){
$(".middle-top-left").width($(".middle-top").width()-$(".middle-top-right").width()) $(".progress-left").width($(".middle-top-left").width()-200);
progress();
answerCard();
showQuestion(0);
/*alert(QuestionJosn.length);*/
/*实现进度条信息加载的动画*/
var str = '';
/*开启或者停⽌时间*/
$(".time-stop").click(function () {
timeState = false;
$(this).hide();
$(".time-start").show();
});
$(".time-start").click(function () {
timeState = true;
$(this).hide();
$(".time-stop").show();
});
/*收藏按钮的切换*/
$("#unHeart").click(function(){
$(this).hide();
$("#heart").show();
})
$("#heart").click(function(){
$(this).hide();
$("#unHeart").show();
})
/*答题卡的切换*/
$("#openCard").click(function(){
$("#closeCard").show();
$("#answerCard").slideDown();
$(this).hide();
})
$("#closeCard").click(function(){
$("#openCard").show();
$("#answerCard").slideUp();
$(this).hide();
})
//提交试卷
$("#submitQuestions").click(function(){
/*alert(JSON.stringify(checkQues));*/
alert("已做答:"+($(".clickQue").length)+"道题，还有"+(questions.length-($(".clickQue").length))+"道题未完成");
})
//进⼊下⼀题
$("#nextQuestion").click(function(){
if((activeQuestion+1)!=questions.length) showQuestion(activeQuestion+1);
showQuestion(activeQuestion)
})
})
</script>
</head>
<body>
<div>
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="content">
<div class="row">
<div class="btn-group">
<button class="btn btn-default" type="button" onClick="(-1);">返回上⼀个页⾯</button>
<button class="btn btn-default" type="button" onClick="load()">刷新</button>
</div>
</div>
<div > <div >
<div >
<div >
<div class="middle-top" style="width: 100%;height: 50px;border-bottom: 1px solid #CCC;background:
#2D3339; position:relative;">
<div class="middle-top-left pull-left"
>
<div class="text-center pull-left progress-left"
>
<div class="progress pull-left"
></div>
<div class="pro-text" > 已完成<span class="progres"></span></div>
</div>
<div class="pull-left" >
<!--已做答的数量和考题总数-->
当前第<span class="questioned"></span>题/共<span class="question_sum"></span>题 </div>
</div>
<div class="middle-top-right text-center pull-left"
>
<div class="stop pull-left" > <a href="javascript:void(0);"
class="text-center" >
<div class="time-stop glyphicon glyphicon-pause" title="暂停"
></div>
<div class="time-start glyphicon glyphicon-play" title="开始"
></div>
</a> </div>
<div class="pull-left" >
<div class="time" > </div>
</div>
</div>
</div>
<div >
<div
class="glyphicon glyphicon-map-marker"></div>
[单选题] </div>
</div>
<div >
<div >
<!--试题区域-->
<ul class="list-unstyled question" id="" name="">
<li class="question_title"></li>
</ul>
<!--考题的操作区域-->
<div class="operation" >
<div class="text-left"
>
<div id="unHeart" > <span class="glyphicon glyphicon-heart-empty"></span> <span>收藏本题</span> </div>
<div id="heart" > <span class="glyphicon glyphicon-heart"></span> <span>已收藏</span> </div>
</div>
<div class="text-right" >
<div class="form-group" >
<button class="btn btn-success" id="submitQuestions">提交试卷</button>
<button class="btn btn-info" id="nextQuestion">下⼀题</button>
</div>
</div>
</div>
</div>
</div>
<div > <div >
<div class="panel-default">
<div class="panel-heading" class="panel-heading" id="closeCard" >
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论