JavaScript-------日历-优快云博客

本文介绍了如何使用HTML和JavaScript在用户选择不同月份时动态生成相应天数的日历列表，通过`<select>`元素的`change`事件触发`createCalendar`函数来更新显示。

完整代码：

html中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <label for="month">Select month: </label>
        <select id="month">
          <option value="January">一月</option>
          <option value="February">二月</option>
          <option value="March">三月</option>
          <option value="April">四月</option>
          <option value="May">五月</option>
          <option value="June">六月</option>
          <option value="July">七月</option>
          <option value="August">八月</option>
          <option value="September">九月</option>
          <option value="October">十月</option>
          <option value="November">十一月</option>
          <option value="December">十二月</option>
        </select>    
        <h1>January</h1>   
        <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li></ul>
      </div>
      <script src="scripts/main2.js" defer></script> 
</body>
</html>

js中：

const select = document.querySelector('select');
const list = document.querySelector('ul');
const h1 = document.querySelector('h1');

select.addEventListener('change', () => {
  const choice = select.value;
  let days = 31;
  if (choice === 'February') {
    days = 28;
  } else if (choice === 'April' || choice === 'June' || choice === 'September'|| choice === 'November') {
    days = 30;
  }

  createCalendar(days, choice);
});

function createCalendar(days, choice) {
  list.innerHTML = '';
  h1.textContent = choice;
  for (let i = 1; i <= days; i++) {
    const listItem = document.createElement('li');
    listItem.textContent = i;
    list.appendChild(listItem);
  }
}

createCalendar(31,'January');

效果展示：