输入年月,动态生成日历

113 阅读1分钟
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #table {
        margin: 0 auto;
        margin-top: 20px;
        padding-top: 20px;
        border: 1px solid orange;
      }
    </style>
  </head>
  <body>
    <table id="table">
      <!-- 在html中,colspan的意思为合并行上的单元格,colspan属性可以定义单元格应该横跨(合并)的列数;
            语法“<td colspan="number">”,属性值“number”指定需要合并的列数。 -->
      <tr>
        <th colspan="7">2022年9月</th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
  <script>
    var table = document.querySelector("table");
    // 先输入年和月
    var string = prompt("请输入年和月,空格分开");
    // string是输入的数字,把输入的数字先变成数组,用空格分开,然后用数组的下标获取到输入的每一个数字
    var yearString = string.split(" ")[0];
    var monthString = string.split(" ")[1];
    var th = document.querySelector("th");
    th.innerHTML = `${yearString}${monthString}月`;
    // 获取输入这个月有多少天
    daySumCurrentMonth = new Date(yearString, monthString, 0).getDate();
    // 这个月的1号是星期几
    firstDaytoWeekDayNumber = new Date(
      yearString,
      parseInt(monthString) - 1,
      1
    ).getDay();
    // 需要多少个td
    tdSum = daySumCurrentMonth + firstDaytoWeekDayNumber;

    // 需要多少个tr td的数量除以7,然后向上取整
    trSum = Math.ceil(tdSum / 7);
    // 生成数组
    var dateStringArray = [];

    for (var i = 0; i < tdSum; i++) {
      dateStringArray.unshift(daySumCurrentMonth);
      daySumCurrentMonth--;
    }
    console.log(dateStringArray);

    // alert(trSum);
    // 动态生成日历表格
    var count = 0;
    for (var i = 0; i < trSum; i++) {
      var tr = document.createElement("tr");
      for (var j = 0; j < 7; j++) {
        var td = document.createElement("td");

        td.innerHTML =
          dateStringArray[count] <= 0 || !dateStringArray[count] ? "" : dateStringArray[count];

        count++;
        tr.appendChild(td);
      }
      table.appendChild(tr);
    }
  </script>
</html>