您的位置：首页 > Web前端 > JavaScript

JS实现下拉框时间选择

2015-08-17 16:12 501 查看

使用js实现的一个简单的下拉框时间选择如图：

代码如下：

<html>
<head>
<script type="text/javascript">
window.onload = function () {
var selects = document.getElementsByTagName("select");//通过标签名获取select对象
var date = new Date();
var nowYear = date.getFullYear();//获取当前的年
for (var i = nowYear; i >= nowYear - 100; i--) {
var optionYear = document.createElement("option");
optionYear.innerHTML = i;
optionYear.value = i;
selects[0].appendChild(optionYear);
}
for (var i = 1; i <= 12; i++) {
var optionMonth = document.createElement("option");
optionMonth.innerHTML = i;
optionMonth.value = i;
selects[1].appendChild(optionMonth);
}
getDays(selects[1].value, selects[0].value, selects);
}
// 获取某年某月存在多少天
function getDaysInMonth(month, year) {
var days;
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
days = 31;
} else if (month == 4 || month == 6 || month == 9 || month == 11) {
days = 30;
} else {
if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {     // 判断是否为润二月
days = 29;
} else {
days = 28;
}
}
return days;
}
function setDays() {
var selects = document.getElementsByTagName("select");
var year = selects[0].options[selects[0].selectedIndex].value;
var month = selects[1].options[selects[1].selectedIndex].value;
getDays(month, year, selects);
}
function getDays(month, year, selects) {
var days = getDaysInMonth(month, year);
selects[2].options.length = 0;
for (var i = 1; i <= days; i++) {
var optionDay = document.createElement("option");
optionDay.innerHTML = i;
optionDay.value = i;
selects[2].appendChild(optionDay);
}
}
</script>
</head>
<body>
<div class="date1">

<select onchange="setDays()"></select>
<span>年</span>
<select onchange="setDays()"></select>
<span>月</span>
<select></select>
<span>日</span>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 下拉时间选择框

相关文章推荐

新的分享

章节导航