js实现一个红绿灯，把一个圆形 div 按照绿色 3 秒，黄色 1 秒，红色 2 秒循环改变背景色

<style>
    #circle {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: relative;
        top: 0.3rem;
    }
</style>
<html>
<div id="circle"></div>

</html>
<script>
    function sleep(duration) {
        return new Promise(function (resolve) {
            setTimeout(resolve, duration);
        })
    }
    async function changeColor(duration, color) {  
        document.getElementById("circle")
        circle.style.backgroundColor = color
        await sleep(duration);
    }
    async function main() {
        while (true) {
            await changeColor(3000, "green");
            await changeColor(1000, "yellow");
            await changeColor(2000, "red");
        }
    }
    main()
</script>

posted on 2020-09-24 16:16 小名香菜~ 阅读(642) 评论(0) 编辑收藏举报