js实现红灯亮三秒，绿灯亮秒灰灯一秒依次循环

Web前端 admin 8年前 (2016-05-17) 2647次浏览已收录 0个评论扫描二维码

群里发了一份js代码，要求三分钟看懂，看了十分钟都没看懂，有木有。

先记录下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #lamp {
          width: 100px;
          height: 100px;
          border-radius: 50px;
        }
    </style>
</head>
<body>
    <div id="lamp"></div>
    <script src="jtd.js"></script>
</body>
</html>

//红灯亮三秒，绿灯亮秒 灰灯一秒 依次循环

var lampstyle= document.getElementById("lamp").style;

function setColor(color,time){
  return function(callback){
             lampstyle.backgroundColor=color;
             setTimeout(callback,time);
  };
}

var queue = function(funcs) {
    (function next() {
        if(funcs.length > 0) {
            var f = funcs.shift();
            f(next);
        }
    })();
};

var setredcolor=setColor("red",3000);
var setgreencolor=setColor("green",2000);
var setgraycolor=  setColor("gray",1000);


+function tick(){
  queue([
    setredcolor,
    setgreencolor,
    setgraycolor,
    tick]);
}();