基于jQuery实现的、带进度条显示的性格测试题代码，答题后显示测试结果，在一些性格和智力测试网站上经常可以见到，还有一些驾校考试网站也使用这样的效果，但是性质有所不同，还有一些使用Flash实现的。 为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。 点击查看：网页特效 运行演示： <!DOCTYPE html><br /> <html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html;charset=gbk" /><br /> <title></title><br /> <style type="text/css"><br /> <!--<br /> body,td,th {font-size: 12px;}<br /> a {color:#006699; text-decoration:none;}<br /> a:hover {color:#f60;text-decoration:underline;}<br /> dd,dl,ul,li,p,form{ margin:0; padding:0;list-style-type:none;}<br /> h1,h2,h3,h4,h5{font-size:14px;margin:0; padding:0; line-height:28px;}<br /> .but{color:#FF8320; border:1px solid #ccc; background:#fff;cursor:pointer;height:25px; line-height:25px;width:80px;}<br /> /*进度度*/<br /> .checkbox{border:1px solid #FFD7B7; margin:5px auto; background:#FFFBF4; padding:15px; width:600px;}<br /> .progress,.evaluation{color:#666;height:auto;overflow:hidden;width:598px;margin:0 auto;padding:10px 0 10px 0;}<br /> .evaluation div{float:left;}<br /> .progress i{color:#F60;font-weight:700; font-style:normal;}<br /> .progress p{height:26px;width:100%;}<br /> .progress .picbg{background:#fff;height:15px;width:590px; border:1px solid red;}<br /> .progress .picbg span{background:#FF8320;display:block;float:left;height:15px; }<br /> /*问答内容*/<br /> .Test ul{ margin:0; padding:0;}<br /> .Test li{ border:1px solid #FFFBF4; margin-bottom:4px; cursor:pointer; width:100%; height:30px; line-height:30px; padding-left:5px; background:#FFFBF4}<br /> .Test li.myBox{ border:1px solid #e7e7e7; background:#f7f7f7;}<br /> #Problem1,#Problem2,#Problem3{}<br /> .hidden{ display:none;}<br /> #Result p{ margin:8px; padding:8px; line-height:25px;background:#FFF; width:560px; border:1px dotted #FF8E20;}<br /> --><br /> </style><br /> <script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script><br /> <script type="text/javascript"><br /> var result={<br /> "aa":"你是一个小气人",<br /> "ab":"你是一个胆小人",<br /> "ac":"你是一个勇敢人",<br /> "ba":"你是一个软弱人",<br /> "bb":"你是一个怕死人",<br /> "bc":"你是一个爱美人",<br /> "ca":"你是一个自私人",<br /> "cb":"你是一个勤劳人",<br /> "cc":"你是一个花心人"<br /> };<br /> $(function(){<br /> var oP1=$("#Problem1"),<br /> oP2=$("#Problem2"),<br /> oR=$("#Result"),<br /> p=oR.find("p"),<br /> oPro=$(".picbg").find("span"),<br /> oBtn1=oP1.find(".but"),<br /> oBtn2=oP2.find(".but"),<br /> oBtn3=oR.find(".but"),<br /> data=[];<br /> //<br /> oP1.find("input[type='radio']").change(function(){<br /> var choose=oP1.find("input[type='radio']:checked").length;<br /> if(choose){<br /> oPro.animate({"width":"50%"},400);<br /> }<br /> data.push($(this).val());<br /> return data;<br /> });<br /> //<br /> oBtn1.click(function(){<br /> var choose=oP1.find("input[type='radio']:checked").length;<br /> if(choose){<br /> oP2.fadeIn();<br /> oP1.hide();<br /> }else{<br /> alert("请填写第一题");<br /> return false;<br /> }<br /> });<br /> //<br /> oP2.find("input[type='radio']").change(function(){<br /> var choose2=oP2.find("input[type='radio']:checked").length;<br /> if(choose2){<br /> oPro.animate({"width":"100%"},400);<br /> }<br /> data.push($(this).val());<br /> return data;<br /> });<br /> //<br /> oBtn2.click(function(){<br /> var choose2=oP2.find("input[type='radio']:checked").length;<br /> if(choose2){<br /> oP2.hide();<br /> oR.fadeIn();<br /> var index=data[0]+data[1];<br /> p.html(result[index]);<br /> }else{<br /> alert("请填写第二题");<br /> return false;<br /> }<br /> });<br /> //<br /> oBtn3.click(function(){<br /> data=[];<br /> oP1.show();<br /> oP2.hide();<br /> oR.hide();<br /> oPro.animate({"width":"0%"},400);<br /> $("input[type='radio']").attr("checked","");<br /> });<br /> });<br /> </script><br /> </head><br /> <body><br /> <div class="checkbox"><br /> <div class="progress"><br /> <p><b>测试进度：</b>还剩下 <i>2</i> 个问题，选择答案按下一步转到下一题！</p><br /> <p><span><font face="Webdings">6</font>开始</span><span style="margin-left:50%;"><font face="Webdings">6</font>你在这里</span></p><br /> <p class="picbg"><span style="width:0%;"></span></p><br /> </div><br /> <div class="Test"><br /> <div id="Problem1" ><br /> <h3>1.问题:你最喜欢何种样式的内衣？</h3><br /> <form action="" method="get"><br /> <ul><br /> <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="a"/>A.西瓜乳</li><br /> <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="b"/>B.柠檬乳</li><br /> <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="c"/>C.柚子乳</li><br /> </ul><br /> <input type="button" class="but" value="下一步" /><br /> </form><br /> </div><br /> <div id="Problem2" class="hidden" ><br /> <h3>2.问题:你最不喜欢何种样式的内衣？</h3><br /> <form action="" method="get"><br /> <ul><br /> <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="a"/>A.西瓜乳</li><br /> <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="b"/>B.柠檬乳</li><br /> <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="c"/>C.柚子乳</li><br /> </ul><br /> <input type="button" class="but" value="查看结果" /><br /> </form><br /> </div><br /> <div id="Result" class="hidden" ><br /> <h3>测试结果</h3><br /> <p><br /> </p><br /> <input type="button" class="but" value="重新测试" onclick=""/><br /> </div><br /> </div><br /> </div><br /> </body><br /> </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>提示：可修改后代码再运行! 文章导航 网页引入“搜狗云输入法”的实现代码jQuery配合Css模拟五星级评分效果代码
由 dawei