JS div制作透视图

白沙王

于 2023-06-11 17:22:17 发布

阅读量77

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50784508/article/details/131155487

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        onload = function () {
            //根据标签获取body元素
            var body = this.document.getElementsByTagName('body')[0];
            //规定初始值
            var width = 500, height = 500, left = 10, top = 10;
            //循环创建div
            while (true) {
                //循环创建div加入body中
                var div1 = document.createElement('div')
                //绝对定位
                div1.style.position = 'absolute';
                //距离窗体左侧的距离
                div1.style.left = left + 'px';
                //距离窗体上侧的距离
                div1.style.top = top + 'px';
                //div的边框像素及颜色
                div1.style.border = '1px solid blue';
                //div的宽度
                div1.style.width = width + 'px';
                //div的高度
                div1.style.height = height + 'px';
                //追加入body的字元素中
                body.appendChild(div1);

                //改写数值
                left += 5;
                top += 5;
                width -= 10;
                height -= 10;

                if (width<=0) {
                    break;
                }
            }

        }
    </script>
</head>
<body>
    <div style="position:absolute;left:10px;top:10px;width:500px;height:500px;border:1px solid red;">

    </div>
</body>
</html>