JavaScript动态创建输入的年月显示日历

最新推荐文章于 2024-07-12 16:27:40 发布

要心安呀

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量399

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_56773850/article/details/132761092

版权

先创建页面框架

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <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>
</html>

获取用户输入的年月，将年月填入页面

var str = prompt("请输入年份和月份，中间用空格分开").split(" ");
var year = str[0];
var mon = str[1];

var table = document.querySelector("table");

// 将年月加入到th标签里面
document.querySelector("th").innerHTML = year + "年" + mon + "月";

dayCurrentMonth表示获取当前月份的最后一天

new Date(2023,9,1) 表示2023年10月的第一天

所以new Date(2023,9,0) 表示2023年9月的最后一天

再利用数组将本月日期存起来，注意此处用的是unshift()而不是push(),这样可以保证日期顺序与我们的阅读习惯保持一致性，方便理解

var dayCurrentMonth = new Date(year, mon, 0).getDate(); // 年，月，日

//获的把本月的1号是星期几
var firstDaytoWeekNumber = new Date(year, parseInt(mon) - 1, 1).getDay();

// 天数+星期几前面空出来的格子数量===td数量
var tdNum = dayCurrentMonth + firstDaytoWeekNumber;

// tr=Math.ceil(tdNum/7)
var dateArray = [];
for (var i = 0; i < tdNum; i++) {
    // 插入最后一天是多少号
    // 然后依次往前插入日期
    dateArray.unshift(dayCurrentMonth);
    dayCurrentMonth--;
}

确定行数，并将日期填入对应的td中

var trNum = Math.ceil(tdNum / 7);

var count = 0;

// 动态拼接
for (var i = 0; i < trNum; i++) {
    var tr = document.createElement("tr");
    for (var j = 0; j < 7; j++) {
        var td = document.createElement("td");

        // 创建的td里面写入刚才定义在数组中元素
        td.innerHTML =
        dateArray[count] <= 0 || !dateArray[count] ? "" : dateArray[count];
        count++;
        tr.appendChild(td);
    }
    table.appendChild(tr);
}

end

要心安呀

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript动态创建输入的年月显示日历

再利用数组将本月日期存起来，注意此处用的是unshift()而不是push(),这样可以保证日期顺序与我们的阅读习惯保持一致性，方便理解。所以new Date(2023,9,0) 表示2023年9月的最后一天。new Date(2023,9,1) 表示2023年10月的第一天。dayCurrentMonth表示获取当前月份的最后一天。获取用户输入的年月，将年月填入页面。确定行数，并将日期填入对应的td中。
复制链接

扫一扫