bom练习
今天做了关于两个下拉框中的内容相互移动的特效。代码如下:
<body>
<select size="7" id="s1">
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
<option>DDD</option>
<option>EEE</option>
</select>
<input type="button" id="to-right" value=">>>"/>
<input type="button" id="to-left" value="<<<" />
<select size="7" id="s2"></select>
</body>
<script>
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var to_right = document.getElementById("to-right");
to_right.onclick = function(){
var obj_opt = s1.selectedOptions[0];
var value = obj_opt.innerText;
s2.appendChild(obj_opt)
}
to_left.onclick = function(){
var obj_opt = s2.selectedOptions[0];
var value = obj_opt.innerText;
s1.appendChild(obj_opt)
}
</script>
今天还做了关于时间日历的:
<body>
<select id="year" onchange="getDay()">
<option>--请选择--</option>
</select>
<select id="month" onchange="getDay()">
<option>--请选择--</option>
</select>
<select id="day"></select>
</body>
<script>
var time = new Date();
var year = time.getFullYear();
var obj_year = document.getElementById("year");
var obj_month = document.getElementById("month");
var obj_day = document.getElementById("day");
for(var i = 1900; i <= year; i++) {
obj_year.innerHTML += "<option>" + i + "</option>";
}
for(var i = 1; i <= 12; i++) {
obj_month.innerHTML += "<option>" + i + "</option>";
}
function getDay() {
obj_day.innerHTML = "";
var month = obj_month.selectedOptions[0].innerText;
var day31 = ["1", "3", "5", "7", "8", "10", "12"];
var day30 = ["4", "6", "9", "11"];
if(day31.indexOf(month) != -1) {
for(var i = 1; i <= 31; i++) {
obj_day.innerHTML += "<option>" + i + "</option>";
}
}
if(day30.indexOf(month) != -1) {
for(var i = 1; i <= 30; i++) {
obj_day.innerHTML += "<option>" + i + "</option>";
}
}
if(month == "2") {
var yeared = obj_year.selectedOptions[0].innerText;
if((yeared % 100 != 0 && yeared % 4 == 0) || yeared % 400 == 0) {
for(var i = 1; i <= 29; i++) {
obj_day.innerHTML += "<option>" + i + "</option>";
}
}else{
for(var i = 1; i <= 28; i++) {
obj_day.innerHTML += "<option>" + i + "</option>";
}
}
}
}
</script>