js实现获取最新本周周一开始的日期（单周日历卡）

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ul{
        overflow: hidden;
    }
    li{
        float: left;
        margin-right: 10px;
    }
    #year{
        float: left;
        margin-right: 20px;
    }
</style>
<body>
    <h1>单周日历选项卡</h1>
    <div style="overflow: hidden;">
        <h2 id="year"></h2>
        <h3 id="current-time"></h3>
    </div>
    <ul id="day"></ul>
    <ul id="date"></ul>
    <script>
        //获取当前时间7天前的日期
        function getLast7Date(date) {
            let pastArr = [];
            for (let i = 1; i <= 7; i++) {
                date.setDate(date.getDate() - 1);//设置日期
                pastArr.push(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate());
            }
            
            document.write(pastArr)
        }
        let date = new Date(2017, 0, 1);
        getLast7Date(date)
        console.log()
        //获取最新本周周一开始的日期

        const date1 = new Date();
        function getNewWeekDate(date) { //单周日历插件
            if(!date instanceof Date){
                throw new Error("pass the Date Type of params")
            }
            let curDate = date.getDate();
            let dayNum = date.getDay() ? date.getDay() : 7; //如果为0 代表星期日 改为数字7
            let dateCopy = new Date(date.toDateString()); //COPY 两个不同的date对象
            let dateCopy2 = new Date(date.toDateString());
            let arr1 = [];
            let arr2 = [];
            let x1 = dayNum - 1;
            let x2 = 7 - dayNum;
            if (x1 > 0) {
                console.time()
                for (let i = 0; i < x1; i++) {
                    let changeDate = dateCopy.setDate(dateCopy.getDate() - 1);
                    arr1.unshift(dateCopy);
                    dateCopy = new Date(changeDate) //重新赋值 setDate返回值是调整过的日期的毫秒表示
                }
                console.timeEnd()
            }
            if (x2 !== 0) {
                for (let i = 0; i < x2; i++) {
                    let ui = dateCopy2.setDate(dateCopy2.getDate() + 1);
                    arr2.push(dateCopy2);
                    dateCopy2 = new Date(ui)
                }
            }
            let res = arr1.concat([date], arr2);
            //渲染
            let yearDom = document.querySelector("#year");
            let dayDom = document.querySelector("#day");
            let dateDom = document.querySelector("#date");
            yearDom.innerText = date.getFullYear();//默认取当前日期所在年份
            for(let item of res){
                let li1 = document.createElement('li');
                let li2 = document.createElement('li');
                let day = item.getDay() == 0 ? 7 : item.getDay();
                switch(day){
                    case 1:
                    day = '一'
                    break;
                    case 2:
                    day = '二'
                    break;
                    case 3:
                    day = '三'
                    break;
                    case 4:
                    day = '四'
                    break;
                    case 5:
                    day = '五'
                    break;
                    case 6:
                    day = '六'
                    break;
                    case 7:
                    day = '日'
                    break;
                    default:
                    break;
                }
                li1.innerText = day
                dayDom.appendChild(li1)
                let date = item.getDate();
                if(item.getDate() === curDate){
                    li2.style.color = "red"
                }
                li2.innerText = date;
                motiveSetTime();
                dateDom.appendChild(li2)
            }
        }
        getNewWeekDate(date1);
        function motiveSetTime(){
            let timer = setInterval(()=>{
                let date = new Date();
                document.querySelector("#current-time").innerHTML = date.toLocaleTimeString(); 
            },1000)
        }
    </script>
</body>

</html>

注意点:
1.getNewWeekDate函数接受一个为date类型的参数
2.for循环中，对循环外对象的引用（包含object,array,date类型);数组添加方法会默认执行外层对象最终循环得到的值。例如下面例子：

 var dates = new Array();
        var currentDate = new Date();
        for (var i =0; i < 10;i++){
            currentDate.setDate(currentDate.getDate()+2);
            console.log(currentDate);
            dates.push(currentDate);
        }
        console.log(dates)

假如currentDate为2023/10/14,循环体内currentDate打印都是2023/10/14整个时间；
循环体外dates打印为10次一样的10/14 10 2（date）=>Fri Nov 03 2023 18:25:06 GMT+0800 (中国标准时间)


        //改进
        var dates1 = new Array();
        var currentDate = new Date();
        for (var i =0; i < 10;i++){
            currentDate.setDate(currentDate.getDate()+2);
            console.log(currentDate);
            dates1.push(new Date(currentDate));
        }
        console.log(dates1)

最上面实例代码就是通过每次循环改变最外层date对象的引用来解决的

js实现获取最新本周周一开始的日期（单周日历卡）

阳哥

引用和评论

nodeJs + js实现chatgpt流式传输