Javascript简单的面向对象

Javascript simple object oriented

本文关键字：面向对象 简单 Javascript      更新时间：2023-09-26

该类的想法是在屏幕上创建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像素，显示内联块。

在调用类之前，有一个空的div标记，用于参考在哪里创建块。

上面的所有代码，只显示一个彩色块，而不是所有的都将被着色，并且变化很快。

Chrome的警告：

Uncaught TypeError: Object [object DOMWindow] has no method 'goCrazy'

定时器函数（setTimeout）在它们自己的作用域内执行。将代码封装到闭包中应该可以：

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

看看：http://jsfiddle.net/TimWolla/BHeZR/进行演示。

相关文章：