js 手写日历改变年改变月

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .calendar {
            width: 720px;
        }

        .week {
            width: 100%;
            height: 100px;
            padding: 0;
            display: grid;
            grid-template-columns: 100px 100px 100px 100px 100px 100px 100px;
            list-style-type: none;
        }

        .week li {
            width: 100px;
            height: 100%;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .days {
            width: 100%;
            padding: 0;
            display: grid;
            grid-template-columns: 100px 100px 100px 100px 100px 100px 100px;
            grid-template-rows: 100px 100px 100px 100px 100px 100px 100px;
            list-style-type: none;
        }

        .days span {
            width: 99px;
            height: 99px;
            display: inline-block;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 1px 1px;

        }

        .days .active {
            width: 98px;
            height: 98px;
            border: 1px solid red;
            border-radius: 8px;
            cursor: pointer;
        }

        .dain {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: red;
        }

        .wisas {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
        }

        .days .gay {
            color: gray;
        }
    </style>
</head>

<body>
    <input type="file" name="上传" accept="image/*" multiple id="xx">
    <div>1111111</div>
    <h3>日历</h3>
    切换年份<select name="jxon" id="yearSelect">
    </select>
    切换日期 <select name="jon" id="selectMathod">
    </select>
    <div class="calendar">
        <div>日期 1 2 3</div>
        <ul class="week">
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
            <li>日</li>
        </ul>
        <div class="days"></div>
    </div>
</body>
<script>
    let dom = document.getElementById('xx');
    dom.addEventListener('change', (e) => {
        const files = e.target.files
        const rawFile = files[0] // only use files[0]
        console.log(files, rawFile)
        if (!rawFile) return
        let reader = new FileReader();
        reader.readAsDataURL(rawFile);
        reader.onload = e => {
            console.log(e.target.result)
        }
    })
    // 日历 
    let daysArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    let yearArr = [1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025];
    const daysDom = document.querySelector('.days');

    getWeenkDays(new Date().getFullYear(), new Date().getMonth() + 1) // 触发
    // 点击事件
    daysDom.addEventListener('click', function (e) {
        const clickDays = document.querySelectorAll('.days span');
        clickDays.forEach((item) => {
            item.classList.remove('active');
        })
        if (e.target.tagName === 'SPAN' && !e.target.getAttribute('noclick')) {
            e.target.classList.add('active')
        } else if (e.target.className === 'wisas') { // 点击子级给父级添加选中class
            e.target.parentNode.classList.add('active')
        }
    })
    // dateDayFunc();
    // 获取上月 当月 下月数据 合并当前月份展示数据
    function dateDayFunc(years, n) {
        let date = new Date(years);
        let nowMonth = date.getMonth() // 当前月份
        date.setMonth(Number(n), 1)
        let weenkAwwNum = date.getDay(); // 获取当天周几
        // 当月总共天数
        date.setMonth(Number(n) + 1, 0)
        var newAww = date.getDate();
        // console.log('单月', date.getFullYear(), date.getMonth() + 1, weenkAwwNum, newAww,);

        // 上月总共天数
        date.setMonth(Number(n), 0)
        let oldAww = date.getDate();
        // console.log('上月', date.getMonth() + 1, weenkAwwNum);

        // 下月总共天数
        date.setMonth(Number(n) + 2, 0)
        let downAww = date.getDate();
        // console.log('下月', date.getMonth() + 1, weenkAwwNum);
        // console.log(oldAww, newAww, downAww);

        const oldAwwArr = [];
        for (let i = 1; i <= oldAww; i++) {
            oldAwwArr.push({ day: i })
        }
        const newAwwArr = [];
        for (let i = 1; i <= newAww; i++) {
            newAwwArr.push({ day: i })
        }
        const downAwwArr = [];
        for (let i = 1; i <= downAww; i++) {
            downAwwArr.push({ day: i })
        }
        return { oldAwwArr, newAwwArr, downAwwArr, weenkAwwNum };
    }
    // 获取当前日期 
    function getWeenkDays(years, n) {
        const time = new Date(years)
        const year = time.getFullYear();
        const day = time.getDate();
        const weenkNum = time.getDay();
        const mathodNum = time.getMonth() + 1; // 0 - 11 默认 得改 加一
        const { oldAwwArr, newAwwArr, downAwwArr, weenkAwwNum } = dateDayFunc(years, n);
        // console.log(oldAwwArr, newAwwArr, downAwwArr, weenkAwwNum)
        const daysArrNew = [];
        // 不全上下月
        if (weenkAwwNum !== 0 && weenkAwwNum !== 1) { // 周二到周六
            const fistArr = oldAwwArr.slice(-weenkAwwNum + 1);
            fistArr.forEach((item) => {
                item.color = 'gay'
            })
            daysArrNew.push(...fistArr);
            daysArrNew.push(...newAwwArr);
            const lens = 7 - (daysArrNew?.length - (Math.floor(daysArrNew?.length / 7) * 7));
            const lastArr = downAwwArr.slice(0, lens);
            lastArr.forEach((item) => {
                item.color = 'gay'
            })
            daysArrNew.push(...lastArr);
        } else if (weenkAwwNum === 1) { // z周一
            daysArrNew.push(...newAwwArr);
            const lens = 7 - (daysArrNew?.length - (Math.floor(daysArrNew?.length / 7) * 7));
            const lastArr = downAwwArr.slice(0, lens);
            lastArr.forEach((item) => {
                item.color = 'gay'
            })
            daysArrNew.push(...lastArr);
        } else if (weenkAwwNum === 0) { // 周天
            const fistArr = oldAwwArr.slice(-6);
            fistArr.forEach((item) => {
                item.color = 'gay';
            })
            daysArrNew.push(...fistArr);
            daysArrNew.push(...newAwwArr);
            const lens = 7 - (daysArrNew?.length - (Math.floor(daysArrNew?.length / 7) * 7));
            const lastArr = downAwwArr.slice(0, lens);
            lastArr.forEach((item) => {
                item.color = 'gay'
            })
            daysArrNew.push(...lastArr);
        }
        renderDom(daysArrNew);
    }
    // 页面渲染 
    function renderDom(data) {
        daysDom.innerHTML = ''
        data.forEach((item) => {
            const domSpan = document.createElement('span');
            domSpan.className = item.color ? item.color : '';
            domSpan.setAttribute('noclick', item.color ? item.color : '')
            if (item.color) {
                domSpan.innerHTML = item.day;
            } else {
                domSpan.innerHTML = '<div class="wisas">' + item.day + '<div class="dain"/>' + '</div>';
            }
            daysDom.appendChild(domSpan)
        })
    }
    // 月份
    const selectMathodDom = document.getElementById('selectMathod');
    // 年
    const selectYearDom = document.getElementById('yearSelect');
    daysArr.forEach((item, index) => {
        const domSpan = document.createElement('option');
        domSpan.setAttribute('value', index)
        if (index === new Date().getMonth()) {
            domSpan.setAttribute('selected', 'selected')
        }
        domSpan.innerHTML = index + 1;
        selectMathodDom.appendChild(domSpan)
    })
    // 改变月份
    selectMathodDom.addEventListener('change', function (e) {
        getWeenkDays(selectYearDom.value, e.target.value)
    })

    yearArr.forEach((item, index) => {
        const domSpan = document.createElement('option');
        domSpan.setAttribute('value', item)
        if (item === new Date().getFullYear()) {
            domSpan.setAttribute('selected', 'selected')
        }
        domSpan.innerHTML = item;
        selectYearDom.appendChild(domSpan)
    })
    // 改变月份
    selectYearDom.addEventListener('change', function (e) {
        getWeenkDays(e.target.value, selectMathodDom.value)
    })
    yearSelect

</script>

</html>
posted @ 2022-09-22 15:37 玖捌阅读(172) 评论(0) 收藏举报
刷新页面返回顶部
js 手写日历 改变年 改变月

公告

js 手写日历改变年改变月
