标签：des style class blog code java
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>
标签：des style class blog code java
原文地址：http://www.cnblogs.com/aineko/p/3784665.html
