黑马程序员-DOM（第六讲）

问卷调查：

单选按钮演示

1、是否参与调查问卷

2、性格测试

 

<div>

您要参与问卷调查吗？<input type=”radio” name=”wenjuan” value=”yes” onclick=”show(this)”/>是

        <input type=”radio” name=”wenjuan” value=”no” checked=”checked” onclick=”show(this)”/>否

</div>

<div id=”contentid”>

问卷调查内容：

您的姓名：<input type=”text”/>

您的邮箱:<input type=”text”/>

</div>

 

想要的效果是这样的：你若果选择”是“，才显示下面的问卷调查表，如果选择的是”否“，就不显示了。

<style type=”text/css”>

#contentid{

display:none;//就是不显示该id为contentid的区域

}

#no1ul{

list-style:none;//去掉列表前面的点点

margin:0px;  //左边对齐（不要缩进）

}

.close{

display:none;

 

}

.open{

display:block;

}

</style>

 

<script type=”text/javascript”>

function showContent(node)

{

var oDivNode=document.getElementById(“contentid”);

if(node.value==”yes”)

{

oDivNode.style.display=”block”;//显示调查问卷

}

else

{

oDivNode.style.display=”none”;

}

 

}

</script>

 

<script type=”text/javascript”>

function showResult()

{

//判断是否有答案被选中，获取所有的no1的radio，并遍历判断checked状态

var oNolNodes=document.getElementsByName(“no1”);

var flag=fasle;

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>第一题：

你喜欢的水果是什么？(为了让数据竖排，可以弄个列表)

<ul id=”no1ul”>

<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>

<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 class=”clrclass” id=”clr1” style=”background-color:red” onclick=”changeColor(this)”></div>

<div class=”clrclass” id=”clr2” style=”background-color:green” onclick=”changeColor(this)”></div>

<div class=”clrclass” id=”clr3” style=”background-color:blue” onclick=”changeColor(this)”></div>

<div id=”text”>

需要显示效果的文字

</div>

 

<style type=”text/css”>

.clrclass{

height:50px;

width:50px;

float:left;

margin-rigth:30px;

}

.text{

clear:left;

margin-top:20px;

}

</style>

 

 

<script  type=”text/javascript”>

function changeColor(node)

{

var colorVal=node.style.backgroundColor;

ducument.getElementById(“text”).style.color=colorVal;

}

</script>

 

 

现在弄个下拉列表，让其实现相同效果：

<select name=”selectColor” onchange=”changeColor2()”>

<option value=”black”>选择颜色</option>

<option value=”red”>红色</option>

<option value=”green”>绿色</option>

<option value=”blue”>蓝色</option>

</select>

 

<script type=”text/javascript”>

function changeColor2()

{

var oSelectNode=document.getElementsByName(“selectColor”)[0];

//得到所有的option，var collOptionNodes=oSelectNode.options;

var colorVal=oSelectNode.options[oSelectNode.selectedIndex].value;

document.getElementById(“text”).style.color=colorVal;

 

}

</script>