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