前端实战练习——日历1

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

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

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();

})();

2. 效果展示

3. 心得与收获

　　项目虽小，收获却大。在这其中，我了解了Date对象的一些简单运用；将部分所学到es6语法应用到项目中；对页面结构与交互效果有所了解。

　　后续会不断完善，尽可能的将其由易到不易，由浅至不浅。文中出现错误或不好的地方，也请各位能不吝指正，谢谢。

　　未完待续～