ajax获取json形式得题目和答案 实现答题功能
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/public.css"/> <style> .col-container{ margin:30px auto; background:#ccc; line-height: 2.5; font-size: 16px; min-height: 180px; } .answer{ margin:0 auto; text-align: center; cursor: pointer; } .btn{ width:100px; height:30px; line-height:28px; text-align: center; background:#c01110; color:#fff; cursor: pointer; border-radius: 5px; margin:10px } .answer.suc{ background:#08b573; color:#fff; } .answer.fail{ background: red; color:#fff; } .answer-layer{ display: none; height:30px; line-height:30px; background:#c0bcbc; cursor: pointer; color:#fff; position: absolute; top: 50%; left:50%; margin-top:-15px; z-index: 999; font-size: 16px; padding:0 20px; } </style> </head> <body> <div class="col-container"> <h3 class="tc"></h3> <div class="col-sm-6"> <div class="answer answerA"> <em>A</em>:<span></span> </div> </div> <div class="col-sm-6"> <div class="answer answerB"> <em>B</em>:<span></span> </div> </div> <div class="col-sm-6"> <div class="answer answerC"> <em>C</em>:<span></span> </div> </div> <div class="col-sm-6"> <div class="answer answerD"> <em>D</em>:<span></span> </div> </div> <div class="btn fr"> 下一题 </div> </div> <div class="answer-layer"></div> </body> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/method.js"></script> <script> var _eq= 0,score=0; getCon(_eq); function getCon(num){ $.post("js/questions.json",function(data){ var _answer=$(".answer"); $("h3").html(data[num].tit); $(".answerA span").html(data[num].answer[0]); $(".answerB span").html(data[num].answer[1]); $(".answerC span").html(data[num].answer[2]); $(".answerD span").html(data[num].answer[3]); var $key=data[num].key; _answer.on("click",function(){ var $num=$(this).find("em").html(); _answer.removeClass("suc fail"); if($num == $key){ $(this).addClass("suc"); }else{ $(this).addClass("fail"); } }); _answer.removeClass("suc fail"); }) } $(".btn").on("click",function(){ var _fail=$(".col-container .fail"),_suc=$(".col-container .suc"); $.post("js/questions.json",function(data){ if(_eq==data.length-1){ if(_fail.length == 0){ $(".col-container").html("您的成绩"+(score+1)); }else{ $(".col-container").html("您的成绩"+score); } }else{ if(_eq==data.length-2){ $(".btn").html("完成"); } if(_fail.length == 0 && _suc.length == 0){ method.msg_fade($(".answer-layer"),2000,"请选择答案") }else if(_fail.length == 0){ ++_eq; getCon(_eq); ++score; }else{ method.msg_fade($(".answer-layer"),2000,"请选择正确答案!"); } } }); }) </script> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/public.css"/> <style> .col-container{ margin:30px auto; background:#ccc; line-height: 2.5; font-size: 16px; min-height: 180px; text-align: center; } .answer{ margin:0 auto; text-align: center; cursor: pointer; } .btn,.btn1{ display: none; width:100px; height:30px; line-height:28px; text-align: center; color:#fff; cursor: pointer; border-radius: 5px; margin:10px } .btn1{ background:#7B7A7A; } .btn{ background:#c01110; } .answer.suc{ background:#08b573; color:#fff; } .answer.fail{ background: red; color:#fff; } .answer-layer{ display: none; height:30px; line-height:30px; background:#c0bcbc; cursor: pointer; color:#fff; position: absolute; top: 50%; left:50%; margin-top:-15px; z-index: 999; font-size: 16px; padding:0 20px; } </style> </head> <body> <div class="col-container"> <h3 class="tc"></h3> <div class="col-sm-6"> <div class="answer answerA"> <em>A</em>:<span></span> </div> </div> <div class="col-sm-6"> <div class="answer answerB"> <em>B</em>:<span></span> </div> </div> <div class="col-sm-6"> <div class="answer answerC"> <em>C</em>:<span></span> </div> </div> <div class="col-sm-6"> <div class="answer answerD"> <em>D</em>:<span></span> </div> </div> <div class="btn1 fl"> 上一题 </div> <div class="btn fr"> 下一题 </div> </div> <div class="answer-layer"></div> </body> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/method.js"></script> <script> var _eq= 0,score= 0,_answer=$(".answer"),ary=[],ary1=[]; getCon(_eq); function getCon(num){ $.post("js/questions.json",function(data){ if(data[num]){ $("h3").html(data[num].tit); $(".answerA span").html(data[num].answer[0]); $(".answerB span").html(data[num].answer[1]); $(".answerC span").html(data[num].answer[2]); $(".answerD span").html(data[num].answer[3]); _answer.removeClass("suc fail"); } }) } var _fail=$(".col-container .fail"),_suc=$(".col-container .suc"); $(".btn1").on("click",function(){ if(_eq >= 1){ --_eq; getCon(_eq); if(ary[_eq] == 1){ --score; } setTimeout(function(){ ary.pop(); ary1.pop(); },500); }else if(_eq == 1){ _eq=0; }else{ alert("已经是第一题") } setTimeout(function(){ var $answer=$(".answer"); $answer.each(function(){ if($(this).find("em").html() == ary1[_eq]){ if(ary[_eq] == 1){ $(this).addClass("suc") }else{ $(this).addClass("fail") } } }); },200); }); _answer.on("click",function(){ var $num=$(this).find("em").html(),$this=$(this); _answer.removeClass("suc fail"); $.post("js/questions.json",function(data){ if(data[_eq]){ var $key=data[_eq].key; if($num == $key){ $this.addClass("suc"); //正确的时候添加1 ary.push(1); ++score; }else{ $this.addClass("fail"); //错误得时候添加0 ary.push(0); } } ary1.push($num); ++_eq; if(_eq>=1){ $(".btn1").fadeIn(500) } if(_eq==data.length){ window.setTimeout(function(){ $(".col-container").html("您的成绩:"+score+"分"); },500); return false; }else{ window.setTimeout(function(){ getCon(_eq); },500) } }); }); </script> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>答题-无正确性验证</title> <link rel="stylesheet" href="css/public.css"/> <style> .col-container{ margin:30px auto; background:#ccc; line-height: 2.5; font-size: 16px; min-height: 180px; text-align: center; } .answer{ margin:0 auto; text-align: center; cursor: pointer; } .btn,.btn1{ display: none; width:100px; height:30px; line-height:28px; text-align: center; color:#fff; cursor: pointer; border-radius: 5px; margin:10px } .btn1{ background:#7B7A7A; } .answer.selected{ background:#00c1de; color:#fff; } .answer-layer{ display: none; height:30px; line-height:30px; background:#c0bcbc; cursor: pointer; color:#fff; position: absolute; top: 50%; left:50%; margin-top:-15px; z-index: 999; font-size: 16px; padding:0 20px; } </style> </head> <body> <div class="col-container"> <h3 class="tc"></h3> <div class="col-sm-6"> <div class="answer answerA" rel="1"> <em>A</em>:<span></span> </div> </div> <div class="col-sm-6"> <div class="answer answerB" rel="2"> <em>B</em>:<span></span> </div> </div> <div class="col-sm-6"> <div class="answer answerC" rel="3"> <em>C</em>:<span></span> </div> </div> <div class="col-sm-6"> <div class="answer answerD" rel="4"> <em>D</em>:<span></span> </div> </div> <div class="btn1 fl"> 上一题 </div> </div> <div class="answer-layer"></div> </body> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/method.js"></script> <script> var _eq= 0,score= 0,_answer=$(".answer"),ary=[],ary1=[]; getCon(_eq); function getCon(num){ $.post("js/questions.json",function(data){ if(data[num]){ $("h3").html(data[num].tit); $(".answerA span").html(data[num].answer[0]); $(".answerB span").html(data[num].answer[1]); $(".answerC span").html(data[num].answer[2]); $(".answerD span").html(data[num].answer[3]); _answer.removeClass("selected suc fail"); } }) } var _fail=$(".col-container .fail"),_suc=$(".col-container .suc"); $(".btn1").on("click",function(){ if(_eq >= 1){ --_eq; getCon(_eq); if(ary[_eq] == 1){ --score; } setTimeout(function(){ ary.pop(); ary1.pop(); },500); }else if(_eq == 1){ _eq=0; }else{ alert("已经是第一题") } setTimeout(function(){ var $answer=$(".answer"); $answer.each(function(){ if($(this).find("em").html() == ary1[_eq]){ $(this).addClass("selected"); } }); },200); }); _answer.on("click",function(){ var $num=$(this).find("em").html(),$this=$(this); _answer.removeClass("selected suc fail"); $.post("js/questions.json",function(data){ if(data[_eq]){ var $key=data[_eq].key; $this.addClass("selected"); if($num == $key){ $this.addClass("suc"); //正确的时候添加1 ary.push(1); ++score; }else{ $this.addClass("fail"); //错误得时候添加0 ary.push(0); } } ary1.push($num); ++_eq; if(_eq>=1){ $(".btn1").fadeIn(500) } if(_eq==data.length){ window.setTimeout(function(){ $(".col-container").html("您的成绩:"+score+"分"); },500); return false; }else{ window.setTimeout(function(){ getCon(_eq); },500) } }); }); </script> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var method={ msg_fade:function(ele,time,msg){ //弹出信息框,显示几秒后自动消失 //ele表示需要显示的元素,time表示时间,msg表示弹框中的内容 var msg_timer=null; if(msg){ ele.html(msg); } var _wid=ele.width(); ele.css("margin-left",-_wid/2); ele.fadeIn(); msg_timer=window.setTimeout(function(){ msg_timer=null; clearTimeout(msg_timer); ele.fadeOut(); },time) } };
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
[ { "tit":"问题1", "answer":[ "选项1A", "选项1B", "选项1C", "选项1D" ], "key":"A" }, { "tit":"问题2", "answer":[ "选项2A", "选项2B", "选项2C", "选项2D" ], "key":"B" }, { "tit":"问题3", "answer":[ "选项3A", "选项3B", "选项3C", "选项3D" ], "key":"C" }, { "tit":"问题4", "answer":[ "选项4A", "选项4B", "选项4C", "选项4D" ], "key":"D" }, { "tit":"问题5", "answer":[ "选项5A", "选项5B", "选项5C", "选项5D" ], "key":"B" }, { "tit":"问题6", "answer":[ "选项6A", "选项6B", "选项6C", "选项6D" ], "key":"A" }, { "tit":"问题7", "answer":[ "选项7A", "选项7B", "选项7C", "选项7D" ], "key":"D" }, { "tit":"问题8", "answer":[ "选项8A", "选项8B", "选项8C", "选项8D" ], "key":"C" } ]
注:1、三个版本都是答题结束时显示得分。
2、此文仅作为学习笔记,没有做过多美化
3、希望大家共同学习,如发现有可以优化的地方或好的建议,烦请留言 多多指点!不胜感激