前端实战练习——日历1

男娘i 2023-08-17 15:22 71阅读 0赞

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

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

### 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. 效果展示 ###

![1699756-20190904103111013-474227956.png][]

### 3. 心得与收获 ###

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

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

未完待续～

转载于:https://www.cnblogs.com/woshinixxk/p/11457605.html

[1699756-20190904103111013-474227956.png]: /images/20230810/733fd44391104772b7f3a02584557171.png

发表评论取消回复

表情：

评论列表（有 0 条评论，71人围观）

还没有评论，来说两句吧...

相关阅读

相关前端实战练习——日历1

自学前端也有一段时间了，是时候检验一下自己的水平了。这次我做个日历来试试水，废话少叙，开始吧～ 1. 基本架构搭建 index.html <body>

男娘i/ 2023年08月17日 15:22/ 0 赞/ 72 阅读

相关 xgboost实战练习

1.安装xgboost后导入 import xgboost 2. 训练并使用模型进行预测 First XGBoost model for Pim

绝地灬酷狼/ 2023年07月06日 13:23/ 0 赞/ 3 阅读

相关 Note on python__2021年7月1日Python 字符串练习

print("输出 in console test") print("2的10次方是", 210) print("name input demo tes

爱被打了一巴掌/ 2022年10月11日 13:36/ 0 赞/ 210 阅读

相关 Shell面试题及企业运维实战练习1

最近在看Shell 学习了有些时间，正巧在网上找到了一批实战题，自己动手练习一下原文没有答案，我会和大家一起一边更新题目和把自己的答案贴出来，也和大家分享一下 [http:/

男娘i/ 2022年07月14日 01:19/ 0 赞/ 125 阅读

相关数据库 SQL实战练习

一觉醒来想练练SQL，顺便归纳总结下题目 1.on和where的区别看下面两个例子数据库表都是dept\_emp部门表和employees职员表 CRE

清疚/ 2022年06月07日 02:20/ 0 赞/ 212 阅读

相关 oracle实战练习--初级

> 前言：分享是一种坚持，分享给大家，也分享给自己！不管别人怎么说，怎么做，勇敢做自己，按照自己的心去做，虽然会碰到各种各样的挫折，但人生就是这样，不经历风雨，怎么能见彩虹。o

港控/mmm°/ 2022年05月15日 01:23/ 0 赞/ 309 阅读

相关 [练习]7月15日

7.15 jarvisoj-admin \[web\] Dirsearch扫描发现robots.txt 访问获得路径 admin\_s3cr3t.php 访问回显f

我就是我/ 2021年11月13日 21:46/ 0 赞/ 490 阅读

相关前端面试日更解答 interview-answe 1+1 2020-04-03

[158.\[CSS\]css文本过长显示省略号][158._CSS_css] [157.\[vue\]你怎么理解vue中的diff算法？][157._vue_vue_dif

我不是女神ヾ/ 2021年07月25日 01:01/ 0 赞/ 144 阅读

相关前端面试日更解答 interview-answe 1+1 2020-04-05

[159.JSON.stringify()与JSON.parse()的区别][159.JSON.stringify_JSON.parse] [160.\[html\]网页验证

落日映苍穹つ/ 2021年07月24日 13:17/ 0 赞/ 188 阅读

相关每日一点前端-1-基础练习

1.文字段落 ![2789632-4ee9adfb8b887ac4.png][] 文字段落练习一 <h1>一级标题</h1>

阳光穿透心脏的1/2处/ 2021年06月24日 16:11/ 0 赞/ 676 阅读