带进度条的性格测试题代码，答题后显示测试结果

发布时间：2018-08-18 13:50:57 所属栏目：交互来源：站长网

导读：基于 jQuery 实现的、带进度条显示的性格测试题代码，答题后显示测试结果，在一些性格和智力测试网站上经常可以见到，还有一些驾校考试网站也使用这样的效果，但是性质有所不同，还有一些使用Flash实现的。为解决一些网页特效运行后不能显示效果（例如：j

　　基于jQuery实现的、带进度条显示的性格测试题代码，答题后显示测试结果，在一些性格和智力测试网站上经常可以见到，还有一些驾校考试网站也使用这样的效果，但是性质有所不同，还有一些使用Flash实现的。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gbk" /> <title></title> <style type="text/css">  </style> <script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> var result={ "aa":"你是一个小气人", "ab":"你是一个胆小人", "ac":"你是一个勇敢人", "ba":"你是一个软弱人", "bb":"你是一个怕死人", "bc":"你是一个爱美人", "ca":"你是一个自私人", "cb":"你是一个勤劳人", "cc":"你是一个花心人" }; $(function(){ var oP1=$("#Problem1"), oP2=$("#Problem2"), oR=$("#Result"), p=oR.find("p"), oPro=$(".picbg").find("span"), oBtn1=oP1.find(".but"), oBtn2=oP2.find(".but"), oBtn3=oR.find(".but"), data=[]; // oP1.find("input[type='radio']").change(function(){ var choose=oP1.find("input[type='radio']:checked").length; if(choose){ oPro.animate({"width":"50%"},400); } data.push($(this).val()); return data; }); // oBtn1.click(function(){ var choose=oP1.find("input[type='radio']:checked").length; if(choose){ oP2.fadeIn(); oP1.hide(); }else{ alert("请填写第一题"); return false; } }); // oP2.find("input[type='radio']").change(function(){ var choose2=oP2.find("input[type='radio']:checked").length; if(choose2){ oPro.animate({"width":"100%"},400); } data.push($(this).val()); return data; }); // oBtn2.click(function(){ var choose2=oP2.find("input[type='radio']:checked").length; if(choose2){ oP2.hide(); oR.fadeIn(); var index=data[0]+data[1]; p.html(result[index]); }else{ alert("请填写第二题"); return false; } }); // oBtn3.click(function(){ data=[]; oP1.show(); oP2.hide(); oR.hide(); oPro.animate({"width":"0%"},400); $("input[type='radio']").attr("checked",""); }); }); </script> </head> <body> <div class="checkbox"> <div class="progress"> <p><b>测试进度：</b>还剩下 <i>2</i> 个问题，选择答案按下一步转到下一题！</p> <p><span><font face="Webdings">6</font>开始</span><span style="margin-left:50%;"><font face="Webdings">6</font>你在这里</span></p> <p class="picbg"><span style="width:0%;"></span></p> </div> <div class="Test"> <div id="Problem1" > <h3>1.问题:你最喜欢何种样式的内衣？</h3> <form action="" method="get"> <ul> <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="a"/>A.西瓜乳</li> <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="b"/>B.柠檬乳</li> <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="c"/>C.柚子乳</li> </ul> <input type="button" class="but" value="下一步" /> </form> </div> <div id="Problem2" class="hidden" > <h3>2.问题:你最不喜欢何种样式的内衣？</h3> <form action="" method="get"> <ul> <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="a"/>A.西瓜乳</li> <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="b"/>B.柠檬乳</li> <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="c"/>C.柚子乳</li> </ul> <input type="button" class="but" value="查看结果" /> </form> </div> <div id="Result" class="hidden" > <h3>测试结果</h3> <p> </p> <input type="button" class="but" value="重新测试" onclick=""/> </div> </div> </div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!