带进度条的性格测试题代码，答题后表现测试功效

发布时间：2018-08-17 10:09:56 所属栏目：运营来源：站长网

导读：基于 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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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

OPPO概念机泄露，5000	华为找到了让手机支持
Redmi K50 Pro屏幕升级	天玑8100电竞旗舰仅要