用html+css+js写一个可以选择年月日的下拉框
时间: 2023-09-28 12:11:02 浏览: 89
以下是一个简单的HTML + CSS + JS代码示例,可以用于选择年月日:
HTML代码:
```
<div class="date-selector">
<select id="year"></select>
<select id="month"></select>
<select id="day"></select>
</div>
```
CSS代码:
```
.date-selector {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.date-selector select {
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
```
JS代码:
```
// 获取年份列表
function getYearList() {
var yearList = [];
var currentYear = new Date().getFullYear();
for (var i = currentYear; i >= 1900; i--) {
yearList.push(i);
}
return yearList;
}
// 获取月份列表
function getMonthList() {
var monthList = [];
for (var i = 1; i <= 12; i++) {
monthList.push(i);
}
return monthList;
}
// 获取天数列表
function getDayList(year, month) {
var dayList = [];
var daysInMonth = new Date(year, month, 0).getDate();
for (var i = 1; i <= daysInMonth; i++) {
dayList.push(i);
}
return dayList;
}
// 初始化年份下拉框
function initYearSelector() {
var yearSelector = document.getElementById("year");
var yearList = getYearList();
for (var i = 0; i < yearList.length; i++) {
var option = document.createElement("option");
option.value = yearList[i];
option.text = yearList[i];
yearSelector.add(option);
}
}
// 初始化月份下拉框
function initMonthSelector() {
var monthSelector = document.getElementById("month");
var monthList = getMonthList();
for (var i = 0; i < monthList.length; i++) {
var option = document.createElement("option");
option.value = monthList[i];
option.text = monthList[i];
monthSelector.add(option);
}
}
// 初始化天数下拉框
function initDaySelector(year, month) {
var daySelector = document.getElementById("day");
var dayList = getDayList(year, month);
// 清空原有的选项
daySelector.innerHTML = "";
for (var i = 0; i < dayList.length; i++) {
var option = document.createElement("option");
option.value = dayList[i];
option.text = dayList[i];
daySelector.add(option);
}
}
// 初始化日期选择器
function initDateSelector() {
// 初始化年份下拉框
initYearSelector();
// 初始化月份下拉框
initMonthSelector();
// 获取当前年份和月份
var currentYear = new Date().getFullYear();
var currentMonth = new Date().getMonth() + 1;
// 初始化天数下拉框
initDaySelector(currentYear, currentMonth);
// 监听年份和月份下拉框的变化事件
document.getElementById("year").addEventListener("change", function () {
var year = this.value;
var month = document.getElementById("month").value;
initDaySelector(year, month);
});
document.getElementById("month").addEventListener("change", function () {
var year = document.getElementById("year").value;
var month = this.value;
initDaySelector(year, month);
});
}
// 页面加载完成后执行初始化函数
window.onload = function () {
initDateSelector();
};
```
以上代码会生成一个包含年、月、日三个下拉框的界面,并且会根据用户选择的年份和月份动态更新天数下拉框。可以根据需要调整样式和逻辑。