DOM and BOM programming based on JS-JS Tutorial-php.cn

DOM and BOM programming based on JS

零到壹度

Release： 2018-03-23 09:48:19

Original

1560 people have browsed it

This article mainly shares with you the basics of JS DOM and BOM programming, mainly in the form of code. I hope it can help everyone.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/**
 * @author Administrator
 */
//通过js创建年,月,日
//获取Dom
var dom = window.document;
function myYear() {
//获取年的select
var year = dom.getElementById("year");
//创建年
var minYear = 1900;
var maxYear = new Date().getFullYear();
for (var i = minYear; i <= maxYear; i++) {
//创建Option
var opt = dom.createElement("option");
//设置Option,标签体.
opt.innerHTML = i;
opt.value = i;
//挂载节点
year.appendChild(opt);
}
}
function myMonth() {
var month = dom.getElementById("month");
//创建月
for (var i = 1; i <= 12; i++) {
//创建Option
var opt = dom.createElement("option");
//设置Option,标签体.
if (i < 10) {
opt.innerHTML = "0" + i;
opt.value = i;
} else {
opt.innerHTML = i;
opt.value = i;
}
month.appendChild(opt);
}
month.onchange = myDay;
}
function myDay() {
clear();
//创建天
// 大月1 3 5 7 8 10 12 ,小月4 6 9 11    闰年2月 非闰年的2月
//获取年
var year = dom.getElementById("year").value;
//获取月
var month = dom.getElementById("month").value;
if (year == "") {
alert("请选择年");
return;
}
if (month == "") {
alert("请选择月");
return;
}
//获取天select
var day = dom.getElementById("day");
//一个月至少有28天.
for (var i = 1; i <= 28; i++) {
var opt = dom.createElement("option");
if (i < 10) {
opt.innerHTML = "0" + i;
opt.value = "0" + i;
} else {
opt.innerHTML = i;
opt.value = i;
}
day.appendChild(opt);
}
//大月
var isBigMonth = month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12;
//小月
var isSmallMonth = month == 4 || month == 6 || month == 9 || month == 11;
//闰年    可以整除4但不能整除100 或者 年份可以整除400.
var isLeapYear = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
//判断,如果是大月,添加3天
if (isBigMonth) {
//添加3天
for (var i = 29; i <= 31; i++) {
var opt = dom.createElement("option");
opt.innerHTML = i;
opt.value = i;
day.appendChild(opt);
}
} else if (isSmallMonth) {
//添加2天
for (var i = 29; i <= 30; i++) {
var opt = dom.createElement("option");
opt.innerHTML = i;
opt.value = i;
day.appendChild(opt);
}
} else if (isLeapYear) {
//如果是闰年,添加一天.专门处理闰年2月.
var opt = dom.createElement("option");
opt.innerHTML = 29;
opt.value = 29;
day.appendChild(opt);
}
}
function clear() {
var day = dom.getElementById("day");
var optArr = day.childNodes;
for (var i = optArr.length - 1; i >= 0; i--) {
day.removeChild(optArr[i]);
}
}
function getBirthday() {
//获取Dom
var dom = window.document;
myYear();
myMonth();
}
getBirthday();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body>
生日:
<select id="year">
<option>年</option>
</select>
<select id="month">
<option>月</option>
</select>
<select id="day">
<option>日</option>
</select>
</body>
</html>

Copy after login

Related recommendations:

Javascript BOM and DOM explanation

BOM&&DOM based on javaScript

Learning DOM and BOM in JS

The above is the detailed content of DOM and BOM programming based on JS. For more information, please follow other related articles on the PHP Chinese website!