bootstrap实现一个带进度条和时间的答题问卷调查效果代码
代码语言：html
所属分类：布局界面
代码描述：bootstrap实现一个带进度条和时间的答题问卷调查效果代码
代码标签： 带 进度 条 和 时 间的 答题 问卷调查 效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>带进度条和时间的jQuery仿牛客网在线答题代码</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<style>
.content{
width: 100%;
}
.top{
width: 100%;
border: 1px solid white;
}
.middle{
width: 100%;
height: 500px;
border: 1px solid white;
}
.foot{
width: 100%;
height: 300px;
border: 1px solid white;
}
.middle-top{
width: 100%;
height: 260px;
border: 1px solid white;
}
.li-1{
position: absolute;
height: 430px;
width:200px;
background: #131801;
z-index: 99;
opacity:0.5;
}
.li-2{
width:170px;
color:#E0E5C5;
line-height: 50px;
border-right: 1px solid #646952;
}
.li-nav{
color:#F4F4F4;
height: 95px;
background: transparent;
border-top: 1px solid #586A50;
}
.li-nav table{
margin: 10px 0px 0px 20px;
}
.li-nav table th{
color: #F4F4F4;
opacity:1;
}
.li-nav table td a{
color: #B0C491;
opacity:1;
}
.li-nav table td a:hover{
color: #F4F4F4;
}
.li-nav table td,th{
line-height: 30px;
}
.li-nav span{
color: #5A6652;
line-height: 95px;
margin-right: 15px;
}
.li-nav:hover{
background:#3C4A31;
}
.ul-view{
list-style: none;
padding:20px 0px 0px 15px;
}
.ul-view li{
color:#F3F5F2 ;
opacity: 1;
line-height: 25px;
}
.ul-view li a{
color: #B1C496;
padding:5px 12px 5px 0px;
}
#tbody button{
width: 100px;
height: 100px;
border: 0px;
}
.middle-top-right a div:hover{
background: #2D3339;
color: red;
}
.question{
line-height: 50px;
}
.question_title{
height: 50px;
margin: 0px;
}
.question_info{
padding-left: 20px;
border: 1px solid #CCC;
line-height: 45px;
height: 45px;
cursor:pointer;
margin: 10px 0px 10px 0px;
}
.question_info input{
line-height: 45px;
}
.clickTrim{
color: #00BC9B;
background: #F3F3F3;
border: 1px solid #909090;
}
.question_info:hover{
color: #00BC9B;
background: #F3F3F3;
border: 1px solid #909090;
}
.operation span{
cursor:pointer;
}
.operation span:hover{
cursor: pointer;
}
.questionId{
color: #DCE7F2;
width: 35px;
height: 35px;
text-align: center;
line-height: 35px;
margin:5px;
float: left;
cursor:pointer;
border: 1px solid white;
}
.questionId:hover,.question_id{
color:#FFF;
background:#59B59C;
}
.active_question_id{
color: #59B59C;
background: none;
border: 1px solid #CCC;
}
#closeCard,#openCard{
width: 130px;
border:none;
}
#closeCard span,#openCard span{
cursor:pointer;
}
#openCard:hover{
color:#25BB9B;
}
.clickQue{
color: #00BC9B;
background: #F3F3F3;
border: 1px solid #909090;
}
.progress{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-3.3.4.js"></script>
<script type="text/javascript" >
/**
* Created by Administrator on 2016/11/15.
*/
var QuestionJosn=[{"questionId":"1","questionTitle":"下丘脑与腺垂体之间主要通过下列哪条途径联系？ ","questionItems":"神经纤维;神经纤维和门脉系统;垂体门脉系统;垂体束;轴浆运输","questionAnswer":"c"},{"questionId":"2","questionTitle":"下列激素中，哪一种不是腺垂体分泌的？ ","questionItems":"生长素;催产素;黄体生成素;促卵泡激素;催乳素","questionAnswer":"b"},{"questionId":"3","questionTitle":"关于内分泌系统最佳的描述是 ","questionItems":"区别于外分泌腺的系统;无导管，分泌物直接进入血液的腺体;分泌物通过体液传递信息的系统;包括内分泌腺和散在的内分泌细胞组成的大系统;全身的内分泌细胞群的总称","questionAnswer":"d"},{"questionId":"4","questionTitle":"呆小症的发生是由于幼年时 ","questionItems":"生长素不足;催产素不足;维生素D3不足;甲状腺激素不足;先天性大脑发育不全","questionAnswer":"d"},{"questionId":"5","questionTitle":"影响降钙素分泌的主要因素是 ","questionItems":"血镁浓度;血钙浓度;血磷浓度;血钠浓度;血钾浓度","questionAnswer":"b"},{"questionId":"6","questionTitle":"关于降钙素的叙述，错误的是 ","questionItems":"由甲状腺C细胞分泌;属于肽类激素;可降低血钙，升高血磷;主要靶器官是骨;其分泌主要受血钙浓度调节","questionAnswer":"c"},{"questionId":"7","questionTitle":"激素作用的特异性，下述错误的是 ","questionItems":"可作用于全身所有组织细胞;有的作用于靶腺;有选择性地作用于某些器官、腺体细胞;有的广泛影响细胞代谢;有的只与胞膜或胞浆受体结合发挥作用","questionAnswer":"a"},{"questionId":"8","questionTitle":"使皮质醇浓度增加的麻醉药是 ","questionItems":"吗啡，巴比妥类;芬太尼;乙醚;恩氟烷","questionAnswer":"d"},{"questionId":"9","questionTitle":"使皮质醇浓度降低的因素是","questionItems":"手术创伤;低血压;术中缺氧;二氧化碳蓄积;低温","questionAnswer":"e"},{"questionId":"10","questionTitle":"使甲状腺分泌功能降低的因素是 ","questionItems":"乙醚;以硫喷妥钠为主的全麻;降温初期;手术;椎管内麻醉","questionAnswer":"b"},{"questionId":"11","questionTitle":"下丘脑“促垂体区”神经元的功能特点 ","questionItems":"分泌类固醇激素;不受大脑的控制;将神经信息转变成激素信息;不具典型神经元的作用;无肽能神经元的作用","questionAnswer":"c"},{"questionId":"12","questionTitle":"下列不属于下丘脑调节肽的是 ","questionItems":"TRH;GnRH;GHRH;ACTH;PRF","questionAnswer":"d"},{"questionId":"13","questionTitle":"下列哪一种激素为腺垂体所分泌? ","questionItems":"促甲状腺激素;抗利尿激素;肾上腺皮质激素;生长素释放激素;催乳素释放抑制因子","questionAnswer":"a"},{"questionId":"14","questionTitle":"下列哪种激素不是由垂体前叶分泌的? ","questionItems":"抗利尿激素;生长素;卵泡刺激素;催乳素;促甲状腺激素","questionAnswer":"a"},{"questionId":"15","questionTitle":"促进机体产热增加的主要激素是 ","questionItems":"胰岛素;生长素;甲状腺激素;肾上腺素; 糖皮质激素","questionAnswer":"c"},{"questionId":"16","questionTitle":"在人类和哺乳动物，对骨和脑的发育尤为重要的激素是 ","questionItems":"生长素;糖皮质激素;盐皮质激素;甲状腺激素;甲状旁腺激素","questionAnswer":"d"},{"questionId":"17","questionTitle":"地方性甲状腺肿的主要发病原因是 ","questionItems":"由于促甲状腺素分泌过少;甲状腺合成的甲状腺激素过多;食物中缺少钙和蛋白质;食物中缺少酪氨酸;食物中缺少碘","questionAnswer":"e"},{"questionId":"18","questionTitle":"关于甲状腺激素正确的论述是 ","questionItems":"属于类固醇激素;合成后贮存于细胞内;T4的活性比T3大;可促进生长和发育过程;幼年缺乏时可导致侏儒症","questionAnswer":"d"},{"questionId":"19","questionTitle":"人体内储存量最多的激素是 ","questionItems":"生长素;胰岛素;甲状腺素;促肾上腺皮质激素;肾上腺素和去甲肾上腺素","questionAnswer":"c"},{"questionId":"20","questionTitle":"对胰岛素的叙述错误的是 ","questionItems":"由胰岛B细胞分泌;可使血糖浓度下降;迷走神经兴奋可使其分泌减少;血糖浓度升高可促进其分泌;胃肠激素可促进其分泌","questionAnswer":"c"}];
var luyouqi=[{"questionId":"1","questionTitle":"下丘脑与腺垂体之间主要通过下列哪条途径联系？ ","questionItems":"神经纤维;神经纤维和门脉系统;垂体门脉系统;垂体束;轴浆运输","questionAnswer":"c"},{"questionId":"2","questionTitle":"下列激素中，哪一种不是腺垂体分泌的？ ","questionItems":"生长素;催产素;黄体生成素;促卵泡激素;催乳素","questionAnswer":"b"},{"questionId":"3","questionTitle":"关于内分泌系统最佳的描述是 ","questionItems":"区别于外分泌腺的系统;无导管，分泌物直接进入血液的腺体;分泌物通过体液传递信息的系统;包括内分泌腺和散在的内分泌细胞组成的大系统;全身的内分泌细胞群的总称","questionAnswer":"d"},{"questionId":"4","questionTitle":"呆小症的发生是由于幼年时 ","questionItems":"生长素不足;催产素不足;维生素D3不足;甲状腺激素不足;先天性大脑发育不全","questionAnswer":"d"},{"questionId":"5","questionTitle":"影响降钙素分泌的主要因素是 ","questionItems":"血镁浓度;血钙浓度;血磷浓度;血钠浓度;血钾浓度","questionAnswer":"b"},{"questionId":"6","questionTitle":"关于降钙素的叙述，错误的是 ","questionItems":"由甲状腺C细胞分泌;属于肽类激素;可降低血钙，升高血磷;主要靶器官是骨;其分泌主要受血钙浓度调节","questionAnswer":"c"},{"questionId":"7","questionTitle":"激素作用的特异性，下述错误的是 ","questionItems":"可作用于全身所有组织细胞;有的作用于靶腺;有选择性地作用于某些器官、腺体细胞;有的广泛影响细胞代谢;有的只与胞膜或胞浆受体结合发挥作用","questionAnswer":"a"},{"questionId":"8","questionTitle":"使皮质醇浓度增加的麻醉药是 ","questionItems":"吗啡，巴比妥类;芬太尼;乙醚;恩氟烷","questionAnswer":"d"},{"questionId":"9","questionTitle":"使皮质醇浓度降低的因素是","questionItems":"手术创伤;低血压;术中缺氧;二氧化碳蓄积;低温","questionAnswer":"e"},{"questionId":"10","questionTitle":"使甲状腺分泌功能降低的因素是 ","questionItems":"乙醚;以硫喷妥钠为主的全麻;降温初期;手术;椎管内麻醉","questionAnswer":"b"},{"questionId":"11","questionTitle":"下丘脑“促垂体区”神经元的功能特点 ","questionItems":"分泌类固醇激素;不受大脑的控制;将神经信息转变成激素信息;不具典型神经元的作用;无肽能神经元的作用","questionAnswer":"c"},{"questionId":"12","questionTitle":"下列不属于下丘脑调节肽的是 ","questionItems":"TRH;GnRH;GHRH;ACTH;PRF","questionAnswer":"d"},{"questionId":"13","questionTitle":"下列哪一种激素为腺垂体所分泌? ","questionItems":"促甲状腺激素;抗利尿激素;肾上腺皮质激素;生长素释放激素;催乳素释放抑制因子","questionAnswer":"a"},{"questionId":"14","questionTitle":"下列哪种激素不是由垂体前叶分泌的? ","questionItems":"抗利尿激素;生长素;卵泡刺激素;催乳素;促甲状腺激素","questionAnswer":"a"},{"questionId":"15","questionTitle":"促进机体产热增加的主要激素是 ","questionItems":"胰岛素;生长素;甲状腺激素;肾上腺素; 糖皮质激素","questionAnswer":"c"},{"questionId":"16","questionTitle":"在人类和哺乳动物，对骨和脑的发育尤为重要的激素是 ","questionItems":"生长素;糖皮质激素;盐皮质激素;甲状腺激素;甲状旁腺激素","questionAnswer":"d"},{"questionId":"17","questionTitle":"地方性甲状腺肿的主要发病原因是 ","questionItems":"由于促甲状腺素分泌过少;甲状腺合成的甲状腺激素过多;食物中缺少钙和蛋白质;食物中缺少酪氨酸;食物中缺少碘","questionAnswer":"e"},{"questionId":"18","questionTitle":"关于甲状腺激素正确的论述是 ","questionItems":"属于类固醇激素;合成后贮存于细胞内;T4的活性比T3大;可促进生长和发育过程;幼年缺乏时可导致侏儒症","questionAnswer":"d"},{"questionId":"19","questionTitle":"人体内储存量最多的激素是 ","questionItems":"生长素;胰岛素;甲状腺素;促肾上腺皮质激素;肾上腺素和去甲肾上腺素","questionAnswer":"c"},{"questionId":"20","questionTitle":"对胰岛素的叙述错误的是 ","questionItems":"由胰岛B细胞分泌;可使血糖浓度下降;迷走神经兴奋可使其分泌减少;血糖浓度升高可促进其分泌;胃肠激素可促进其分泌","questionAnswer":"c"}];
</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' onclick='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+"'onclick='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(); /.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0