您的位置：首页 > 其它
示例-性格测试

2014-06-12 21:02 218 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>性格测试</title>
<style type="text/css">
#contentid{
display:none;
}
#no1ul{
list-style:none;
}
.close{
display:none;
}
.open{
display:block;
}
</style>
</head>

<body>
<!--单选按钮演示 。
1、是否参与调查问卷？
2、性格测试
-->
<script type="text/javascript">
function showContent(node){

var oDivNode = document.getElementById("contentid");

with(oDivNode.style){
if(node.value=='yes'){
display="block";
}
else
{
display="none";
}
}
}

function showResult(){

//1、判断是否有答案被选中。
//获取所有no1的radio。并遍历判断checked状态。
var oNo1Nodes = document.getElementsByName("no1");

var flag = false;
var val;

for(var x=0;x<oNo1Nodes.length;x++){
if(oNo1Nodes[x].checked){
flag = true;

val = oNo1Nodes[x].value;
break;
}
}

if(!flag){
document.getElementById("errinfo").innerHTML="没有答案被选中".fontcolor("red");
return;
}

if(val>=1 && val<=3){
document.getElementById("res_1").className="open";
document.getElementById("res_2").className="close";
}
else{
document.getElementById("res_1").className="close";
document.getElementById("res_2").className="open";
}
}
</script>
<!--问卷调查-->
<div>
<input type="radio" name="wenjuan" value="yes" onclick="showContent(this)" />是
<input type="radio" name="wenjuan" value="no" checked="checked" onclick="showContent(this)" />否
</div>
<div id="contentid">
问卷调查：<br/>
您的姓名：<input type="text" /><br/>
您的邮箱：<input type="text" />
</div>

<!--性格测试-->
<h2>欢迎您参与性格测试</h2>
<div>
<h3>第一题：</h3>
<span>您喜欢的水果是什么？</span>
<ul id="no1nl">
<li><input type="radio" name="no1" value="1"/>葡萄</li>
<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()"/>
<span id="errinfo"></span>
<div id="res_1" class="close">1-3分：您的性格内向并扭曲，建议。。。</div>
<div id="res_2" class="close">4分以上：您的性格外向并分裂，建议。。。</div>
</div>

</body>
</html>
View Code
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航