使用 JS 实现一个简单的日历

╰+攻爆jí腚メ 2022-12-27 08:44 160阅读 0赞

> ### 推荐阅读 ###
> 
> ##### Helm3（K8S 资源对象管理工具）视频教程：[https://edu.csdn.net/course/detail/32506][https_edu.csdn.net_course_detail_32506] #####
> 
> ##### Helm3（K8S 资源对象管理工具）博客专栏：[https://blog.csdn.net/xzk9381/category\_10895812.html][https_blog.csdn.net_xzk9381_category_10895812.html] #####

> [本文原文链接：https://blog.csdn.net/xzk9381/article/details/110931387，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。][https_blog.csdn.net_xzk9381_article_details_110931387]

使用 JS 实现一个简易的日历功能，有问题欢迎在下方评论区讨论，代码如下：

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
            * { 
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #topNode { 
                width: 420px;
                float: left;
                border: 1px solid black;
                border-radius: 10px;
                margin-left: 500px;
                margin-top: 300px;
                background-color: #ccc;
            }
            #date { 
                width: 100%;
                height: 20px;
                line-height: 20px;
                text-align: center;
            }
            #prev { 
                float: left;
                cursor: pointer;
                margin-left: 5px;
            }
            #next { 
                float: right;
                cursor: pointer;
                margin-right: 5px;
            }
            #week { 
                width: 100%;
                height: 20px;
                line-height: 20px;
                float: left;
                margin-top: 5px;
            }
            #week span { 
                float: left;
                width: 60px;
                height: 100%;
                line-height: 20px;
                text-align: center;
            }
            #dateList li { 
                float: left;
                width: 60px;
                height: 40px;
                text-align: center;
                line-height: 40px;
            }
            .red { 
                color: red;
            }
            .today { 
                border-radius: 20px;
                background-color: red;
                color: white;
            }
        </style>
        <script type="text/javascript">
            onload = function (){ 
                var myDate = new Date(),
                    myYear = myDate.getFullYear(),
                    myMonth = myDate.getMonth();
    
                year.innerHTML = myYear;
                month.innerHTML = myMonth + 1;
                getAllDate()
    
                var m = month.innerHTML,
                    y = year.innerHTML;
                
                prev.onclick = function (){ 
                    m--;
                    if ( m == 0 ){ 
                        m = 12;
                        y--;
                    }
                    month.innerHTML = m;
                    year.innerHTML = y;
                    getAllDate()
                }
    
                next.onclick = function (){ 
                    m++;
                    if ( m == 13 ){ 
                        m = 1;
                        y++;
                    }
                    month.innerHTML = m;
                    year.innerHTML = y;
                    getAllDate()
                }
    
                function getAllDate(){ 
    
                    function getMonthDays(year,month){ 
                        var myDate = new Date(year,month,0);
                        return myDate.getDate();
                    }
    
                    function getFirstDay(year,month){ 
                        var myDate = new Date(year,month - 1,1),
                            week = myDate.getDay();
                        ( week ==0 )?week == 7:week;
                        return week;
                    }
    
                    dateList.innerHTML = ''
    
                    for ( var n = 0;n < getFirstDay(year.innerHTML,month.innerHTML) - 1;n++){ 
                        var myLi = document.createElement('li')
                        dateList.appendChild(myLi)
                    }
    
                    var days = getMonthDays(year.innerHTML,month.innerHTML)
    
                    for (var n = 1;n <= days;n++){ 
                        var myLi = document.createElement('li')
                        myLi.innerHTML = n;
                        dateList.appendChild(myLi)
                    }
    
                    for (var n = 0;n < dateList.children.length;n++){ 
                        if (n % 7 == 5 || n % 7 == 6){ 
                            dateList.children[n].classList.add('red');
                        }
                        if (dateList.children[n].innerHTML == myDate.getDate()){ 
                            if (month.innerHTML == myDate.getMonth() + 1 && year.innerHTML == myDate.getFullYear()){ 
                            	dateList.children[n].classList.add('today');
                            }
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="topNode">
            <div id="date">
                <span id="prev">prev</span>
                <span id="year"></span>年 
                <span id="month"></span>月
                <span id="next">next</span>
            </div>
            <div id="week">
                <span>一</span>
                <span>二</span>
                <span>三</span>
                <span>四</span>
                <span>五</span>
                <span style="color: red">六</span>
                <span style="color: red">日</span>
            </div>
            <ul id="dateList"></ul>
        </div>
    </body>
    </html>

[https_edu.csdn.net_course_detail_32506]: https://edu.csdn.net/course/detail/32506
[https_blog.csdn.net_xzk9381_category_10895812.html]: https://blog.csdn.net/xzk9381/category_10895812.html
[https_blog.csdn.net_xzk9381_article_details_110931387]: https://blog.csdn.net/xzk9381/article/details/110931387