DOM(三)-03-(示例-性格测试)
来源:互联网 发布:华为记录运动数据 编辑:程序博客网 时间:2024/05/19 12:12
<!--单选按钮演示: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>
0 0
- DOM(三)-03-(示例-性格测试)
- DOM(三)-01-(示例-邮件列表)
- DOM(三)-02-(示例-调查问卷)
- 性格测试
- 性格测试
- 性格测试
- 性格测试
- 性格测试
- 性格色彩测试android程序开发之三--dialog(续)
- DOM(三)-04-(示例-下拉菜单-选择颜色)
- DOM(三)-05-(示例-下拉菜单-选择城市)
- DOM(三)-06-(示例-添加删除附件)
- DOM(二)-03-DOM(示例-展开闭合列表)
- MBTI职业性格测试(Psytopic特别版)
- MBTI职业性格测试(Psytopic特别版)
- MBTI职业性格测试(Psytopic特别版)
- MBTI职业性格测试(Psytopic特别版)
- (火星)MBTI职业性格测试
- DOM(三)-02-(示例-调查问卷)
- oracle常用基础命令总结
- TCP三次握手及关闭时的2MSL分析
- 使用 c++ 与 subverison 编写 Commiter 小工具 提交 xxx.xml文件中指定的文件
- f分页问题
- DOM(三)-03-(示例-性格测试)
- jquery给img注册事件
- 通配符和正则表达式的区别
- photoshop 114ps 艺术字教程
- poj3268最短路Dijkstrra
- SQL Server 索引中include的魅力(具有包含性列的索引)
- ZooKeeper典型应用场景一览
- Android笔记(六)利用Intent传递数据
- Apache Karaf配置远程调试