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> |
相关推荐:
以上就是JS基础之DOM和BOM编程的详细内容,更多请关注其它相关文章!