jquery实现一个在线测试实时显示分数和进度的答题系统代码

代码语言:html

所属分类:布局界面

代码描述:jquery实现一个在线测试实时显示分数和进度的答题系统代码

代码标签: 在线测试 实时 显示 分数 进度 答题 系统

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
   
<meta charset="UTF-8">
   
<title>BFW NEW PAGE</title>
   
<style>
       
/* Download  */
        body
,ul,ol,li,p,h1,h2,h3,h4,h5,h6,table,td,th,form,fieldset,img,dl,dt,dd {
           
margin: 0px;
           
padding: 0px;
           
font-family: Arial, Helvetica, sans-serif;
           
background: white;
       
}
        a
{
           
color: #35679a;
           
text-decoration: none;
       
}
       
a:hover {
           
color: #c00;
           
text-decoration: underline;
       
}
        img
{
           
border: none;
       
}
        li
{
           
list-style: none;
       
}
        body
{
           
text-align: left;
         
           
font-size: 12px;
           
color: #1d70eb;
       
}

       
.main {
           
width: 960px;
       
           
background: #fff;
           
margin: 0 auto;
           
padding-top: 20px;
           
height: 800px;
         
       
}
       
.warp {
           
width: 420px;
           
height: 420px;
           
border: 1px solid #8aadfd;
           
margin: 0px 20px;
           
background: #fff;
           
overflow: hidden;
           
position: relative;
       
}
       
.issue {
           
position: absolute;
           
top: 0;
           
left: 0;
           
width: 420px;
           
height: auto;
           
z-index: 99;
       
}
       
.issue div {
           
height: 387px;
           
padding-bottom: 33px;
           
background: #fff;
       
}
       
.issue h3 {
           
line-height: 1.4em;
           
font-size: 1.1em;
           
color: #1348c1;
           
padding: .8em .5em .5em;
           
border-bottom: 1px solid #8aadfd;
           
font-weight: 100;
       
}
       
.issue ul {
           
padding: 4px 10px;
       
}
       
.issue li {
           
margin-bottom: 3px;
           
line-height: 24px;
           
min-height: 24px;
           
padding: 1px 0 4px;
           
border: 1px solid #fff;
       
}
       
.issue li:hover,
       
.issue li.hover {
           
border: 1px solid #2271e7;
           
background: #feffff;
       
}
       
.issue li input {
           
display: none;
       
}
       
