用jQuery写红绿灯项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body, html {
            margin: 50px 200px;
            padding: 0
        }

        .wrapper {
            width: 100px;
            height: 300px;
            background: white;
            border: 2px solid #111111;
            border-radius: 50px;
            position: relative;
            display: inline-block;
        }

        div {
            width: 50px;
            height: 50px;
            border: 1px solid #111111;
            border-radius: 50%;
            margin: 5px auto;
            padding: 20px;
        }

        .red {
            background: red;
        }

        .green {
            background: green;
        }

        .white {
            background: yellow;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="red"></div>
    <div class="green"></div>
    <div class="white"></div>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(function () {
        function changeColor() {
            setTimeout(() => {
                $('.red').css('border', '5px solid #111111')
                $('.green').css('border', '1px solid #111111')
                $('.white').css('border', '1px solid #111111')
                setTimeout(() => {
                    $('.red').css('border', '1px solid #111111')
                    $('.green').css('border', '5px solid #111111')
                    $('.white').css('border', '1px solid #111111')
                    setTimeout(() => {
                        $('.red').css('border', '1px solid #111111')
                        $('.green').css('border', '1px solid #111111')
                        $('.white').css('border', '5px solid #111111')
                        setTimeout(
                            changeColor(), 1000
                        )
                    }, 1000)
                }, 1000)
            }, 1000)
        }

        changeColor()
    })
</script>
</html>
关键是setTimeout的使用，在最后一个setTimeout重复函数
用jQuery写红绿灯项目

猜你喜欢
