js 通过for循环使用像素的方式创建三角形

桔子♢

已于 2023-06-08 14:20:05 修改

阅读量220

点赞数 1

文章标签： html css javascript

于 2022-11-08 11:06:29 首次发布

本文链接：https://blog.csdn.net/bunge_pricklyash/article/details/127733674

版权

 let color = ['#f00','#0f0','#00f','#0ff','#f0f','#ff0']
//三角形像素颜色随机的数组
    function fn() {
//循环创建元素
        for (var i = 0; i <300; i+=1) {
            for(var j = 0;j<i+1;j+=1){
               
            var div = document.createElement('div');
//组成左半三角形单个像素块宽高
            div.style.width = '1px';
            div.style.height = '1px';
            // div.style.float = 'left';
            div.style.position = 'absolute';
            div.style.left = 300-j+'px';
            div.style.top = 300+i+'px';
            div.style.background = color[parseInt(Math.random() * 6)];
            div.style.border = '1px solid '+color[parseInt(Math.random() * 6)];
            document.body.appendChild(div);

            var div1 = document.createElement('div');
//组成右半三角形宽高
            div1.style.width = '1px';
            div1.style.height = '1px';
            // div.style.float = 'left';
            div1.style.position = 'absolute';
            div1.style.left = 300+j+'px';
            div1.style.top = 300+i+'px';
            div1.style.background = color[parseInt(Math.random() * 6)];
            div1.style.border = '1px solid '+color[parseInt(Math.random() * 6)];
            document.body.appendChild(div1);
            }
        }
        }
fn()