.issue li span {
           
float: left;
           
clear: left;
           
width: 22px;
           
height: 22px;
           
overflow: hidden;
           
margin: 3px 3px 0 0;
           
background: url(//repo.bfw.wiki/bfwrepo/images/intro/bg.png) 0 0 no-repeat;
       
}
       
.issue li:hover span,
       
.issue li.hover span {
           
background: url(//repo.bfw.wiki/bfwrepo/images/intro/bg.png) 0 -22px no-repeat;
       
}
       
.issue li label {
           
float: left;
           
width: 370px;
           
color: #555;
           
font-size: 12px;
           
margin-top: 3px;
       
}
       
.issue div.selected {
           
background: #fdfeff;
       
}
       
.issue div.selected li {
           
border: 1px solid #fdfeff;
       
}
       
.issue div.selected li:hover,
       
.issue div.selected li.hover {
           
background: none;
           
border: 1px solid #fdfeff;
       
}
       
.issue div.selected li:hover span,
       
.issue div.selected li.hover span {
           
background: url(//repo.bfw.wiki/bfwrepo/images/intro/bg.png) 0 0 no-repeat;
       
}

       
.issue div.selected li.sel {
           
border: 1px solid #f1f1f1;
       
}
       
.issue li.sel span,
       
.issue div.selected li.sel:hover span {
           
background: url(//repo.bfw.wiki/bfwrepo/images/intro/bg.png) 0 -44px no-repeat;
       
}

       
.issue div.result {}
       
.issue div.result p {
           
line-height: 20px;
           
padding: 0 16px;
           
text-indent: 2em;
           
margin-top: 4px;
       
}


       
.ctrl {
           
height: 32px;
           
border-top: 1px solid #8aadfd;
           
width: 420px;
           
position: absolute;
           
bottom: 0;
           
left: 0;
           
           
           
background: url(//repo.bfw.wiki/bfwrepo/images/intro/bg.png) 0 -260px  repeat-x;
           
z-index: 100;
       
}

       
.btns {
           
float: right;
           
width: 56px;
           
padding-left: 5px;
           
background: url(//repo.bfw.wiki/bfwrepo/images/intro/bg.png) -9px -319px no-repeat;
           
height: 32px;
       
}
       
.btns span {
           
float: left;
           
width: 22px;
           
height: 24px;
           
margin: 4px 3px;
           
display: inline;
           
text-indent: -10000px;
           
cursor: pointer;
       
}
       
.btns span.prev {
           
background: url(//repo.bfw.wiki/bfwrepo/images/intro/bg.png) 0 -188px no-repeat;
       
}
       
.btns span.next {
           
background: url(//repo.bfw.wiki/bfwrepo/images/intro/bg.png) 0 -164px no-repeat;
       
}
       
.btns span.noprev {
           
background: url(//repo.bfw.wiki/bfwrepo/images/intro/bg.png) 0 -212px no-repeat;
           
cursor: default;
       
}
       
.btns span.nonext {
           
background: url(//repo.bfw.wiki/bfwrepo/images/intro/bg.png) 0 -236px no-repeat;
           
cursor: default;
       
}
       
.btns span.hvprev {
           
background: url(//repo.bfw.wiki/bfwrepo/images/intro/bg.png) 0 -68px no-repeat;
       
}
       
.btns span.hvnext {
           
background: url(//repo.bfw.wiki/bfwrepo/images/intro/bg.png) 0 -92px no-repeat;
       
}
       
.btns span.dwprev {
           
background: url(//repo.bfw.wiki/bfwrepo/images/intro/bg.png) 0 -116px no-repeat;
       
}
       
.btns span.dwnext {
           
background: url(//repo.bfw.wiki/bfwrepo/images/intro/bg.png) 0 -140px no-repeat;
       
}

       
.prog {
           
position: relative;
           
width: 102px;
           
float: right;
           
height: 14px;
           
line-height: 0;
           
font-size: 0;
           
border: 1px solid #8fb0fd;
           
margin: 7px 8px 0 0;
           
background: #fff;
           
display: inline;
       
}
       
.ress {
           
float: left;
           
width: 1px;
           
height: 12px;
           
border: 1px solid #ebf3fe;
           
background: url(//repo.bfw.wiki/bfwrepo/images/intro/bg.png) 0 -303px repeat-x;
       
}
       
.ptip {
           
position: absolute;
           
width: auto;
           
padding-bottom: 13px;
           
background: url(//repo.bfw.wiki/bfwrepo/images/intro/ptip.png) bottom center no-repeat #fff;
           
bottom: 18px;
           
left: 0;
       
}
       
.ptip span {
           
display: block;
           
padding: 5px;
           
font-size: 12px;
           
line-height: normal;
           
white-space: nowrap;
           
border: 1px solid #8aadfd;
           
text-align: center;
           
border-bottom: none;
       
}

       
.temp {
           
float: left;
           
padding-left: 10px;
           
line-height: 32px;
           
width: 120px;
       
}
       
.war {
           
position: absolute;
           
text-align: center;
           
width: 120px;
           
height: 24px;
           
line-height: 24px;
           
color: #c00;
           
background: #F5E8E0;
           
color: #c00;
           
border: 2px solid #f60;
           
top: 80px;
           
left: 150px;
           
display: none;
       
}
       
.loader {
           
text-align: center;
           
margin: 140px auto 0;
       
}
       
.loader img {
           
margin: 0 auto;
           
display: block;
       
}

       
.info {
           
width: 420px;
           
margin: 10px 20px;
           
color: #555;
       
}
       
.info h4 {
           
height: 24px;
           
line-height: 24px;
           
font-size: 16px;
           
border-bottom: 2px solid #eee;
           
margin-bottom: 8px;
       
}
       
.info p {
           
line-height: 20px;
       
}
       
.info p cite {
           
float: right;
           
font-size: 11px;
           
font-weight: 100;
           
font-style: normal;
       
}

   
</style>

   
<title>测试</title>

   
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
   
<script>


        $(document).ready(function() {
            var i = 0;
            var sld = 0;
            var res = 0;
            var len = $("#issue").find(".........完整代码请登录后点击上方下载按钮下载查看

网友评论0