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>

效果截图:

aaarticlea/png;base64,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" alt="" width="244" height="156" />     aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQIAAACcCAIAAAAbNjKAAAANVklEQVR4nO2cTXMTRx7G5+OIgip9AQVIDk5u2JUq5ZCaDzA5m3BDW8aXIbLmrZsUtU6oZMl1V951siaBJcE42VpwMIlsvDYOMQQHv6jAitkqkoP2MG89M62RzbSkcfP8SmWNNP3vaVn/Z7p7ph8plFLboabl2A6NbVs2MS3HIZQQatnEsgkh1CHUtBzLJghEoDSBCqWUEFqdMCyHUEoth1QnDIdQSqlpOROGSSmllBqmbZi2u10zTNNyEIhAaQIVw7TdfbZDa6blScQhhmm75SzbMS2HEEqoqy2HUuoQikAEShOo1Awz6DWqNSPoKWqGSXy5GKbl68wKtIVABEoTqFBKHUJrhmV7ciE1r+uglk0M0w4O4FVKqWHabqUIRKAcgfuQAeVW7SAQgdIERgZFE9H+YnLyo/HxcQ2AQ874+Pjk5MfcJPcGRSmzh3Pnzi0sLLQBOOTMz8+PjY1xk9wJ5gadriVpmjbo9gMgBk3TOl0wrRmmQr27CTZzZ8HbhgyANGiaxk1y7/ZZdcJwOwnboeerE8G+6oQBGQBp0DSNm+SUUkqpYtmO7RBCwjvMhFDbIZbtQAZAGjRN4ya5u+3NDc5XJ4Jh0/nqBMHcAMiFpmncJDctpzphKLZDbYdaDrEd6pBw23YgAyAPmqZxk9zdVs5XJ9x7DQ6h+vkP3GGTaTvnqxOQAZAGd26QTHJvbsD2BrFtyABIQ9AbcBOeNzf4AHMDIBvxucEH0bmBZZPwSpHNTqIJZACkIbxSFE1yd7aA+wbglaDLfQP/phrHnwYZAGnQNI2b5N1NmJABkIaUNUVdTJiQAZCGYFB0YBMmZACkIZDBgU2YkAGQBk3TXtKECRkAaegigxQTJmQApCEYFB3YhAkZAGnoMkXGBVPwKgATJgAwYQIAEyYAbZgw80FdVYp643DVLBUwYaZSV5UQtS68Ui9FIYMBAxNmKkwWNfSigIyqqxE91dWi3oAMBg5MmKmwWSQgo+oqv0+BDAYMTJipMFkUSaiGXowOa9ihjp/o4Tvdxj4xtcXqSRwsWSQgXrauKkW97r/JHD0s6NfSoedr6EX5hQQTZir8uUFDV5l8UettToaz2eOX2ocM6iojoqLeYA6RLJwgUdb9AIx63L2RAV7woq6Gu4tFr/mvhApgwkyHTbno5CB+qndfM0opKhGKemN/vQEbqtaD10xg7FAsvLKRNnOV5b/v6aChF9W6l/6vhgpgwkwnkZ/eST3Iwmhmh1mYPC8nSyffb+jFIIljNcRzP5Hw0er8sgeSgauDhl70xFDUG94cXnZgwkyF1xswvUKYtnU9NkyK9B3BUIfNc3dH5EoRM4UOtNbQ9egwKXGokERZvgw6DIq8zWKRHRoJu0yca2DCTCUyN0jOYou6zmZWbArRYSbL1hnvU5ha9CDJmcOF4uPPkBNl+TKItiLenUWm5q+ECmDCBAAmTADaMGEC0IYJE4A2TJgAtGHCBKANEyYAbZgwAWjDhAlAGyZMANo5NGHWDGM/j14c+tDwiiz77CO5M2HWDGOvG3wZRJY+RxYDdVyXnJ5Q4erKYCV+GKakwmtBgtj60XhDvJWe7MeqJ46bMOJ0PVT4AQ60XMhrTZt1WyRqjKxQ8v993LblbKlS7kyYrgz++o8rscffpr+cvnLtq399kyaDYLV8LHHjaRzwkjI4QCX7KeJbxMKcDj8Ir4LgRadl0KnLo/kaZqwN3FRlWxM2MC2xQxnkv+vKnQkzkMGtO4vBY+HH5cXl+6trD76Znesig3DpckcZMK+46em/yZEBs7a58wk4acJMPUEHhwmPG5eBv8SaX2FoVeATc+zEPzDfIF1XeZ1PuMg10iNEFBtri6pyaspZZ5A/E2ZMBvN3l35YXFle/WntwfrDR798+92/02XQsSfuKIPkl9xJBtEc6tBDRJI3qI/JZ98NEyyiZmpxVRaXQeJIvN4gImju+4zZkvUcxww4YeHEMRNvpMqO18jcdgy5M2EGMpi/e2+h8d/GvdXVtQfrDx893th48uTJ7fn5VBno/NR52d4gPKHFzqqxOqNpx5FBXI9ecF0tqmpUiMWiqkZlwFgIOs4N9tsbtKOFOUkZ9KYxC6bfGi80Ybzmzj68SdKhkEG+TJiuDP7+z6uLy/dX7j/4ef3RkydPdnZ2ms1ms9lsLC51GRSFE8teDIoSh/O3u8igY28QyaBo22O51enM306+12nbe+2LMW6FYz6Yyrrz4x8imc5JGdRV19TvP3eZRwya3JkwXRnMfHV97cH6L48fb21tPX36tOVzf+2n7FNk4TLgpLJb4oAyCPoIVgbsE2dyEBnfdBmkJF5EYLM8+uMCXseQlAGnGn+iwo5PD0VvkC8TpiuDq9dvPPrl8ebmZrPZbLVae3t7z58/39vbW3/4sJsMwnF8hy85mww4I/aIJ/hAgyK/fFCC3ckMQ4p6veNlI+ZTxQcw3LL15AAvNkl2WxPTfScZxLua0Jl9yGSQLxOmK4MbN791NfDs2bO9vb3/+WxsbHS/b9DTQVHimwymtYkR84F7g8Rwhr0oxdM25yzuTiD4o47wJzX86TLnt148UXNulURlUNeLRVXlyyDy8etqUddjLc+bGnJnwnRl8J9btxuNxdXV+z+vr2/8+uvW9vb2zs729s7m5la33oDz4uVkwNwQ0tmsjVy/T/QzygEvmEZlwIosJoPodLhDHqW59XnleEO9UPvsQWIycJvTaVAUic9tF8CQOxNmprvI7LWMJMmTUmoZ9suL/Y5DPC8jBGOklO8/0r3Esyh6Q5bzqxUJQcV/jyJRrXfxgJOsnZrFfpqgivC92AQ63MGTAff/nCtl5M6EiTVFoP/AhAkATJgAwIQJQBsmTADaMGEC0IYJE4B2Dk2YAPSf3JkwAeg/uTNhAtB/cmfCBKD/5M6ECUD/yZ0JE4D+kzsTJgD9J3cmTAD6T+5MmAD0n9yZMAHoP7kzYQLQf3JnwgSg/+TOhAlA/4EJEwCYMAGACROANkyYALRhwgSgDRMmAG2YMAFoZzRhbgAgBZlMmC0ApCCTCXPQjQdADJlMmINuPABiyGTCHHTjARBDJhPmoBsPgBgymTAH3XgAxJDJhDnoxgMghkwmzEE3HgAxZDJhDrrxAIghkwlz0I0HQAyZTJiDbjwAYshkwhx04wEQQyYT5qAbD4AYMpkwB914AMSQyYQ56MaDLnxyfbFsfFmqTEnzKBtffnJ9Ufg/KpMJU3hrgEAuXWucIDeGbu2+tfyHNI+hW7snyI1L1xpi/1eZTJhimwLE8nbtytDt3ffWXgy6ISJ5b+3F0O3dt2tXxFabyYQptilALKXK1Fv3/hh0K8Tz1r0/SpUpsXVmMmGKbQoQiyuDXenokQxgwpQTVwbPpKOnvQFMmLIBGewfmDClpVSZenPp96c94bN3lHc+S9n/3Z+OpRfIwJtLv/dCBjBhyokrg6YA5irHFJ/y5WbzcllhKF9OFOJwrDInoinNZrNHMoAJU07EyaDZbDabc5Vj5cvMc7PZbF4uK8H2XOVY51S/XM69DGDClJNSZWpo6cWOIG5WypWbOzt/KR8tl4/GT/VHKzdFHac7Q0sveiEDmDDlpFSZGlp8sS2GT/1xUPnT2bNHj56d3d6ePXu0/On29rb7evZsQhwxqZydFdOUocWeyAAmTDkpVabeuPt8TQQXRxRFGbm4dnFEGbk4c+ZIPMWPnJmJh8ycOTJyUcjB47xx93nvZAATpmwIk8HMmSMjIyOsDI6cmQkT3X/tF70Y2xJNj2QAE6aclCpTry/srYrhw2Fl+EP37xfvF+K9QeH9L1ZXV1dXv3i/wGzySgjg9YW9fssAJszDiyuDFTFcGFaGL6xcGFaGT58uFE5/vrKy8vnpwvAF99l9Y+XCsKIowxdWVpi94umRDGDClJNSZerkwm/LYqCn/NN6oVAYnV5eXl6eHi2cou5zYXR6eZmeUgqj0/SUohRGp4O94jm58Fu/p8i4YHp4ES0DP+f97J4eLZwaHS0oiqKcokEBrzAHUarokQxgwpSTUmXq5J3flqTj5J2eyAAmTDkpVaZOfN9qSMeJ71v9XkwBE+bhBTLYPzBhSosrgx+ko0cygAlTTkqVqePzu3el4/j8LkyYYL+8XbtyfHbz3fmtOxLx7vzW8dnNXljyYcKUk0vXGiXr69dubr42/0yex83NkvV1L36gBSZMaZm8+uNIdWbgv7El8DFSnZm8+qPwfxRMmADAhAkATJgAtGDCBKAFEyYALZgwAWjBhAlACyZMAFowYQLQggkTgBZMmAC0YMIEoAUTJgAtmDABaMGECUALJkwAWjBhAtDKYsIcGzs3Nzc36PYDkJXZ2dmxsbGXNGH+efKjc+PjGgCHnPHx8Y8/vvSSJkx3IGU5xLKJQ6hDqGUTyyHe6AqBCJQlMO2+gTtsMky7Zpjuds0wDdN2txGIQGkC00yY7g02h1DiassmhFCHUNNygtV4CESgBIFpa4pcf1qgs0BbNcN0Ly4hEIFyBKatMPUXZDum5RBCCXW15V1dRSACpQlMM2EGU2nDtHydWYG2EIhAaQL/D8Y7BE8DSVExAAAAAElFTkSuQmCC" alt="" />

看到了这个结果,其实和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");
         }
     }