首页用onload事件，实现2000年到2010年的年月日的输出，复选框实现

用onload事件，实现2000年到2010年的年月日的输出，复选框实现

时间: 2024-09-18 22:04:39 浏览: 34

在网页中使用JavaScript和HTML，你可以通过`<input type="checkbox">`元素配合`onload`事件来实现这个功能。首先，你需要创建一个表单，包含一组从2000年到2010年的年份复选框，并在一个元素如`<div>`内显示对应日期。这里是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>年份选择</title> <style> #dateDisplay { margin-top: 10px; } </style> </head> <body onload="displayDates()"> <h2>选择年份:</h2> <form id="yearForm"> <label for="year_2000">2000</label> <input type="checkbox" id="year_2000" name="years[]" value="2000">  <label for="year_2010">2010</label> <input type="checkbox" id="year_2010" name="years[]" value="2010"> </form> <div id="dateDisplay"></div> <script> function displayDates() { const years = document.getElementsByName('years[]'); let dates = []; // 遍历复选框，仅处理被选中的年份 years.forEach(year => { if (year.checked) { dates.push(new Date(2000 + parseInt(year.value))); } }); // 如果有选中的年份，显示对应的日期；否则，隐藏或清空日期显示区域 if (dates.length > 0) { dates.sort((a, b) => a.getFullYear() - b.getFullYear()); // 按照年份排序 let dateDiv = document.getElementById('dateDisplay'); dateDiv.innerHTML = dates.map(date => `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`).join('<br>'); } else { dateDiv.textContent = '未选择年份'; } } </script> </body> </html> ``` 在这个示例中，当页面加载完成(`onload`)时，`displayDates`函数会被调用。它会检查每个复选框是否被勾选，然后生成并显示选定年份的日期。

阅读全文