记录纯html、css、js实现周日历和当前日历高亮

记得引入JQuery，因为js中使用了$。效果如下，最终效果是能自定义内容，目前实现了一半。方便后面自己使用

附上当前代码：

 <section class="calender">
        <section class="left">
            <span class="title">考试安排</span>
            <p class="time">
                <span class="prev">上一周</span>
                <span class="now"></span>
                <span class="next">下一周</span>
            </p>
        </section>
        <table id="monitor">
            <tr class="two">
                <td>周一</td>
                <td>周二</td>
                <td>周三</td>
                <td>周四</td>
                <td>周五</td>
                <td>周六</td>
                <td>周日</td>
            </tr>
            <tr class="one">
                <td class='first'></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <ul class="detail-time">
        </ul>
    </section>

    <script src="../vue2/JQ3.5.js"></script>
    <script src="./index.js"></script>

.calender {
    width: 100%;
}
.current-day {
    background: pink;
}
.calender .left {
    height: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-style: normal;
    font-size: 14px;
    line-height: 24px;
    color: #333333;
}

.calender .left .title {
    min-width: 168px;
    font-weight: 550;
}

.calender .left .time {
    width: 200px;
    display: flex;
    justify-content: space-between;
}

.calender .left .time .prev,
.calender .left .time .next {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    width: 52px;
    height: 24px;
    background: #F7F8FA;
    border-radius: 2px;
    color: #272E3B;
}

span.next:hover,
span.prev:hover {
    background-color: rgb(249, 124, 124) !important;
    color: white !important;
}

table {
    border-collapse: collapse;
    table-layout: fixed;
    cursor: pointer;
    margin-top: 12px;
    width: 100%;
    text-align: center;
    border: 1px solid #F2F3F5;
}

td {
    position: relative;
    border: 1px solid #E5E6EB;
}

td span {
    display: block;
    margin: 0 auto;
    font-size: 14px;
    line-height: 20px;
}

td span:last-child {
    font-size: 12px;
    line-height: 24px;
}

.one {
    height: 40px;
    background-color: #F2F3F5;
    color: #272E3B;
    ;
    font-weight: 550;
}

.two {
    height: 40px;
    background-color: #FFF;
    color: #666;
}

tr {
    height: 72px;
}

//获取现在年月日
function timestampToDate(timestamp) {  
    var date = new Date(timestamp);  
    var year = date.getFullYear();  
    var month = ("0" + (date.getMonth() + 1)).slice(-2);
    var day = ("0" + date.getDate()).slice(-2);
    return year + "年" + month + "月" + day + "日";  
}  
let currentYmd = timestampToDate(new Date().getTime());  
console.log(currentYmd); 


let nowDate = null;
// 日历区域点击事件
$('.calender').on('click', function (e) {
    let target = e.target;
    if (target.className == 'prev') {
        setDate(addDate(currentFirstDate, -7));
    }
    if (target.className == 'next') {
        setDate(addDate(currentFirstDate, 7));
    }
});

// 根据参数日期获取具体日期信息
let cells = $('.one>td');
let clen = cells.length;
let currentFirstDate; // 当前周日历的开始日期

let addDate = function (date, n) {
    date.setDate(date.getDate() + n);
    return date;
};
let startTime = null;
let setDate = function (date) {
    let nowDate = timestampToDate(date).slice(0, 8)
    $('span.now').text(nowDate);
    let week = date.getDay() - 1;
    date = addDate(date, week * -1);
    currentFirstDate = new Date(date);
    for (let i = 0; i < clen; i++) {
        let res = timestampToDate(i == 0 ? date : addDate(date, 1));
        if (i == 0) {
            startTime = res;
            console.log('当前周的第一天',startTime);
        }
        cells[i].innerHTML = res.slice(-3)
        if ($('span.now').html() + cells[i].innerHTML === currentYmd) {
            cells[i].className = 'current-day';
        } else {
            cells[i].className = '';
        }
        console.log('cells[i]',cells[i].innerHTML);
    }
};
setDate(new Date());