js原生日历（小白的版本）

我不是女神ヾ 2022-03-01 19:40 234阅读 0赞

1.  原生日历

![图片描述][3315738331-5b6867f975c58_articlex]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>日历</title>
    <style type="text/css">
    *{
        margin:0;
        padding:0;
        list-style:none;
    }
    #out{
        position: absolute;
        width: 300px;
        height: 300px;
        /*border: 1px solid black;*/
        /*background: lightgreen;*/
        top: 100px;
        left:500px;
    }
    #calendar{
        margin: 25px auto;
        width: 252px;
        height: 255px;
        background: white;
        border: 1px solid black;
        font-size: 12px;
        font-family: Arial;
        box-shadow: 5px 5px 5px green outset;
    }
    #calendar .top{
        height:45px;
        width:100%;
    }
    #calendar .top span{
        display:block;
        width:84px;
        height: 23px;
        line-height:23px;
        float:left;
        text-align:center;    
    }
    #calendar .top span a{
        text-decoration: none;
    }
    #calendar .top span a:hover{
        color:blue;
    }
    #calendar .top h4{
        width: 100%;
        height: 19px;
        text-line: center;
        line-height: 19px;
        float:left;
        text-align:center;
    }
    #calendar .list ul{
        width: 100%;
        height: 100%;
    }
    #calendar .list ul .week{
        width: 36px;
        height: 30px;
        line-height: 30px;
        float: left;
        text-align:center;
        background-color:#ccc;
    }
    #calendar .list ul .day{
        background-color:white;
    }
    </style>
    <script type="text/javascript">
    var months = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
    window.onload = function(){
        var iDate = new Date();
        var yearBox = document.getElementById('year');
        var monthBox = document.getElementById('month');
        var day = iDate.getDate();
        yearBox.innerHTML = iDate.getFullYear();
        monthBox.innerHTML = months[iDate.getMonth()];
        createList(iDate);
        doMark(day);
    }
    function doMark(day){
        var addBox = document.getElementById('add');
        var lis = addBox.children;
        for(var i=lis.length - 1;i > 6;i--){
            if(lis[i].innerHTML == day){
                lis[i].style.cssText = 'background-color:lightgreen;border-radius:10px;';
                break;
            }
        }
    }
    function nextMonth(){
        var yearBox = document.getElementById('year');
        var monthBox = document.getElementById('month'); 
        var index = getIndex(monthBox);
        if(index == 11){
            yearBox.innerHTML = parseInt(yearBox.innerHTML) + 1;
        }
        var next = (++index) % (months.length);
        monthBox.innerHTML = months[next];
        var date = new Date();
        date.setYear(parseInt(yearBox.innerHTML));
        date.setMonth(next);
        removeList();
        createList(date);
    }
    function lastMonth(){
        var yearBox = document.getElementById('year');
        var monthBox = document.getElementById('month');
        var index = getIndex(monthBox);
        if(index == 0){
            yearBox.innerHTML = parseInt(yearBox.innerHTML) - 1;
        }
        var last = (--index + months.length) % (months.length)
        monthBox.innerHTML = months[last];
        var date = new Date();
        date.setYear(parseInt(yearBox.innerHTML));
        date.setMonth(last);
        removeList();
        createList(date);
    }
    function getIndex(monthBox){
        for(var i = 0;i < months.length;i++){
            if(months[i] == monthBox.innerHTML)
                return i;
        }
    }
    Date.prototype.getMonthDays = function(){
        var iDate = new Date();
        iDate.setYear(this.getFullYear());
        iDate.setMonth(this.getMonth() + 1);
        iDate.setDate(0);
        return iDate.getDate();
    } 
    function createList(date){
        var days = date.getMonthDays();
        date.setDate(1);
        var fir = date.getDay();
        var liNums = fir + days;
        var addBox = document.getElementById('add');
        for(var i = 0;i < liNums;i++){
            var liBox = document.createElement('li');
            liBox.className = 'week day';
            if(i >= fir){
                liBox.innerHTML = (i- fir + 1);
            }
            addBox.appendChild(liBox);
        }
    }
    function removeList(){
        var addBox = document.getElementById('add');
        var lis = addBox.children;
        //记住要从后往前删，因为removeChild方法会实时改变原有的索引
        for(var i=lis.length - 1;i > 6;i--)
            addBox.removeChild(lis[i]);
    }
    </script>
    </head>
    <body>
    <div id="out">
        <div id="calendar">
            <div class="top">
                <span><a href="#" onclick="lastMonth()">上一月</a></span>
                <span id="year"></span>
                <span><a href="#" onclick="nextMonth()">下一月</a></span>
                <h4 id="month"></h4>
            </div>
            <div class="list">
                <ul id="add">
                    <li class="week">日</li>            
                    <li class="week">一</li>            
                    <li class="week">二</li>            
                    <li class="week">三</li>            
                    <li class="week">四</li>            
                    <li class="week">五</li>            
                    <li class="week">六</li>                            
                </ul>
            </div>
        </div>
    </div>
    </body>
    </html>

1.  margin-top失效问题

![图片描述][4032995064-5b68653c11324_articlex]  
解决方式：可以给父容器一个border（这会导致留白）；可以给父容器设置overflow:hidden；内容器可以改用padding-top

1.  removeChild删除节点时的删不干净问题

在js中使用removeChild删除节点时，要倒着删除（如在ul里删除所有的li节点时），因为removeChild方法会实时更新索引值。

[3315738331-5b6867f975c58_articlex]: /images/20220301/6efe3e6ec1114654a7440d8b2e66c930.png
[4032995064-5b68653c11324_articlex]: /images/20220301/f20a321e5e454eb59ee1c7115b968bb9.png