有的是ajax 一个一个的传值调用.有的是一个链接一个链接的跳转
举个简单的静态例子
5道题,5个div层,第一个层显示,其余隐藏
每打一次题,答案和正确答案用js对比,对比正确则本题所在层隐藏,下一道题显示,依次类推,全部答对后js跳转.
当然这是静态的方法,懂点html的都能跳过你的问题.
一般情况下是用ajax跟数据库动态比对.
手写 jq框架自己替换 其他直接复制运行就行了 采纳<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="demo">
<div class="list">
<p id="question"></p>
<p id="answers"></p>
<p id="correctAnswer">正确答案:<span></span></p>
</div>
<div class="list">
<button id="next">下一题</button>
<button id="prev">上一题</button>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script>
var init={'questions':[
{'question':'jQuery是什么?','answers':['JavaScript库','CSS库','PHP框架','以上都不是'],'correctAnswer':1},
{'question':'找出不同类的一项?','answers':['写字台','沙发','电视','桌布'],'correctAnswer':3},
{'question':'国土面积最大的国家是:','answers':['美国','中国','俄罗斯','加拿大'],'correctAnswer':3},
{'question':'月亮距离地球多远?','answers':['18万公里','38万公里','100万公里','180万公里'],'correctAnswer':2}]}
var questions = init.questions
var mathLen = questions.length
var mathNum = parseInt(mathLen*Math.random())
function setHtml(num){
var mathTitle = questions[num].question
var mathAnswer = questions[num].answers
var correctAnswer = questions[num].correctAnswer
var span = ""
for (var i=0i<mathAnswer.lengthi++) {
span+="<span style='margin-right:10px'>"+mathAnswer[i]+"</span>"
}
$("#question").html(mathTitle)
$("#answers").html(span)
$("#correctAnswer span").html(correctAnswer)
}
$(function(){
setHtml(mathNum)
$("#next").click(function(){
if(mathNum==mathLen-1){
mathNum=0
setHtml(mathNum)
}else{
mathNum = mathNum+1
setHtml(mathNum)
}
})
$("#prev").click(function(){
if(mathNum==0){
mathNum=mathLen-1
setHtml(mathNum)
}else{
mathNum = mathNum-1
setHtml(mathNum)
}
})
})
</script>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)