javascript输入年月显示日历

99 阅读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>
    <!-- 把html内容居中 -->
    <style>
      table {
        border: 1px solid orange;
        margin: 0 auto;
        padding: 20px;
        margin-top: 40px;
        border-radius: 15px;
      }
    </style>
  </head>
  <body>
    <!-- 放到table里面 -->
    <table>
      <!-- 在html里面先做一个日历 -->
      <tr>
        <th colspan="7"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
  <script>
    //   请输入年和月
    var string = prompt("请输入年和月,用空格分开");
    // spilt的用法是讲一个字符串按照指定方法分割成一个数组
    var yearString =
      string.split(" ")[0]; /* 用空格分开输入的字符串,成为一个数组 */
    var monthString = string.split(" ")[1];
    var table = document.querySelector("table");
    // 把得到的年和月加入到th标签里面
    document.querySelector("th").innerHTML =
      yearString + "年" + monthString + "月";
    //    获取输入的这个月有多少天
    // 里面有了年月,
    //  new Date()里面传入参数,月是从0开始的
    // 下面这里的意思是把输入的年月日转成对象
    // 1是这个月的第一天,那么0就是这个月的前一天
    // 转成对象以后,就可以调用方法.getDate(),意思是返回输入这个数字是这个月第几天
    // 输入了0,意思就是这个月的前一天,
    // 意思就是说,上个月的最后一天在上个月是第几天
    // 需要注意点是,月是从0开始算,假如输入2,意思就是说,返回的是2022年3月的前一天在上月里面是第几天
    var dayCurrentMonth = new Date(yearString, monthString, 0).getDate();
    // 获取这个月的1号是星期几,用原来的对象调用用getDay()
    // 从上面月是从10开始,0表示上月的最后一天,那么就可以理解下面
    // 减一,和1,就表示输入的月份,和这个月的第一天
    var firstDaytoWeekNumber = new Date(
      yearString,
      parseInt(monthString) - 1,
      1
    ).getDay();

    // html里面需要多少个td和tr
    // 这个月有多少天就要多少个td  然后这个月1号是星期几,前面空的部分也用td补上
    var tdSum = dayCurrentMonth + firstDaytoWeekNumber;
    // 每7个td 需要一个tr
    // 生成数组
    var dateStringArray = [];
    for (var i = 0; i < tdSum; i++) {
      dateStringArray.unshift(dayCurrentMonth); /* unshift表示从前面插入 */
      dayCurrentMonth--; /*循环一次,这个月的天数就自减 */
    }

    trSum = Math.ceil(tdSum / 7); /* 向上取整 */
    var count = 0;
    // 动态拼接

    for (var i = 0; i < trSum; i++) {
      // 每一次循环创建一个tr
      var tr = document.createElement("tr");
      for (var j = 0; j < 7; j++) {
        // 每一行是7个td,所以就j< 7就继续执行
        var td = document.createElement("td");
        td.innerHTML =
          dateStringArray[count] <= 0 || !dateStringArray[count]
            ? ""
            : dateStringArray[
                count
              ]; /* 创建的td里面写入的内容是刚才定义的数组里面的元素 */
        count++;
        // 创建好td,就挂到tr上面
        tr.appendChild(td);
      }
      //   把tr挂到table里面
      table.appendChild(tr);
    }
  </script>
</html>