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

最新推荐文章于 2024-08-28 10:46:05 发布

店伙计

最新推荐文章于 2024-08-28 10:46:05 发布

阅读量6.4k

点赞数

分类专栏： JavaScripts 文章标签： javascript html css

本文链接：https://blog.csdn.net/xzk9381/article/details/110931387

版权

JavaScripts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

推荐阅读

Helm3（K8S 资源对象管理工具）视频教程：https://edu.csdn.net/course/detail/32506

Helm3（K8S 资源对象管理工具）博客专栏：https://blog.csdn.net/xzk9381/category_10895812.html

本文原文链接：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>