div 页面布局表格化div

最新推荐文章于 2023-11-07 23:45:00 发布

乐享极致

最新推荐文章于 2023-11-07 23:45:00 发布

阅读量532

点赞数

分类专栏： HTML 文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_44313745/article/details/105414059

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<html>
<head>
    <title>123</title>
    <script type="text/javascript">
        function createDiv() {
            var s1 = document.getElementById('s1');
            var item = s1.value;
            var hasChild = container.children.length ? true : false;
            if(hasChild){
                while(container.hasChildNodes()) //当div下还存在子节点时 循环继续
                {
                    container.removeChild(container.firstChild);
                }
            }
            //制定策略
            var strategy =[2,4,9,16,25];
            var strategyRow = [1,2,3,4,5];
            var strategyIndex = 0;
            //获取策略方案
            for( var index = 0 ; index < strategy.length ; index++) {
                var current = strategy[index];
                if (item <= current) {
                    strategyIndex = index;
                    break;
                }
            }
            //使用策略
            //当前策略
            console.log('strategyRow', strategyIndex);
            var row = strategyRow[strategyIndex];
            console.log("item", item);
            console.log("row", row);
            var column = item / row;
            console.log("column", column);
            var width = 80 /column + '%';
            var height = 80 /row + '%' ;
            for(var i = 0; i < row; i++){
                // var rowDiv = document.createElement("div");
                for(var j = 0; j < column; j++){
                    var columnDiv = document.createElement("div");
                    columnDiv.style.cssText=" margin:10px; border-style: solid; border-width: 2px; border-color: #aa0000; float:left;height:"+ height +";background-color: #00aa00;"+"width:" + width+ ";";
                    // rowDiv.appendChild(columnDiv);
                    container.appendChild(columnDiv);
                }
                // container.appendChild(rowDiv);
            }
        }
    </script>
</head>
<body style="text-align: center">
    <select id="s1" >
        <option value="2">1*2</option>
        <option value="4">2*2</option>
        <option value="9">3*3</option>
        <option value="16">4*4</option>
        <option value="25">5*5</option>
    </select>
    <button onclick="createDiv()">确定</button>
    <div id="container" style="width: 900px; height: 900px; text-align: center; border: 1px solid greenyellow"></div>
</body>
</html>

乐享极致

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div 页面布局表格化div

<html><head> <title>123</title> <script type="text/javascript"> function createDiv() { var s1 = document.getElementById('s1'); v...
复制链接

扫一扫