快捷導(dǎo)航

js實(shí)現(xiàn)獲取最新本周周一開(kāi)始的日期（單周日歷卡）

更新時(shí)間：2023年10月15日 08:41:44 作者：陽(yáng)哥

這篇文章主要為大家介紹了js實(shí)現(xiàn)獲取最新本周周一開(kāi)始的日期（單周日歷卡）示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

獲取單周日歷選項(xiàng)卡

html

<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>單周日歷選項(xiàng)卡</h1>
    <div style="overflow: hidden;">
        <h2 id="year"></h2>
        <h3 id="current-time"></h3>
    </div>
    <ul id="day"></ul>
    <ul id="date"></ul>
    <script>
        //獲取當(dāng)前時(shí)間7天前的日期
        function getLast7Date(date) {
            let pastArr = [];
            for (let i = 1; i <= 7; i++) {
                date.setDate(date.getDate() - 1);//設(shè)置日期
                pastArr.push(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate());
            }
            document.write(pastArr)
        }
        let date = new Date(2017, 0, 1);
        getLast7Date(date)
        console.log()
        //獲取最新本周周一開(kāi)始的日期
        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 代表星期日 改為數(shù)字7
            let dateCopy = new Date(date.toDateString()); //COPY 兩個(gè)不同的date對(duì)象
            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返回值是調(diào)整過(guò)的日期的毫秒表示
                }
                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();//默認(rèn)取當(dāng)前日期所在年份
            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>

注意點(diǎn)

1.getNewWeekDate函數(shù)接受一個(gè)為date類型的參數(shù)

2.for循環(huán)中，對(duì)循環(huán)外對(duì)象的引用（包含object,array,date類型);數(shù)組添加方法會(huì)默認(rèn)執(zhí)行外層對(duì)象最終循環(huán)得到的值。例如下面例子：

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,循環(huán)體內(nèi)currentDate打印都是2023/10/14整個(gè)時(shí)間；

循環(huán)體外dates打印為10次一樣的10/14 10 2（date）=>Fri Nov 03 2023 18:25:06 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

//改進(jìn)
        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)

最上面實(shí)例代碼就是通過(guò)每次循環(huán)改變最外層date對(duì)象的引用來(lái)解決的

以上就是js實(shí)現(xiàn)獲取最新本周周一開(kāi)始的日期（單周日歷卡）的詳細(xì)內(nèi)容，更多關(guān)于js獲取單周日歷卡的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: