DOM(三)-03-(示例-性格测试)
2015-08-20 17:20
302 查看
<!-- 单选按钮演示: 2.性格测试 --> <html> <head> <style type="text/css"> #no1ul{ list-style:none;/*将单选前面的黑点去除*/ margin:0px;/*使选项距离页面左边0,即顶格写*/ } .close{/*类选择器,在没单击“查看测试结果”时,默认将测试结果隐藏*/ display:none; } .open{/*类选择器,在单击“查看测试结果”时,将测试结果显示*/ display:block; } </style> <script type="text/javascript"> function showResult(){ //1.判断是否有答案被选中 //获取所有li节点对象 var collLiNodes = document.getElementsByName("no1"); //判断每个li节点是否被选中 var flag = false;//该标记用于判断是否有答案被选中 var val;//定义一个变量,记录被选中答案的value值 for(var x=0;x<collLiNodes.length;x++){ if(collLiNodes[x].checked){ flag = true;//只能选一个选项,那么在遍历所有li节点时,只要发现一个被选中,就直接break跳出循环 val = collLiNodes[x].value; break; } }//至此,如果有选项被选中,就将flag置为真 if(flag == false){//如果什么答案也没选,此时flag必为false,那么出现错误提示如下 document.getElementById("errinfo").innerHTML = "没有任何答案被选中".fontcolor("red"); document.getElementById("errinfo").className = "open";//将错误提示显示 return; } if(val>=1 && val<=3){//【注意】这里还应该有对val值的健壮性判断,暂时先不写 /* *【注意】因为有两个最终测试结果,用户选择不同的答案会显示不同的结果,但是两个结果始终只能显示其中 *一个。所以当显示1结果时将2结果关闭,当显示2结果时将1结果关闭。 *else中代码同理。 */ document.getElementById("result_1").className = "open"; document.getElementById("result_2").className = "close"; document.getElementById("errinfo").className = "close";//将错误提示隐藏 }else{ document.getElementById("result_1").className = "close"; document.getElementById("result_2").className = "open"; document.getElementById("errinfo").className = "close";//将错误提示隐藏 } } </script> </head> <body> <!-- 性格测试 --> <h2>欢迎您参与性格测试:</h2> <!-- h2是标题标签 --> <div> <h3>第一题:</h3> 您喜欢的水果是什么? <ul id="no1ul"> <li><input type="radio" name="no1" value="1" />葡萄</li> <!-- radio是单选,checkbox是多选 --> <li><input type="radio" name="no1" value="2" />西瓜</li> <li><input type="radio" name="no1" value="3" />苹果</li> <li><input type="radio" name="no1" value="4" />芒果</li> <li><input type="radio" name="no1" value="5" />樱桃</li> </ul> </div> <div> <input type="button" value="查看测试结果" onclick="showResult()"/> <hr/> <span id="errinfo" class="close"></span> <div id="result_1" class="close">1-3分:您的性格内向并扭曲,建议...</div> <!-- 用类选择器定义样式 --> <div id="result_2" class="close">4分以上:您的性格外向并分裂,建议...</div> </div> </body> </html>
相关文章推荐
- J-5 Java语言基础
- recyclerview的基本用法(一)
- DOM(三)-02-(示例-调查问卷)
- 单例的完整写法
- 对于公司网站架构的一些感慨~
- Android L 5.0版本获取topActivity的方法
- iOS时间处理之时间对比 by Nicky.Tsui
- JPA & Hibernate 注解
- 调试lldb命令常用
- Java jdbc事物回滚处理,纯手工打造
- twistd内置服务
- dilate函数
- 40个高质量Java开发者博客
- DOM(三)-01-(示例-邮件列表)
- 读取bq26500电池电量 Driver
- Oracle自增序列
- struts2用户是否登录拦截器,拦截之后异步跳转到登录页面
- 【转】Eclipse配置Struts2问题:ClassNotFoundException: org...dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
- 安卓突击:Android 动画有哪几种?
- 如何识别真正的程序员