HTML+CSS+JavaScript日历生成器

Posted 2020-12-29 NeymarGoal

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML+CSS+JavaScript日历生成器相关的知识，希望对你有一定的参考价值。

需求：实现日历生成器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同志交友</title>
    <style>
        input {
            width: 50px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
        }
        select {
            width:100px;
            padding:10px;
        }
        button {
            padding: 10px 20px;
            border: 1px solid #ccc;
            background: #f5f5f5;
            cursor: pointer;
        }
        #res {
            margin-top:20px;
        }

        #res table {
            width: 700px;
            table-layout: fixed;
            border-collapse: collapse;
        }
        #res td,#res th {
            padding: 10px;
            border: 1px solid #999;
            text-align: center;
        }

        .red {
            color: red;
        }
        .green {
            color: green;
        }

    </style>
</head>
<body>
    <h1>日历生成器</h1>
    <hr>
    请输入本月多少天:
    <input type="number" id="days" max="31" min="28" step="1" value="31">
    请输入本月一号星期几:
    &nbsp;&nbsp;&nbsp;
    <select  id="weekday">
        <option value="0">星期日</option>
        <option value="1">星期一</option>
        <option value="2">星期二</option>
        <option value="3">星期三</option>
        <option value="4">星期四</option>
        <option value="5">星期五</option>
        <option value="6">星期六</option>
    </select>
    &nbsp;&nbsp;&nbsp;
    <button onclick="makeCalendar()">生成日历</button>


    <div id="res"></div>


    <script>
        //声明函数
        function makeCalendar() {
            //获取 每月天数
            var days = Number(document.getElementById(\'days\').value);
            //获取一号是星期几
            var weekday = Number(document.getElementById(\'weekday\').value);

            //计算日历有多少行
            var rows = Math.ceil((days + weekday) / 7);
        
            //定义变量
            var html = \'<table>\';
            html += `
            <tr>
                <th class="red">星期日</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th class="green">星期六</th>
            </tr>
            `;

            var dayNumber = \'\';

            //循环 生成表格
            for (var i = 0; i < rows; i ++) {
                html += \'<tr>\';
                for (j = 1; j <= 7; j ++) {
                    if (j === 1) {
                        html += \'<td class="red">\';
                    } else if (j === 7) {
                        html += \'<td class="green">\';
                    } else {
                        html += \'<td>\';
                    }

                    dayNumber = j + i*7 - weekday; //计算每个单元格的数值
                    //判断是否超出范围
                    if (dayNumber <= 0 || dayNumber > days) {
                        dayNumber = \'\';
                    }

                    html += dayNumber+\'</td>\';
                }
                html += \'</tr>\';
            }

            html += \'</table>\'


            //添加表格内容到页面
            document.getElementById(\'res\').innerHTML = html;
        }

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

以上是关于HTML+CSS+JavaScript日历生成器的主要内容，如果未能解决你的问题，请参考以下文章

前端特效之毛玻璃-倾斜-日历

网页前端之用JavaScript（JS）做一个简单的日历

简单日历插件jquery.date_input.pack

Vue日历

html 简单的日历| HTML JS CSS

HTML+CSS+JavaScript 迷宫生成算法建议收藏