`#bulb{width:100px; height: 100px; border: 1px #333 solid; margin: 20px;} #bulb.active{background: yellow;}`
<button type="button" id="toggle">toggle</button>
<button type="button" id="getState">getState</button>
<button type="button" id="off">off</button>
<button type="button" id="on">on</button>
<button type="button" id="blink">blink</button>
<div id="bulb"></div>
var $ = function(el){ return document.getElementById(el); }; var bulb = $('bulb'); var lightBulbAPI = { toggle : function(){ if(bulb.className == 'active'){ bulb.className = ''; }else{ bulb.className = 'active'; } }, getState : function(){ if(bulb.className == 'active'){ console.log("ON"); }else{ console.log("OFF"); } }, off : function(){ if(bulb.className == 'active'){ bulb.className = ''; } bulb.className = ''; clearInterval(); }, on : function(){ bulb.className = 'active'; }, blink : function(){ setInterval(function(){ console.log(this.off); if(bulb.className == 'active'){ bulb.className = ''; }else{ bulb.className = 'active'; } }, 300); } }; $('on').addEventListener('click', lightBulbAPI.on); $('off').addEventListener('click', lightBulbAPI.off); $('getState').addEventListener('click', lightBulbAPI.getState); $('toggle').addEventListener('click', lightBulbAPI.toggle); $('blink').addEventListener('click', lightBulbAPI.blink);
答案 0 :(得分:0)
试试这个:
var timer,
/* ... */,
api = {
/* ... */
off : function(){
/* ... */
clearInterval(timer);
},
/* ... */
blink : function(){
timer = setInterval(/* ... */);
}
};
/* ... */