JS 获取未来30天的月日和星期

最新推荐文章于 2023-03-29 10:22:02 发布

原创最新推荐文章于 2023-03-29 10:22:02 发布 · 687 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#日历

操作专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态生成未来30天日期及星期的方法，并将这些信息展示在一个HTML日历中。通过设置开始日期为当前日期，循环递增日期直到达到30天后，将每天的月、日和星期插入到一个字符串中，最后将这个字符串作为HTML元素的内容，实现了日历的动态展示。

需求如下：

代码如下：

 <div class="calendar" id="calendar"></div>

    /* 动态获取30天时间 */
    var dateList = [];
    var weeks = ['日', '一', '二', '三', '四', '五', '六'];
    var appendStr = "";
    let startDate = new Date();
    let endDate = new Date();
    endDate.setDate(startDate.getDate() + 30);
    while ((endDate.getTime() - startDate.getTime()) > 0) {
        let month = (startDate.getMonth() + 1).toString().length === 1 ? "0" + (startDate.getMonth() + 1).toString() : (
            startDate.getMonth() + 1);
        let day = startDate.getDate().toString().length === 1 ? "0" + startDate.getDate() : startDate.getDate();
        let week = weeks[startDate.getDay()];
        dateList.push(month + "-" + day + "-周" + week);
        appendStr += "<div><span>" + month + "-" + day + "</span><span>" + "周" + week + "</span></div>";
        startDate.setDate(startDate.getDate() + 1);
    }
    $("#calendar").html(appendStr);

原博借鉴：https://www.cnblogs.com/yiweiyihang/p/7687799.html