javascript 文字闪烁

早上突然看到CSS里面的text-decoration属性的时候,发现blink仅有的火狐浏览器都不支持了.于是想使用js来实现这一效果.

<script type="text/javascript">
    var i = 0;
    function getColor(){
        i++;
        switch(i){
            case 1: return "#FF0000";
            case 2: return "#FF6600";
            case 3: return "#3366CC";
            default: return "#000000";
        }
    }
    function colorful(){
        var o = document.getElementById("active");
        o.style.color = getColor();
        if(i==3){
            i=0;
        }
        setTimeout("colorful()",1000);
    }
    colorful();
</script>

可是看着自己的代码感觉自己写的还是很low.于是在网上查找JS如何封装?于是进行一番深入学习.

1.定义js类

js并不是一种面向对象的语言,没有提供对类的支持.因此,我们不能像传统的语言那样使用class来定义类,但是我们可以使用js的闭包封装机制来实现js类,我们来封装一个简单的shape类:

代码如下:

<script type="text/javascript">
    /*
    我们定义两个方法show和init,需要注意的是这里使用this来声明,而不是var.因为var使用来定义私有方法的.
    */
    function BaseClass(){
        this.show = function(){
            alert("BaseClass show");
        }
        this.init = function(){
            alert("BaseClass init");
        }
    }
    /*
    现在类写好了,我们写个js来测试一下,看看看结果是不是跟我们想想的一样?
    */
    function test(){
        var s = new BaseClass();
        s.init();
        s.show();
    }
</script>

效果截图:

    

看到了这个结果,其实和C#的调用方式是一样的.

到目前为止,我们学会了如何创建JS类了.其实创建JS还可以这样写.

    //第一种方法
    function BaseClass(){
        this.show = function(){
            alert("BaseClass show");
        }
        this.init = function(){
            alert("BaseClass init");
        }
    }
    //第二种方法:prototype属性来定义BaseClass
    BaseClass.prototype.show = function(){
        alert("BaseClass show");
    }
    BaseClass.prototype.init = function(){
        alert("BaseClass init");
    }
    //上面这种写法不直观,可以将所有的方法写到一起
    BaseClass.prototype = function(){
        show: function(){
            alert("BaseClass show");
        },
        init:function(){
            alert("BaseClass init");
        }
    }