js用for循环将小方块摆成V型方法三--小技巧

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            background: red;
            position: absolute;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
        #box{
            position: relative;
        }
    </style>
</head>

<body>
    <input type="text" id="pt">
    <button id="btn">按钮</button>
    <section id="box"></section>
    <script>

        // 1、静态
        // 2、动态

        var pt = document.getElementById('pt');
        var btn = document.getElementById('btn');
        var box = document.getElementById('box');

        btn.onclick = function () {
			box.innerHTML = "";  //清空
            var len = parseInt(pt.value);
            var t = 0;
            for (var i = 0; i < len; i++) {
                // 当 i< len / 2  top 值是增加的 否则是减少的  但是 left值是一直增加的
                if (i < len / 2) {
                    // t = i;
                    box.innerHTML += '<div style="left:' + i * 50 + 'px;top:' + i * 50 + 'px">'+(i+1)+'</div>';
                } else {
                    //t = len - i - 1;   // 12 -0  12- 1  12- 2 
                    box.innerHTML += '<div style="left:' + i * 50 + 'px;top:' +(len - i - 1) * 50 + 'px">'+(i+1)+'</div>';
                }
              
            }

        }

    </script>
</body>

</html>

posted @   JackieDYH  阅读(3)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示