这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 日期选择功能, 结合实例形式分析了 javascript 日期与时间相关操作技巧, 需要的朋友可以参考下
本文实例讲述了 JavaScript 日期选择功能。分享给大家供大家参考,具体如下:
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta charset="utf-8">
- <title>
- javascript日期选择
- </title>
- <style type="text/CSS">
- option{ width:150px; }
- </style>
- </head>
- <body>
- <!--<input type="hidden" value="window.location.href" />
- -->
- <br />
- <div id="dateOp">
- <select id="selectYear" onchange="getDay()">
- </select>
- 年
- <select id="selectMonth" onchange="getDay()">
- </select>
- 月
- <select id="selectDay">
- </select>
- 日
- <input type="button" value="getdate" />
- </div>
- <script type="text/javascript">
- //或得当前年月日
- var date = new Date();
- var year = date.getFullYear();
- var month = date.getMonth() + 1;
- var day = date.getDate();
- var startYear = 2000;
- var endYear = 2050;
- var button = document.getElementsByTagName("input")[0];
- //得到三个select项
- var selectYearElement = document.getElementById("selectYear");
- var selectMonthElement = document.getElementById("selectMonth");
- var selectDayElement = document.getElementById("selectDay");
- //selectYearElement.onchange = getDay();
- //selectMonthElement.onchange = getDay();
- //selectYearElement.addEventListener
- getYear();
- getMonth();
- getDay();
- //年份函数
- function getYear() {
- for (var i = startYear; i <= endYear; i++) {
- var opYearElement = document.createElement("option");
- var textElement = document.createTextNode(i);
- opYearElement.appendChild(textElement);
- opYearElement.value = i;
- selectYearElement.appendChild(opYearElement);
- }
- //设置默认年份的值
- selectYearElement.selectedIndex = year - startYear;
- }
- //月份函数
- function getMonth() {
- for (var i = 1; i <= 12; i++) {
- var opMonthElement = document.createElement("option");
- textMonth = document.createTextNode(i);
- opMonthElement.appendChild(textMonth);
- opMonthElement.value = i;
- selectMonthElement.appendChild(opMonthElement);
- }
- //设置默认年份的值
- selectMonthElement.selectedIndex = month - 1;
- }
- //日期函数
- function getDay() {
- var getSelectedYear = selectYearElement.selectedIndex + startYear;
- var getSelectedMonth = selectMonthElement.selectedIndex + 1;
- var flag = 0;
- var selectDayElement = document.getElementById("selectDay");
- if (selectDayElement.hasChildNodes()) {
- var optionElements = selectDayElement.getElementsByTagName("option");
- for (var i = 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);
- } else if (getSelectedMonth <= 7 && getSelectedMonth == 2) {
- setDay(flag = 29);
- } else if ((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);
- } else if (getSelectedMonth <= 7 && getSelectedMonth == 2) {
- setDay(flag = 28);
- } else if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 0 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 1)) { //得到小月份除二月以外
- setDay(flag = 30);
- }
- }
- }
- //设置默认年份的值
- selectDayElement.selectedIndex = day - 1;
- function setDay(dayLength) {
- for (var i = 1; i <= dayLength; i++) {
- var opDayElement = document.createElement("option");
- textMonth = document.createTextNode(i);
- opDayElement.appendChild(textMonth);
- opDayElement.value = i;
- //alert(i);
- selectDayElement.appendChild(opDayElement);
- }
- }
- button.onclick = function() {
- var getSelectedYear = selectYearElement.selectedIndex + startYear;
- var getSelectedMonth = selectMonthElement.selectedIndex + 1;
- var getSelectedDay = selectDayElement.selectedIndex + 1;
- alert("当前选中的日期是:" + getSelectedYear + "年" + getSelectedMonth + "月" + getSelectedDay + "日")
- }
- //getDay
- </script>
- </body>
- </html>
运行效果图如下:
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0718/328490.html