示例-性格测试 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>性格测试</title>
  6 <style type="text/css">
  7     #contentid{
  8         display:none;
  9         }
 10     #no1ul{
 11         list-style:none;
 12         }
 13     .close{
 14         display:none;
 15         }
 16     .open{
 17         display:block;
 18         }
 19 </style>
 20 </head>
 21 
 22 <body>
 23     <!--单选按钮演示 。
 24     1、是否参与调查问卷？
 25     2、性格测试
 26     -->
 27     <script type="text/javascript">
 28         function showContent(node){
 29             
 30             var oDivNode = document.getElementById("contentid");
 31             
 32             with(oDivNode.style){
 33                 if(node.value=='yes'){
 34                     display="block";
 35                 }
 36                 else
 37                 {
 38                     display="none";
 39                 }
 40             }
 41         }
 42         
 43         function showResult(){
 44             
 45                 //1、判断是否有答案被选中。
 46                 //获取所有no1的radio。并遍历判断checked状态。
 47                 var oNo1Nodes = document.getElementsByName("no1");
 48                 
 49                 var flag = false;
 50                 var val;
 51                 
 52                 for(var x=0;x<oNo1Nodes.length;x++){
 53                         if(oNo1Nodes[x].checked){
 54                                 flag = true;
 55                                 
 56                                 val = oNo1Nodes[x].value;
 57                                 break;
 58                             }
 59                     }
 60                     
 61                 if(!flag){
 62                         document.getElementById("errinfo").innerHTML="没有答案被选中".fontcolor("red");
 63                         return;
 64                     }
 65                     
 66                 if(val>=1 && val<=3){
 67                         document.getElementById("res_1").className="open";
 68                         document.getElementById("res_2").className="close";
 69                     }
 70                 else{
 71                         document.getElementById("res_1").className="close";
 72                         document.getElementById("res_2").className="open";
 73                     }
 74             }
 75     </script>
 76     <!--问卷调查-->
 77     <div>
 78         <input type="radio" name="wenjuan" value="yes" onclick="showContent(this)" />是
 79         <input type="radio" name="wenjuan" value="no" checked="checked" onclick="showContent(this)" />否
 80     </div>
 81     <div id="contentid">
 82         问卷调查：<br/>
 83         您的姓名：<input type="text" /><br/>
 84         您的邮箱：<input type="text" />
 85     </div>
 86     
 87     <!--性格测试-->
 88     <h2>欢迎您参与性格测试</h2>
 89     <div>
 90         <h3>第一题：</h3>
 91         <span>您喜欢的水果是什么？</span>
 92         <ul id="no1nl">
 93             <li><input type="radio" name="no1" value="1"/>葡萄</li>
 94             <li><input type="radio" name="no1" value="2"/>西瓜</li>
 95             <li><input type="radio" name="no1" value="3"/>苹果</li>
 96             <li><input type="radio" name="no1" value="4"/>芒果</li>
 97             <li><input type="radio" name="no1" value="5"/>樱桃</li>
 98         </ul>
 99     </div>
100     <div>
101         <input type="button" value="查看测试结果" onclick="showResult()"/>
102         <span id="errinfo"></span>
103         <div id="res_1" class="close">1-3分：您的性格内向并扭曲，建议。。。</div>
104         <div id="res_2" class="close">4分以上：您的性格外向并分裂，建议。。。</div>
105     </div>
106     
107 </body>
108 </html>
View Code

 

posted @ 2014-06-12 21:02  是但哥  阅读(211)  评论(0)    收藏  举报