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("div.cnt").length;
var prog = 100; //$("#prog").css("width");
var ht = 420;
var speed = 500;
function setporogress(j) {
i += j;
i = (i < 0)? 0: i;
checkbtn();
if (!$("#info").is(":animated")) {
$("#tips span").html((i+1 > len?len: i+1)+"\/"+len+"题");
var wh = $("#tips").get(0).offsetWidth;
var ress = Math.round(i*prog/len);
$("#ress").css({
"width": ress+"px"
});
$("#tips").css({
"left": ress-Math.round(wh/2)+"px"
});
$("#issue").animate({
"top": -i*ht + "px"
}, 500);
}
}
function selec(ele) {
sld++;
//alert(sld);
ele = $(ele)? $(ele): ele;
ele.parents("div.cnt").addClass("selected");
ele.addClass("sel");
res += parseInt (ele.find("input").val());
if (sld < len) {
$("#temp").html("您目前得分是 "+res);
} else if (sld == len) {
$("#temp").html("您最终得分是 "+res);
}
}
$("#prev").click(function() {
checkbtn();
if (i > 0) {
setporogress(-1)
}
})
$("#next").click(function() {
checkbtn();
if (sld > i) {
setporogress(1)
}
})
$("#issue").find("li").click(function() {
if (!$(this).parents("div.cnt").hasClass("selected")) {
selec(this);
}
setporogress(1);
if (i == len) {
result(res);
}
return false;
})
.hover(
function() {
$(this).addClass("hover")},
function() {
$(this).removeClass("hover")}
)
function result(k) {
var toload;
if (k >= 12 && k <= 18) toloadSTR = `
<div id="re2">
<h3>您的测试结果：</h3>
<p>天哪，不是吧，你就是传说中的人品到底的那种人。真是史无前例啊，你还行不行啊？赶紧回火星吧！</p>
</div>`;
if (k > 18 && k <= 24) toloadSTR = `
<div id="re2">
<h3>您的测试结果：</h3>
<p>天哪，不是吧，你就是传说中的人品到底的那种人。真是史无前例啊，你还行不行啊？赶紧回火星吧！</p>
</div>`;
if (k > 24 && k <= 48) toloadSTR = `
<div id="re2">
<h3>您的测试结果：</h3>
<p>天哪，不是吧，你就是传说中的人品到底的那种人。真是史无前例啊，你还行不行啊？赶紧回火星吧！</p>
</div>`;
$("#result").html(toloadSTR);
}
/* $("div.selected").click(function(){
$(this).find("li").click();
})
*/
function warn(txt) {
$("#war").html(txt).fadeIn(500, function() {
$("#war").html("").fadeOut(500)});
}
function checkbtn() {
if (i <= 0) {
$("#prev").addClass("noprev");
} else {
$("#prev").removeClass("noprev");
}
if (sld <= i) {
$("#next").addClass("nonext");
} else {
$("#next").removeClass("nonext");
}
}
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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