用伸缩布局实现日历展示

来源：互联网发布：我想开淘宝网店怎么开编辑：程序博客网时间：2024/05/16 11:48

前言：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