两个练习：
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>
注意代码编写过程中的排版问题。