最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JavaScript日期选择功能实例
时间:2017-01-19 编辑:简简单单 来源:一聚教程网
本文实例讲述了JavaScript日期选择功能。分享给大家供大家参考,具体如下:
代码如下 | 复制代码 |
option{ width:150px; }
年 月 日
//或得当前年月日 vardate =newDate(); varyear = date.getFullYear(); varmonth = date.getMonth() + 1; varday = date.getDate(); varstartYear = 2000; varendYear = 2050; varbutton = document.getElementsByTagName("input")[0]; //得到三个select项 varselectYearElement = document.getElementById("selectYear"); varselectMonthElement = document.getElementById("selectMonth"); varselectDayElement = document.getElementById("selectDay"); //selectYearElement.onchange = getDay(); //selectMonthElement.onchange = getDay(); //selectYearElement.addEventListener getYear(); getMonth(); getDay(); //年份函数 functiongetYear() { for(vari = startYear; i <= endYear; i++) { varopYearElement = document.createElement("option"); vartextElement = document.createTextNode(i); opYearElement.appendChild(textElement); opYearElement.value = i; selectYearElement.appendChild(opYearElement); } //设置默认年份的值 selectYearElement.selectedIndex = year - startYear; } //月份函数 functiongetMonth() { for(vari = 1; i <= 12; i++) { varopMonthElement = document.createElement("option"); textMonth = document.createTextNode(i); opMonthElement.appendChild(textMonth); opMonthElement.value = i; selectMonthElement.appendChild(opMonthElement); } //设置默认年份的值 selectMonthElement.selectedIndex = month - 1; } //日期函数 functiongetDay() { vargetSelectedYear = selectYearElement.selectedIndex + startYear; vargetSelectedMonth = selectMonthElement.selectedIndex + 1; varflag = 0; varselectDayElement = document.getElementById("selectDay"); if(selectDayElement.hasChildNodes()) { varoptionElements = selectDayElement.getElementsByTagName("option"); for(vari = 0; i < optionElements.length; i++) { selectDayElement.removeChild(optionElements[0]); //不知道为什么必须得自减一 i--; } } else{ } //得到闰年 if((getSelectedYear % 4 == 0 && getSelectedYear % 100 != 0) || getSelectedYear % 400 == 0) {//得到闰年的年号 //alert("闰年"); //得到闰年大月份除二月以外 if((getSelectedMonth <= 7 && getSelectedMonth % 2 == 1 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 0)) {//得到大月 setDay(flag = 31); } elseif(getSelectedMonth <= 7 && getSelectedMonth == 2) { setDay(flag = 29); } elseif((getSelectedMonth <= 7 && getSelectedMonth % 2 == 0 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 1)) {//得到小月份除二月以外 setDay(flag = 30); } } //非闰年 else{ //alert("平年"); //得到平年大月份除二月以外 if((getSelectedMonth <= 7 && getSelectedMonth % 2 == 1 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 0)) {//得到大月 setDay(flag = 31); } elseif(getSelectedMonth <= 7 && getSelectedMonth == 2) { setDay(flag = 28); } elseif((getSelectedMonth <= 7 && getSelectedMonth % 2 == 0 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 1)) {//得到小月份除二月以外 setDay(flag = 30); } } } //设置默认年份的值 selectDayElement.selectedIndex = day - 1; functionsetDay(dayLength) { for(vari = 1; i <= dayLength; i++) { varopDayElement = document.createElement("option"); textMonth = document.createTextNode(i); opDayElement.appendChild(textMonth); opDayElement.value = i; //alert(i); selectDayElement.appendChild(opDayElement); } } button.onclick =function() { vargetSelectedYear = selectYearElement.selectedIndex + startYear; vargetSelectedMonth = selectMonthElement.selectedIndex + 1; vargetSelectedDay = selectDayElement.selectedIndex + 1; alert("当前选中的日期是:"+ getSelectedYear +"年"+ getSelectedMonth +"月"+ getSelectedDay +"日") } //getDay |
运行效果图如下:
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31