今天这里要纪录的是一个也比较常见的面试题;
题目: 尽可能从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();