bootstrap实现一个带进度条和倒计时的答题问卷调查页面效果代码-html代码-BFW代码库

代码语言：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": ".........完整代码请登录后点击上方下载按钮下载查看