简易万年历 - - php.cn博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日历</title>
</head>
<style>
    body{
        width: 100%;
        box-sizing: border-box;
    }
    section{
        width: 300px;
        height: 320px;
        margin: 20px auto;
        border: 1px solid #ccc;
    }
    .header{
        display: flex;
        justify-content: space-between;
        padding: 15px;
    }
    .header>span:first-child,.header>span:last-child{
        line-height: 40px;
    }
    .container{
        width: 100%;
        border-spacing: 0;
    }
    ul,li,p{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        text-align: center;
    }
    ul{
        display: flex;
        justify-content: space-around;
    }
    ul:first-child{
        background: #d6d6d6;
        padding: 5px;
    }
    li{
        text-align: center;
        padding: 5px;
        list-style-type: none;
        width: 42px;
        height: 30px;
    }
    .active{
        color: red;
    }
    .hover:hover{
        border: 1px solid red;
        cursor: pointer;
    }
    #date{
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
    }
</style>
<body>
<section>
    <div class="header">
        <span id="pre">上一月</span>
        <span>
            <p id="year"></p>
            <p id="month"></p>
        </span>
        <span id="next">下一月</span>
    </div>
    <div class="container">
        <ul>
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <ul id="date">
        </ul>
    </div>
</section>
<script>
    var date = new Date();
    add()
    function add(){
        var arr = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
        var year = date.getFullYear();  //获取系统年份
        var month = date.getMonth();  //获取系统月份
        var now = date.getDate();  //今天的日期
        var xingQi = new Date(year,month,1).getDay(); //当月1号是星期几
        var days = getDate(year,month-1); //当月天数
        console.log(xingQi);
        document.getElementById('year').innerText = year+ '年';
        document.getElementById('month').innerText = arr[month];
        var dateObj = document.getElementById('date');
        function getDate(year,month){
            var d = new Date(year,month,0);
            return d.getDate();
        }
        var html =''
        for (let i =0;i<xingQi;i++){
            html += '<li></li>'
        }
        for (let i=1;i<=days;i++){
            if (i == now){
                html += "<li class='active'>" + i + "</li>"
            }
            else {
                html += '<li class="hover">' + i + '</li>';
            }
        }
        document.getElementById('date').innerHTML=html;
    }
    document.getElementById('pre').onclick=function(){
        date.setMonth(date.getMonth()-1);
        add();
    };
    document.getElementById('next').onclick=function(){
        date.setMonth(date.getMonth()+1);
        add();
    }
</script>
</body>
</html>