2021-11-09

最新推荐文章于 2025-12-01 21:03:28 发布

原创最新推荐文章于 2025-12-01 21:03:28 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

js+html+css实现的简单日历编写

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        #data{
            width: 560px;
            border: 1px solid #000000;
            margin: 20px auto;
            background: url("1.jpg") no-repeat fixed;
        }
        #data > p{
            display: flex;
            padding: 10px;
            font-size: 18px;
        }
        #data > h5{
            text-align: center;
            padding: 10px;
            font-size: 18px;
        }
        #data > p > span{
            padding: 0 10px;
        }
        #prev,#next{
            cursor: pointer;
        }
        #nian{
            flex: 1;
            text-align: center;
        }
        #title{
            overflow: hidden;
            list-style: none;
            background: #ccc;
        }
        #title > li{
            float: left;
            width: 80px;
            height: 34px;
            line-height: 26px;
            text-align: center;
            padding: 10px 0;
            font-size: 18px;
        }
        #date{
            overflow: hidden;
            list-style: none;
        }
        #date > li{
            float: left;
            width: 74px;
            height: 70px;
            margin: 1px 1px;
            border: 2px solid rgba(0,0,0,0);
            line-height: 68px;
            text-align: center;
            cursor: pointer;
            font-size: 18px;
        }
        #date > .hover:hover{
            border: 2px solid paleturquoise;
            color: paleturquoise;

        }

        .active{
            color: red;
        }
    </style>
</head>
<body>

<div id="data">
    <p>
        <span id="prev">上一月</span>
        <span id="nian">2022</span>
        <span id="next">下一月</span>
    </p>
    <h5 id="yue">五月</h5>
    <ul id="title">
        <li>日</li>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
    </ul>
    <ul id="date">

    </ul>
</div>

<script>
    let date = new Date();  //获取默认时间对象
    add(); //当页面第一次进入进行渲染一下

    function add() {

        let cYear = date.getFullYear(); //获取当前的年份
        let cMonth = date.getMonth(); //获取当前的月份 0-11
        let cDay = date.getDate(); //当前的天

        //每个月的第一天，是周几
        let zhou =new Date(cYear,cMonth, 1).getDay();
        //获取每个月的天数

        let days = new Date(cYear,cMonth+1, -1).getDate()+1;  //每个月的天数

        let arr=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月",];

        document.getElementById("nian").innerHTML=cYear;
        document.getElementById("yue").innerHTML=arr[cMonth];

        let html='';

        for(var i=0; i<zhou; i++) {
            html+='<li></li>';
        }

        for(var i=1; i<=days; i++) {

            if(i==cDay) {
                html += '<li class="active">' + i + '</li>';
            }else{
                html += '<li class="hover">' + i + '</li>';
            }
        }

        document.getElementById('date').innerHTML=html;



    }

    document.getElementById('prev').onclick=function(){
        date.setMonth(date.getMonth()-1);
        add();
    };

    document.getElementById('next').onclick=function(){
        date.setMonth(date.getMonth()+1);
        add();
    }

</script>
</body>
</html>

在这里插入图片描述