js实现动态日历简约版

最新推荐文章于 2024-07-10 23:14:41 发布

天子笑，分你一坛！

最新推荐文章于 2024-07-10 23:14:41 发布

阅读量281

点赞数

文章标签： javascript css

本文链接：https://blog.csdn.net/weixin_51994508/article/details/111779144

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .calender{
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -190px 0 0 -200px;
            width: 380px;
            height: 400px;
            background: rgba(0,0,0,0.4);
        }
        .item{
            display: inline-block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #8CD7DB;
            color: #fff;
            border: 1px solid rgba(0,0,0,0.2);
            transition: all 6s;
        }
        .item:hover{
            background: #1EDB72;
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div class="calender">
        <script>
            var year=2020;
            var month=12;
            var totalDays=0;
            /*统计整年的天数*/
            for(var i=1900;i<year;i++){
                totalDays += (i%4==0 && i%100 != 0) || i % 400 ==0 ? 366:365;
            }
            /*统计整月的总天数*/
            for (var i=1;i<month;i++){
                switch (i) {
                    case 4:
                    case 6:
                    case 9:
                    case 11:
                        totalDays +=30;
                        break;
                    case 2:
                        totalDays +=(year%4==0 && year%100 != 0) || year % 400 ==0 ? 29 : 28;
                        break;
                    default:
                        totalDays +=31;
                }
            }
            /*目标月份的总天数*/
            var days=0;
            /*计算空格数*/
            var space=totalDays %7;
          /*获取目标月份的总天数*/
            switch (month) {
                case 4:
                case 6:
                case 9:
                case 11:
                    days =30;
                    break;
                case 2:
                    days =(year%4 && year%100 != 0) || year % 400 ==0 ? 29 : 28;
                    break;
                default:
                    days =31;
            }
            /*计数器*/
            var count=0;
            for (var i = 0; i < space; i++) {
                count++;
                document.write('<div class="item" style="visibility: hidden"></div>');
            }
            for (var i = 1; i <= days; i++) {
                count++;
                document.write(`<div class="item">${i}</div>`)
                if(count==7){
                    document.write("<br>");
                    count=0;
                }
            }
        </script>
    </div>
</body>
</html>