css 数字平铺布局

效果图
复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>活动中心</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            border: none;
            width: 100%;
        }

        body {
            background-color: #F6FBF7;
        }

        .textinput {
            padding: 10px;
            border: solid 1px #e5e5e5;
            border-radius: 5px;
        }

        .container {
            border-radius: 5px;
            border: solid 1px #ECECEC;
            font-weight: bold;
            background-color: white;
            text-align: left; /* 确保文本居左 */
            margin: 20px auto;
            width: 90%;
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px; /* 调整子元素之间的间距 */
        }

        .number {
            background-color: #f0f0f0;
            padding: 10px 20px;
            border-radius: 5px;
            width: calc((100% / 4) - 48px); /* 每行4个，减去间距 */
            text-align: center;
        }
    </style>
</head>
<body>
    <div style="border: solid 1px #ECECEC;font-weight:bold;background-color:white;line-height:50px;text-align:center;margin:0px auto;width:100%;">随机数</div>

    <div style="border-radius: 5px; border: solid 1px #ECECEC; font-weight: bold; background-color: white; text-align: center; margin: 20px auto; width: 90%; padding: 10px;">
        <div style="display:flex;justify-content:space-between;align-items:center;line-height:45px;">
            <div style="display:flex;justify-content:space-between;align-items:center;">
                <div style="width: 100px;">最小值：</div>
                <input id="txt_min" type="text" class="textinput" />
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;">
                <div style="width: 180px; ">最大值：</div>
                <input id="txt_max" type="text" class="textinput" />
            </div>
        </div>
        <div style="display: flex; justify-content: space-between; align-items: center; line-height: 45px;">
            <div style="display:flex;justify-content:space-between;align-items:center;">
                <div style="width: 100px; ">个数：</div>
                <input id="txt_count" type="text" class="textinput" />
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;">
                <div style="width:180px;">运行重复：</div>
                <div style="display: flex; justify-content:flex-start; align-items: center;">
                    是<input id="txt_repeat_yeas" name="txt_repeat" type="radio" />
                    否<input id="txt_repeat_no" name="txt_repeat" checked type="radio" />
                </div>
            </div>
        </div>
        <button id="btn_generate" style="margin-top: 10px; padding: 10px 20px; background-color: #007BFF; color: white; border: none; border-radius: 5px;">生成</button>
    </div>

    <div class="container">
        <!-- 这里将动态生成数字 -->
        <div class="number">暂无</div>
    </div>

    <script src="~/Content/ApiClound/Js/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btn_generate').click(function () {
                var min = parseInt($('#txt_min').val(), 10);
                var max = parseInt($('#txt_max').val(), 10);
                var count = parseInt($('#txt_count').val(), 10);
                var allowRepeat = $('#txt_repeat_yeas').is(':checked');

                if (isNaN(min) || isNaN(max) || isNaN(count)) {
                    alert('请输入有效的数字');
                    return;
                }

                if (min > max) {
                    alert('最小值不能大于最大值');
                    return;
                }

                if (count > (max - min + 1) && !allowRepeat) {
                    alert('生成的个数不能大于区间范围');
                    return;
                }

                var numbers = [];
                while (numbers.length < count) {
                    var randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
                    if (!allowRepeat && numbers.includes(randomNumber)) {
                        continue;
                    }
                    numbers.push(randomNumber);
                }

                $('.container').empty();
                numbers.forEach(function (number) {
                    $('.container').append('<div class="number">' + number + '</div>');
                });
            });
        });
    </script>
</body>
</html>