js面试题－－红绿灯切换效果

今天这里要纪录的是一个也比较常见的面试题；

题目： 尽可能从API设计角度实现一个红绿灯效果，要求每3秒切换一次；

所谓的api设计角度，简单的理解就是通过.来调用实现。因此在这里我们初步设计实现的方式为：

ele(标签名).turn()

在实现点方法实现之前我们可以先来看下，最基本的效果代码，即只要写一个函数即可：

       var demo = document.getElementById('demo');

         (function reset(){
             setTimeout(function(){
                 demo.className = 'testgreen';
                 console.log('green');
                 setTimeout(function(){
                     demo.className = 'testred';
                     setTimeout(reset,0);
                },3000)
             },3000)
         })()

也许下面的代码并不能完全的符合题目要求，不过，这个后期可以再继续改善，现在先按照初步设计实现的方式来实现效果：

首先是很简单的一个div标签：

<div id="demo" class="turnRed">
    test
</div>

由于我们是想要通过更改class名字来实现切换，因此这里要添加上css样式：

        .testred {
            color: red;
        }

        .testgreen {
            color: green;
        }

接下来就是最重要的js代码了，这里主要是通过构造函数的方式实现

        function Test(nn) {
            this.nn = document.getElementById(nn);
        }

        Test.prototype.turn = function() {
            var demo = this.nn;

            (function turnColoe() {
                var that = this;
                setTimeout(function(namee) {
                    demo.className = 'testgreen';
                    console.log('green');
                    setTimeout(function(namee) {
                        demo.className = 'testred';
                        setTimeout(turnColoe(), 0);
                    }, 3000)
                }, 3000)
            })()
        }


        function ele(n) {
            var test = new Test(n);
            return test;
        }

        ele('demo').turn();