Question

我正在尝试使用div创建像素化效果。 div很小，25px乘25px。我不想将数百个这些硬编码到标记中。

我希望页面的整个主体由这些div“像素”组成，以便我可以使用颜色随机化做一些有趣的事情。

我想这与克隆div有关，但假设我这样做，我将如何克隆它们以便生成完整的身体大小？这样整个屏幕似乎充满了像素？

注意：我是新手开发者。

Answer 1

你的问题有点模糊，但这就是我能把它放在一起的东西，希望这能回答你的问题。基本上我只生成一个包含所有div元素的长字符串并将它们注入页面

//helper function see
//http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

var num_of_pixels = 5000;

var output = "";

for(var i = 0; i < 5000; i++) {
  output+= '<div style="'
  output+= "background-color:"+getRandomColor()+";"
  output+='"" class="pixel"></div>'
}

var container = document.getElementById('container');
container.innerHTML = output

为了获得你所讨论的全屏效果，只需计算内部宽度*内部高度并除以每个像素的面积，这些是25px，2px边距，所以27 ^ 2

编辑：

以下是使用固定颜色集的示例

http://codepen.io/mattbucci/pen/ueBfx

这是一个奖励动画版本，虽然认为用帆布可能有更有效的方法来做到这一点

http://codepen.io/mattbucci/pen/avrjd

Answer 2

这是一个基本的FIDDLE，可以帮助你入门。

有一个容器（你可以将它更改为正文），里面装满了小div（你可以根据需要调整div和容器的大小）。

JavaScript填充容器，并使用内联样式为每个div指定一个随机颜色。

JS

for(var n=1; n < 100; n++)
   {
    for(var r = 1; r < 50; r++)
       {
        mycolor = '#' + Math.random().toString(16).substring(2, 8);
        var mydiv = "<div style='background-color:" + mycolor + " ;'></div>";
        $( '.container' ).append( mydiv );
        }
        $( '.container' ).append( "<div class='clearboth'></div>");
    }

与divs的像素化效果？

2 个答案: