JS实验，HTML：在这里需要打开网页就显示当前日期，但是这个代码中不能实现这个功能，而且每个月的天数都是31天，不会随着月份和年份而改变，希望帮忙修改一下。
<body>
<select name="" id="year">
select>
<select name="" id="month">
select>
<select name="" id="day">
select>
<input type="button" onclick="getDay()" value="获取日期" />
<input type="button" onclick="aa()" value="清空" />
<script language="javascript">
today=new Date()
//添加年份
nYear=today.getFullYear()
for(var y=nYear;y>nYear-100;y--){
l=new Option(y,y)
document.getElementById("year").add(l)
}
//添加月份
tmonth=parseInt(today.getMonth());
for(var i=1;i<=12;i++){
b=new Option(i,i)
document.getElementById("month").add(b)
}
document.getElementById("month").options[tmonth].selected=true;//显示当前月份
nDay=[31,28,31,30,31,30,31,31,30,31,30,31]
function aa(){
document.getElementById("year").options.length=0
}
//添加日
today = parseInt(today.getDay());
for (var i = 1; i <= 31; i++) {
{
d = new Option(i, i);
document.getElementById("day").add(d);
}
}
document.getElementById("dat").options[nDay].selected=true;
//获取所选日期
function getDay(){
var obj=document.getElementById("year")//定位id
var index = obj.selectedIndex; // 选中索引
var text = obj.options[index].text; // 选中文本
var value = obj.options[index].value; // 选中值
alert(value)
}
function aa(){
document.getElementById("year").options.length=0//选择框清空
}
script>
body>
<body>
<select name="" id="year" onchange="changeYear()">
</select>
<select name="" id="month" onchange="changeMonth()">
</select>
<select name="" id="day">
</select>
<input type="button" onclick="getSelectedDate()" value="获取日期" />
<input type="button" onclick="clearDate()" value="清空" />
<script language="javascript">
// 年dom对象
let yearDomObj = document.getElementById("year");
// 月dom对象
let monthDomObj = document.getElementById("month");
// 日dom对象
let dayDomObj = document.getElementById("day");
/**
* 设置 年下拉框
* @param {number} year
*/
function setYearOptions(year){
// 先清空所有option
yearDomObj.innerHTML = "";
//添加年份
for (let y = year; y > year - 100; y--) {
yearDomObj.add(new Option(y, y))
}
// 选中下拉框
yearDomObj.value = year;
}
/**
* 设置 月下拉框
* @param {number} month 月（与正常的月份数字一致）
*/
function setMonthOptions(month){
// 先清空所有option
monthDomObj.innerHTML = "";
//添加月份
for (let i = 1; i <= 12; i++) {
monthDomObj.add(new Option(i, i));
}
// 选中下拉框
monthDomObj.value = month;
}
/**
* 设置 日下拉框
* @param {number} year 年
* @param {number} month 月（与正常的月份数字一致）
* @param {number} day 日
*/
function setDayOptions(year, month, day){
year = parseInt(year);
month = parseInt(month);
day = parseInt(day);
// 月对应的天数
let nDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if ((year % 4 === 0) && (year % 100 !== 0 || year % 400 === 0)) {
nDay[1] = 29;
}
// 先清空所有option
dayDomObj.innerHTML = "";
//添加日
for (let i = 1; i <= nDay[month - 1]; i++) {
dayDomObj.add(new Option(i, i));
}
// 选中下拉框
if(day <= nDay[month - 1]){
// 在本月天数内
dayDomObj.value = day;
}else{
// 不在本月天数内
dayDomObj.value = 1;
}
}
/**
* 初始化年月日下拉框为当前日期
*/
function initDate(){
// 当前日期
let today = new Date();
// 当前年
let curYear = today.getFullYear();
// 当前月
let curMonth = parseInt(today.getMonth()) + 1;
// 当前日
let curDay = parseInt(today.getDate());
// 初始化 年下拉框
setYearOptions(curYear);
// 初始化 月下拉框
setMonthOptions(curMonth);
// 初始化 日下拉框
setDayOptions(curYear, curMonth, curDay);
};
initDate();
// 改变 年下拉框 事件
function changeYear(){
let year = yearDomObj.value;
let month = monthDomObj.value;
let day = dayDomObj.value;
// 设置 日下拉框
setDayOptions(year, month, day);
}
// 改变 月下拉框 事件
function changeMonth(){
let year = yearDomObj.value;
let month = monthDomObj.value;
let day = dayDomObj.value;
// 设置 日下拉框
setDayOptions(year, month, day);
}
//获取所选日期
function getSelectedDate() {
let yearText = yearDomObj.value;
let monthText = monthDomObj.value;
let dayText = dayDomObj.value;
let dateText = yearText + " " + monthText + " " + dayText;
alert(dateText)
}
// 清空
function clearDate() {
initDate();
}
</script>
</body>