前端实战练习——日历1

最新推荐文章于 2024-04-26 14:38:08 发布

weixin_30314793

最新推荐文章于 2024-04-26 14:38:08 发布

阅读量156

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/woshinixxk/p/11457605.html

版权

自学前端也有一段时间了，是时候检验一下自己的水平了。

这次我做个日历来试试水，废话少叙，开始吧～

1. 基本架构搭建

index.html

<body>
    <div class="calendar_wrap">
        <div class="calendar_year"></div>
        <ul class="calendar_list"></ul>
    </div>
    <script src="./main.js"></script>
</body>

main.js

(function(){
    const year = document.querySelector('.calendar_year');
    const calendarList = document.querySelector('.calendar_list');　　
    const weekList = ['日','一','二','三','四','五','六'];    　　　　　　// 工作日标题

    // 获取当前日期,格式为yyyy-MM-dd
    function getNowFormatDate(){
        const date = new Date();
        //日期分隔符
        let seperator1 = '-';                            
        let year = date.getFullYear();              // 年
        let month = date.getMonth() + 1;            // 月
        let day = date.getDay() + 1;                // 日
        let currentDate = '';

        if (month >= 1 && month <= 9) {// 月份不够两位补"0"
            month = '0' + month;
        }
        if (day >= 1 && day <= 9) {// 天数不够两位补"0"
            day = '0' + day;
        }
        // 拼接日期字符串
        currentDate = year + seperator1 + month + seperator1 + day;
        const body = {
            currentDate:currentDate,
            year:year,
            month:parseInt(month),
            day:parseInt(day)
        }
        // 返回对象
        return body;
    }

    // 生成星期与日期
    function wrapWithLi(){
        let weekStr = '';    // 存放星期字符串
        let dayStr = '';     // 存放具体日期字符串
        // 获取当前年份与月份
        const currentYear = getNowFormatDate().year;
        const currentMonth = getNowFormatDate().month;

        // 计算当前月份对应天数
        // 当前日期
        const currenMonthDay = new Date(currentYear,currentMonth,0).getDate();
        const currentDay = getNowFormatDate().day;

        // 生成星期
        for(let week of weekList){
            weekStr += `<li class="calendar_week">${week}</li>`;
        }
        // 生成日期
        for(let i = 1;i <= currenMonthDay;i++){
            if(i === currentDay){
                dayStr += `<li class="current_day">${i}</li>`;
            }else{
                dayStr += `<li class="calendar_item">${i}</li>`;
            }
        }
        return weekStr + dayStr;
    }

    // 鼠标选择高亮
    function currHightlight(){
        const lis = document.querySelectorAll('.calendar_item');
        for(let li of lis){
            li.addEventListener('mouseover',function(){
                li.style.backgroundColor = '#dcdcdc';
            });
            li.addEventListener('mouseout',function(){
                li.style.backgroundColor = '';
            });
        }
    }

    calendarList.innerHTML = wrapWithLi();
    year.innerHTML = getNowFormatDate().currentDate;
    currHightlight();

})();