JS-案例-Promise简单实现信号灯效果

最新推荐文章于 2022-04-18 09:58:55 发布

joker.ma

最新推荐文章于 2022-04-18 09:58:55 发布

阅读量468

点赞数 1

分类专栏：案例文章标签： JS Promise 信号灯

本文链接：https://blog.csdn.net/qq_45092792/article/details/92962244

版权

案例专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>信号灯</title>
    <style>
        div{
            width:100px;
            height:100px;
            border-radius:50%;
            border:1px solid #000000;
            position: absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div></div>
<script>
    var div;
    var id=0;
    init();
    function init() {
        div=document.querySelector("div");
        setLight();
    }
    function light(time,color) {
        return new Promise(function(res,rej){
            id=setTimeout(res,time);
            div.style.backgroundColor=color;
        })
    }
    function setLight() {
        light(3000,"#FF0000").then(function () {
            clearTimeout(id);
            return light(3000,"#FFFF00");
        }).then(function(){
            clearTimeout(id);
            return light(3000,"#00FF00");
        }).then(function(){
            clearTimeout(id);
            setLight();
        })
    }
</script>
</body>
</html>

joker.ma

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS-案例-Promise简单实现信号灯效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