DOM（三）-03-(示例-性格测试)

最新推荐文章于 2024-05-08 16:19:44 发布

wy_0928

最新推荐文章于 2024-05-08 16:19:44 发布

阅读量6k

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47810965

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!--
单选按钮演示：
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="查看测试结果" οnclick="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>