网页日期选择器与元素操作-优快云博客

<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:500px; height:500px}
#left{ width:200px; height:500px; float:left}
#zhong{ width:100px; height:500px; float:left}
#right{ width:200px; height:500px; float:left}
</style>
</head>

<body>
<br />
<div id="wai">
	<div id="left">
    	<select style="width:200px; height:300px" id="selleft" multiple="multiple">
        	<option value="山东">山东</option>
            <option value="淄博">淄博</option>
            <option value="张店">张店</option>
        </select>
    </div>
    <div id="zhong">
    	<div style="margin-left:10px; margin-top:20px">
        <input style="width:60px; height:30px" type="button" value=">>" οnclick="moveall()" />
        </div>
      
        <div style="margin-left:10px; margin-top:30px">
        <input style="width:60px; height:30px" type="button" value=">" οnclick="moveone()" />
        </div>
    </div>
	<div id="right">
    	<select id="selright" multiple="multiple" style="width:200px; height:300px"></select>
    </div>
</div>


<script type="text/javascript">

function moveone()
{
	var left = document.getElementById("selleft");
	var right = document.getElementById("selright");
	
	var xz = left.value;
	var str = "<option value='"+xz+"'>"+xz+"</option>";
	//判断
	//alert(right.childNodes.item(0));
	var bs = 0;
	for(var i=0;i<right.childNodes.length;i++)
	{
		if(right.childNodes.item(i).text==xz)
		{
			bs = 1;
		}
	}
	
	if(bs==0)
	{
		//追加
		right.innerHTML = right.innerHTML+str;
	}
}

function moveall()
{
	var left = document.getElementById("selleft");
	var right = document.getElementById("selright");
	
	right.innerHTML = left.innerHTML;
}

</script>

　　年月日的选择

<body>

<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;
    
    if(yue==4 || yue==6 || yue==9 || yue==11)
    {
        ts=30;
    }
    
    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>