练习题：选择器和选择好友
一、年月日选择器
<select id="nian" onclick="biantian()"></select>年
<select id="yue" onclick="biantian()"></select>月
<select id="tian"></select>日
<script type="text/javascript">
FillNian();
FillYue();
FillTian();
function FillNian()
{
var b = new Date();
var nian = parseInt(b.getFullYear());
var str = "";
for(var i=nian-5;i<nian+6;i++)
{
str = str+"<option value='"+i+"'>"+i+"</option>";
}
document.getElementById("nian").innerHTML = str;
}
//月数
function FillYue()
{
var str = "";
for(var i=1;i<13;i++)
{
str = str+"<option value='"+i+"'>"+i+"</option>";
}
document.getElementById("yue").innerHTML = str;
}
//每月天数的变化
function FillTian()
{
var yue = document.getElementById("yue").value;
var nian = document.getElementById("nian").value;
var ts = 31;
//30号的月数
if(yue==4 || yue==6 || yue==9 || yue==11)
{
ts=30;
}
//2月不同年的天
if(yue==2)
{
if((nian%4==0 && nian%100 != 0) || nian%400==0)
{
ts = 29;
}
else
{
ts = 28;
}
}
var str = "";
for(var i=1;i<ts+1;i++)
{
str = str+"<option value='"+i+"'>"+i+"</option>";
}
document.getElementById("tian").innerHTML = str;
}
function biantian()
{
FillTian();
}
</script>
</body>
二、选择好友
样式：
<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:150px; height:300px;}
.list{ width:150px; height:40px; background-color:#66F; text-align:center; line-height:40px; vertical-align:middle; color:white; border:1px solid white;}
.list:hover{ cursor:pointer; background-color:#00C}
</style>
<body>
<div id="wai">
<div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">淄博</div>
<div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">张店</div>
<div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">桓台</div>
</div>
</body>
<script type="text/javascript">
function xuan(d)
{
//清原来的颜色
var list = document.getElementsByClassName("list");
for(var i=0;i<list.length;i++)
{
list[i].removeAttribute("bs");
list[i].style.backgroundColor = "#66F";
}
//选
d.setAttribute("bs",1);
d.style.backgroundColor = "#00C";
}
function bian(d)
{
//清
var list = document.getElementsByClassName("list");
for(var i=0;i<list.length;i++)
{
if(list[i].getAttribute("bs")!="1")
{
list[i].style.backgroundColor = "#66F";
}
}
//选
d.style.backgroundColor = "#00C";
}
function huifu()
{
var list = document.getElementsByClassName("list");
for(var i=0;i<list.length;i++)
{
if(list[i].getAttribute("bs")!="1")
{
list[i].style.backgroundColor = "#66F";
}
}
}
</script>
