promise 实现红绿灯

最新推荐文章于 2023-07-05 15:59:46 发布

hahala2333

最新推荐文章于 2023-07-05 15:59:46 发布

阅读量930

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/hadry123/article/details/103256046

版权

前端学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

使用promise 实现红绿灯颜色的跳转
红灯执行1秒
绿灯执行2秒后
黄灯执行3秒后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            height: 100px;
            width: 100px;
            border: 1px solid #000;
            background: red;
            border-radius: 50px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
<script>
    function light(color, timer) {
        return new Promise((resolve, reject) => {
            setTimeout(function () {
                var div = document.getElementsByTagName("div")[0]
                div.style.backgroundColor = color
                resolve(color)
            }, timer)
        })
    }

    (function restart() {
        'use strict'
        light('red', 1000).then((data) => {
            console.log(data,new Date().getSeconds());
            return light('green', 2000)
        }).then((data) => {
            console.log(data,new Date().getSeconds());
            return light('yellow', 3000)
        }).then((data)=>{
            console.log(data,new Date().getSeconds());
            return restart()
        })
    })();
</script>

hahala2333

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
promise 实现红绿灯

使用promise 实现红绿灯颜色的跳转红灯执行1秒绿灯执行2秒后黄灯执行3秒后<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css...
复制链接

扫一扫