Идея класса состоит в том, чтобы создавать X-квадраты на экране и менять их цвета случайным образом.
Вот оно:
function Blocks() {
var Size = 0;
this.setSize = function(inputSize) {
Size = inputSize;
};
this.createEnvironment = function() {
var Block, prevBlock, i;
for (i = 0; i < Size; i++) {
Block = document.createElement('div');
Block.className = 'block';
Block.id = i;
prevBlock = document.getElementsByTagName('div')[i];
prevBlock.parentNode.insertBefore(Block, prevBlock);
}
};
this.randBlock = function() {
return document.getElementsByTagName('div')[Math.floor(Math.random() * Size)];
};
this.randColor = function() {
var Chars = '0123456789ABCDEF'.split('');
var randColor = '#';
for (var i = 0; i < 6; i++) {
randColor += Chars[Math.floor(Math.random() * Chars.length)];
}
return randColor;
};
this.goCrazy = function() {
var Block = this.randBlock();
Block.style.background = this.randColor();
var t = setTimeout('this.goCrazy()', 1000);
};
}
Вот пример использования:
var object = new Blocks();
object.setSize(10);
object.createEnvironment();
object.goCrazy();
css код:
.block - 30x30 px, displine inline-block.
и перед вызовом класса есть пустой тег div, для ссылки на который нужно создатьблоки.
Весь код, приведенный выше, отображает только один цветной блок, вместо этого все будут окрашены и быстро изменятся.
Предупреждение Chrome:
Uncaught TypeError: Object [object DOMWindow] has no method 'goCrazy'