练习题：选择器和选择好友

最新推荐文章于 2024-05-30 11:27:58 发布

diao45615

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量154

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/nuanai/p/6106713.html

版权

一、年月日选择器

<select id="nian" οnclick="biantian()"></select>年
<select id="yue" οnclick="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" οnclick="xuan(this)" οnmοuseοver="bian(this)" οnmοuseοut="huifu()">淄博</div>
	<div class="list" οnclick="xuan(this)" οnmοuseοver="bian(this)" οnmοuseοut="huifu()">张店</div>
    <div class="list" οnclick="xuan(this)" οnmοuseοver="bian(this)" οnmοuseοut="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>

转载于:https://www.cnblogs.com/nuanai/p/6106713.html

diao45615

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习题：选择器和选择好友

一、年月日选择器<select id="nian" onclick="biantian()"></select>年<select id="yue" onclick="biantian()"></select>月<select id="tian"></select>日<script typ...
复制链接

扫一扫