dom练习题

Posted 2020-09-06 梦深深处

1、JS制作一个时间表

window.setInterval("time_change()",1000);（setInterval是设置世间周期，可按照指定的周期(以毫秒计)来调用函数或计算表达式。）
function time_change()
{
var date_time=new Date();
document.getElementById("time").innerText=
date_time.getFullYear()+":"+date_time.getMonth()+":"+date_time.getDate()+":"
+date_time.getHours()+":"+date_time.getMinutes()+":"+date_time. getSeconds()
}

2、让两个列表实现左右移动互换的效果

<script>

document.getElementById("btn_to_right").onclick=function(){
var index=document.getElementById("s1").selectedIndex;
var options=document.getElementById("s1").selectedOptions;
document.getElementById("s2").appendChild(options[0])
document.getElementById("s1").removeChild(options[0]);
}
document.getElementById("btn_to_left").onclick=function(){
var index=document.getElementById("s2").selectedIndex;
var options=document.getElementById("s2").selectedOptions;
document.getElementById("s1").appendChild(options[0])(appendChind是添加子元素)
document.getElementById("s2").removeChild(options[0]);（removeChild是移除子元素）
}
</script>

3、年月日的日期时间选择

<select id="year">

</select>
<select id="month">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select id="day">

</select>

<script>
var date_time = new Date();
date_year = date_time.getFullYear();
for(var i = date_year - 30; i < date_year + 40; i++) {

var op = document.createElement("option");（createElement是创建一个新元素）

op.value = i;
op.innerText = i;
if(i == date_year) {
op.selected = true;
}

document.getElementById("year").appendChild(op);
}

function add_day(max_day) {
for(var i = 1; i < max_day; i++) {
var op = document.createElement("option");
op.innerText = i;
document.getElementById("day").appendChild(op);
}
}
document.getElementById("month").onchange = function() {
var month_se = document.getElementById("month").selectedOptions[0].innerText;
// alert(month_se);
if(month_se == 1 || month_se == 3 || month_se == 5 || month_se == 7 || month_se == 8 || month_se == 10 || month_se == 12) {
add_day(32);
} else if(month_se == 2) {
var year_se = document.getElementById("year").selectedOptions[0].innerText;
if(year_se % 4 == 0 && year_se % 100 != 0 || year_se % 400 == 0) {
add_day(30);
} else {
add_day(29);
}
} else {
add_day(31);
}
}
</script>