两个练习：
1.两个表单里面的数据相互移动：
<style type="text/css">
select {
width: 100px;
position: relative;
float: left;
} #div-out {
width: 100px;
position: relative;
float: left;
height: 113px;
/*border: 1px solid black;*/
} #div-in {
width: 50px;
/*border: 1px solid red;*/
margin: 0px auto;
} input {
margin-top: 22px;
width: 50px;
}
</style>
</head> <body>
<select id="s1" size="7" multiple="multiple">
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
<option>DDD</option>
<option>EEE</option>
</select>
<div id="div-out">
<div id="div-in">
<input type="button" value=">>>" onclick="toright()" />
<input type="button" value="<<<" onclick="toleft()" />
</div>
</div>
<select id="s2" size="7" multiple="multiple"></select>
</body> </html>
<script type="text/javascript">
var opt = document.getElementById("s1").options; function toright() {
for(var i = 0; i < opt.length; i++) {
if(opt[i].selected){
document.getElementById("s2").appendChild(opt[i]);
i--;
}
}
}
</script>
2.时间日期选择（注意闰年的区别）：
<style type="text/css">
select {
width: 100px;
}
</style>
</head> <body>
<select id="year"></select><br /><br />
<select id="month"></select><br /><br />
<select id="day"></select> </body> </html>
<script type="text/javascript">
var time = new Date();
year_now = time.getFullYear();
month_now = time.getMonth() + 1;
for(var i = year_now - 5; i <= year_now + 5; i++) {
if(i == year_now) {
document.getElementById("year").innerHTML += '<option selected="selected">' + i + '</option>';
} else {
document.getElementById("year").innerHTML += '<option>' + i + '</option>';
}
}
for(var i = 1; i <= 12; i++) {
if(i == month_now) {
document.getElementById("month").innerHTML += '<option selected="selected">' + i + '</option>';
} else {
document.getElementById("month").innerHTML += '<option>' + i + '</option>';
} } document.getElementById("month").onchange = function() {
var month = document.getElementById("month");
var day = document.getElementById("day");
for(var i = 1; i <= 12; i++) {
if(month.options[i - 1].selected) {
if(i == 1 || i == 3 || i == 5 || i == 7 || i == 8 || i == 10 || i == 12) {
day.innerHTML ="";
for(var j = 1; j <= 31; j++) {
day.innerHTML += '<option>' + j + '</option>';
}
} else if(i == 4 || i == 6 || i == 9 || i == 11) {
day.innerHTML ="";
for(var j = 1; j <= 30; j++) {
day.innerHTML += '<option>' + j + '</option>';
}
} else {
var year = document.getElementById("year");
for(var i = 0; i < year.options.length; i++) {
if(year.options[i].selected) {
var yy = year.options[i].innerText;
if(yy % 4 == 0 && yy % 100 != 0 || yy % 400 == 0) {
day.innerHTML ="";
for(var j = 1; j <= 29; j++) {
day.innerHTML += '<option>' + j + '</option>';
}
} else {
day.innerHTML ="";
for(var j = 1; j <= 28; j++) {
day.innerHTML += '<option>' + j + '</option>';
}
} }
}
}
}
} }
</script>
注意代码编写过程中的排版问题。