用伸缩布局实现日历展示

最新推荐文章于 2021-07-19 18:18:40 发布

塞上江南果

最新推荐文章于 2021-07-19 18:18:40 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/Picking_up_stones/article/details/55047934

版权

JavaScript 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

CSS

16 篇文章 0 订阅

订阅专栏

前言：flex布局方式使网页的布局定位更加简单，大量的减少了css代码，使用起来非常方便，在之前的博客也有写过关于flex布局的内容，今天附上一个小例子，github展示地址：https://spiritliftedhigh.github.io/demo/canlendar.html
具体内容如下：

<!DOCTYPE html>
<html>
<head>
    <title>日历</title>
    <style type="text/css">

        html, body, ul, li, div{
            margin: 0;
            padding: 0;
            background: #ccc;
            font-family: "PingFang SC","Helvetica Neue",Helvetica,"Hiragino Sans GB",Arial,"Microsoft YaHei","微软雅黑",sans-serif,"Segoe UI Emoji","Segoe UI Symbol";

        }

        .week-header{
            background: #1C0C59;
        }

        .list-container{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            text-align: center;
            width: 100%;
            height:50px;
            background: #362391;
        }

        .list-item{
            background: #362391;
            list-style: none;
            width: 10%;
            padding: 10px;
            color: #fff;
            font-size: 18px;
            font-weight: bold;
        }
        /*日历行*/
        .date-row{
            display: flex; /*指定布局为伸缩布局*/
            flex-direction: row; /*水平显示*/
            justify-content: space-around; /*列平均分布在行中*/
            text-align: center;
            width: 100%;
            background:#5853BC;
            color: #4f4f4f;
            font-size: 22px;
            height: 80px;
        }
        /*日历列*/
        .date-col{
            padding-top: 20px;
            background: #fff;
            width:10%;
            margin:10px;
            border-radius: 5px; 
            text-align: center;
        }

        .year-month{
            text-align: center;
            font-size:30px;
            color: #fff;
            background: #F0AE2C;
            height:50px;
            padding-top:15px; 
        }

    </style>
</head>
<body onload="showDate()">

<div class="canlendar-container">
    <div class="year-month"></div>
    <div class="week-header">
        <ul class="list-container">
            <li class="list-item">日</li>
            <li class="list-item">一</li>
            <li class="list-item">二</li>
            <li class="list-item">三</li>
            <li class="list-item">四</li>
            <li class="list-item">五</li>
            <li class="list-item">六</li>
        </ul>
    </div>

    <div class="date-body" id="date-content">

    </div>

</div>

<script type="text/javascript">

    var date = new Date();

    var year = new Object();
    year = {};
    /*获得年份*/
    year.value = date.getFullYear();
    /*判断该年是否为闰年*/
    year.isLeapyear = function(){
        if ((this.value % 4 == 0 && this.value % 100 != 0) || (this.value % 400 == 0))
            return true;
        else
            return false;
    }

    var month = new Object()
    month = {};
    /*获得月份*/
    month.value = date.getMonth() + 1;
    /*获得该月的总天数*/
    month.totalDay = function(){
        var totalDay;
        if (this.value == 1 || this.value == 3 || this.value == 5 || this.value == 7 || this.value == 8 || this.value == 10 || this.value == 12)
            totalDay = 31;
        if (this.value == 2){
            if (year.isLeapyear())
                totalDay = 29;
            else
                totalDay = 28;
        }
        return totalDay;
    }
    /*获得今天的日期*/
    var day = date.getDate();
    /*获得今天是星期几*/
    var week = date.getDay();

function showDate()
{
    var totaldaynum = month.totalDay();

    var prvday = day - week - 1;
    /*今天之前日期的行数*/
    var prv_row;
    if (prvday % 7 != 0)
        prv_row = parseInt(prvday / 7) + 1;
    else
        prv_row = parseInt(prvday / 7);
    console.log(prv_row +"");

    var nextday = totaldaynum - prvday;
    /*今天之后日期的行数*/
    if (nextday % 7 != 0)
        next_row = parseInt(nextday / 7) + 1;
    else
        next_row = parseInt(nextday / 7);
    console.log(next_row +"");

    /*总行数*/
    var total_row = prv_row + next_row;
    /*该月第一天是星期几*/
    var first_week = 7 - (prvday % 7);

    var count = 0;
    var date_num = 1;
    console.info(total_row+"");

    var date_body = document.getElementById("date-content");

    for (var i = 0; i < total_row; i++){
        var div_row = document.createElement("div");
        for (var j = 0; j < 7; j++){
            var div_col = document.createElement("div");
            /*该月第一天之前为空*/
            if (count < first_week)
                div_col.innerHTML = "";
            /*该月最后一天之后为空*/
            else if (totaldaynum < date_num)
                div_col.innerHTML = "";
            /*该月所有的天数*/
            else
            {
                div_col.innerHTML = date_num + "";
                /*如果正是今天，用颜色区分*/
                if (date_num == day)
                    div_col.style.background = "yellow"
                date_num++;
            }
            count++;
            div_col.className = "date-col";
            div_row.appendChild(div_col);
        }
        div_row.className = "date-row";
        date_body.appendChild(div_row);
    }

    var year_month = document.querySelector(".year-month");
    year_month.innerHTML = year.value+"年"+month.value+"月"+day+"日"+"&nbsp;&nbsp;&nbsp;"+"星期"+week;
}

</script>

</body>
</html>

效果如图：
这里写图片描述

总结：在这个小练习中，用flex布局很容易就实现了如同Bootstrap中的栅格布局，对js也有一点小练习，觉得哪里不好请多多指教了。

塞上江南果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用伸缩布局实现日历展示

前言：flex布局方式使网页的布局定位更加简单，大量的减少了css代码，使用起来非常方便，在之前的博客也有写过关于flex布局的内容，今天附上一个小例子，github展示地址：https://spiritliftedhigh.github.io/demo/canlendar.html 具体内容如下：<!DOCTYPE html><html><head> <title>日历</title
复制链接

扫一扫

专栏目录