欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JS基础之DOM和BOM编程

程序员文章站 2022-05-12 15:21:14
...
本文主要和大家分享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>

相关推荐:

Javascript之BOM与DOM讲解

javaScript基础之BOM&&DOM

JS中的DOM与BOM学习

以上就是JS基础之DOM和BOM编程的详细内容,更多请关注其它相关文章!

相关标签: JS DOM BOM