周排序

最新推荐文章于 2022-08-26 10:47:45 发布

FPHPer

最新推荐文章于 2022-08-26 10:47:45 发布

阅读量422

点赞数

分类专栏：卓越文章标签：周排序

本文链接：https://blog.csdn.net/sinat_33261247/article/details/79400024

版权

卓越专栏收录该内容

19 篇文章 0 订阅

订阅专栏

春暖花开，就要写周报告了，都不知道是第几周了，于是乎，编辑一个《周排序》的日历程序。

<!DOCTYPE html>
<html lang="ZH-CN">
<head>
    <meta charset="UTF-8">
    <title>周排序</title>
    <style>
        .main {
            width: 550px;
            margin: 20px auto;
        }

        table tr th, table tr td {
            padding: 2px 5px;
            position: relative;
        }

        table tr td span {
            color: #999;
            font-size: 8px;
            position: absolute;
            right: 1px;
            bottom: 0;
        }

        table tr td:last-child {
            color: #555;
            font-weight: bold;
        }

        .month1 {
            background-color: FireBrick;
        }

        .month2 {
            background-color: YellowGreen;
        }

        .month3 {
            background-color: HotPink;
        }

        .month4 {
            background-color: Gray;
        }

        .month5 {
            background-color: Indigo;
        }

        .month6 {
            background-color: ForestGreen;
        }

        .month7 {
            background-color: MediumPurple;
        }

        .month8 {
            background-color: MediumOrchid;
        }

        .month9 {
            background-color: MediumSeaGreen;
        }

        .month10 {
            background-color: Orange;
        }

        .month11 {
            background-color: Maroon;
        }

        .month12 {
            background-color: WhiteSmoke;
        }
    </style>
</head>
<body>
<div class="main">
    <h1 id="tit"></h1>
    <table border="1" id="table">
        <tr>
            <th>星期日</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>周排序</th>
        </tr>
    </table>
</div>
<script>
    var year = 2018; // 更改年份
    var month = 12;
    var day = 31;
    var week = 0;
    var str = "<tr>";
    var weekNumber = 0;

    document.getElementById('tit').innerHTML = year + "年周排序";

    var firstDate = new Date();
    firstDate.setFullYear(year);
    firstDate.setMonth(0);
    firstDate.setDate(1);
    var space = 0;
    console.log(firstDate.getDay());
    while (space < firstDate.getDay()) {
        str += "<td> </td>";
        ++space;
    }

    for (var i = 1; i <= month; i++) {
        var d = new Date();
        d.setFullYear(year);
        d.setMonth(i - 1);
        for (var j = 1; j <= day; j++) {
            if (i == 2 && j > 28) { // 2月份28或者29天
                if (j <= 29 && (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)) { // 判断是否闰年
                } else {
                    break;
                }
            } else if ((i == 4 || i == 6 || i == 9 || i == 11) && j > 30) { // 4、6、9、11月份30天
                break;
            }
            d.setDate(j);
            week = d.getDay(j);

            if (!(i == 1 && j == 1) && week == 0) {
				str += "<td>第" + (++weekNumber) + "周</td>";
				str += "</tr><tr>";
            }

            str += "<td class=\"month" + i + "\">" + j + "<span>" + i + "月</span></td>";

            console.log(year + "年" + i + "月" + j + "日    星期:" + week);
        }
    }

    var lastDate = new Date();
    lastDate.setFullYear(year);
    lastDate.setMonth(11);
    lastDate.setDate(31);
    space = 0;
    var lastDayWeek = lastDate.getDay();
    while (space < (6 - lastDayWeek)) {
        str += "<td> </td>";
        ++space;
    }
    str += "<td>第" + (++weekNumber) + "周</td>";

    str += "</tr>";
    document.getElementById('table').innerHTML += str;
</script>
</body>
</html>

看看效果，蛮好的。