bootstrap实现一个带进度条和倒计时的答题问卷调查页面效果代码
代码语言:html
所属分类:布局界面
代码描述:bootstrap实现一个带进度条和倒计时的答题问卷调查页面效果代码
代码标签: 带 进度 条 和 倒计时 的 答题 问卷调查 页面 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no"> <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/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-3.3.4.js"></script> <script> /** * 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" }]; 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 an.........完整代码请登录后点击上方下载按钮下载查看
网友评论0