<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>简易日历示例</title>
    <style>
      * {
        box-sizing: border-box;
      }

      ul {
        padding-left: 0;
      }

      li {
        display: block;
        float: left;
        width: 25%;
        border: 2px solid white;
        padding: 5px;
        height: 80px;
        background-color: #4A2DB6;
        color: white;
      }
    </style>
  </head>
  <body>
    <label for="month">选择月份：</label>
    <select id="month">
      <option>一月</option>
      <option>二月</option>
      <option>三月</option>
      <option>四月</option>
      <option>五月</option>
      <option>六月</option>
      <option>七月</option>
      <option>八月</option>
      <option>九月</option>
      <option>十月</option>
      <option>十一月</option>
      <option>十二月</option>
    </select>

    <h1></h1>

    <ul></ul>

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

      function daysOfMonth(month) {
        switch (month) {
          case '一月': case '三月': case '五月': case '七月': case '八月': case '十月': case '十二月':
            return 31;
          case '四月': case '六月': case '九月': case '十一月':
            return 30;
          case '二月':
            return 28;
          default:
            return 0;
        }
      }

      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);
        }
      }
      
      select.onchange = function() {
        const choice = select.value;
        const days = daysOfMonth(choice);

        createCalendar(days, choice);
      }

      createCalendar(31, '一月');
    </script>
  </body>
</html>
