ホームページ > 記事 > ウェブフロントエンド > JS に基づいた DOM および BOM プログラミング

JS に基づいた DOM および BOM プログラミング

零到壹度オリジナル: 2018-03-23 09:48:191556ブラウズ

この記事では、主に JS の基本的な DOM および BOM プログラミングについて、主にコードの形式で説明します。これが皆様のお役に立てれば幸いです。

<!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>

JS に基づいた DOM および BOM プログラミング

関連記事