Javascript простой объектно-ориентированный - PullRequest
0 голосов
/ 22 января 2012

Идея класса состоит в том, чтобы создавать 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'

1 Ответ

2 голосов
/ 22 января 2012

Функции таймера (setTimeout) выполняются в пределах своих собственных областей.Заключение кода в замыкание должно работать:

var t = setTimeout(function () { _self.goCrazy(); }, 1000);

Посмотрите: http://jsfiddle.net/TimWolla/BHeZR/ для демонстрации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...