js实现 红灯亮三秒,绿灯亮秒 灰灯一秒 依次循环 | 少将全栈
  • 欢迎访问少将全栈,学会感恩,乐于付出,珍惜缘份,成就彼此、推荐使用最新版火狐浏览器和Chrome浏览器访问本网站。
  • 吐槽,投稿,删稿,交个朋友
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏少将全栈吧

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

Web前端 admin 9年前 (2016-05-17) 3180次浏览 已收录 扫描二维码

        群里发了一份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]);
}();

喜欢 (0)
[🍬谢谢你请我吃糖果🍬🍬~]
分享 (0)
关于作者:
少将,关注Web全栈开发、项目管理,持续不断的学习、努力成为一个更棒的开发,做最好的自己,让世界因你不同。