js做一个红绿灯

最新推荐文章于 2023-10-26 17:55:23 发布

NiKo_.gg

最新推荐文章于 2023-10-26 17:55:23 发布

阅读量320

点赞数 8

本文链接：https://blog.csdn.net/m0_63293142/article/details/125879032

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    main{
        background-color: black;
        width: 100%;
        height: 700px;
    }
    main div{
        width: 250px;
        height: 250px;
        background-color: darkgrey;
        float: left;
        margin: 10% 100px;
        border-radius: 50%;
        color: white;
        text-align: center;
        line-height: 250px;
        font-size: 40px;
    }
    span{
        color: white;
    }
    span:hover{
        cursor: pointer;
    }
</style>
<body>
    <main>
        <div class="red" id="red" >红</div>
        <div class="green" id="green">绿</div>
        <div class="yellow" id="yellow">黄</div>
        <span onclick="login()">开始</span>
    </main>
</body>
<script>
    let i =2;
    let j =2;
    let k =3;
    let interval;
    
    function login(){
        interval = setInterval(demo1,1000);
    }
    function demo1(){
        document.getElementById("red").style = "background-color:red";
        document.getElementById("red").innerHTML = i;
        if(i==0){
            clear1();
            demo2();
            interval = setInterval(demo2,1000);
            return;
        }
        i--;
    }
    function demo2(){
        document.getElementById("green").style = "background-color:green";
        document.getElementById("green").innerHTML = j;
        if(j==0){
            clear2();
            demo3();
            interval = setInterval(demo3,1000);
            return;
        }
        j--;
    }
    function demo3(){
        document.getElementById("yellow").style = "background-color:yellow";
        document.getElementById("yellow").innerHTML = k;
        if(k==0){
            clear3();
            demo1();
            interval = setInterval(demo1,1000);
            return;
        }
        k--;
    }

    function clear1(){
        clearInterval(interval);
        document.getElementById("red").style = "background-color:darkgrey";
        document.getElementById("red").innerHTML = "红";
        i = 2;
    }
    function clear2(){
        clearInterval(interval);
        document.getElementById("green").style = "background-color:darkgrey";
        document.getElementById("green").innerHTML = "绿";
        j = 2;
    }
    function clear3(){
        clearInterval(interval);
        document.getElementById("yellow").style = "background-color:darkgrey";
        document.getElementById("yellow").innerHTML = "黄";
        k = 3;
    }
</script>
</html>