当前位置：网站首页>JS make a traffic light

JS make a traffic light

2022-07-27 07:25:00 【Ape code takes the lead】 

<!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" > red </div>
        <div class="green" id="green"> green </div>
        <div class="yellow" id="yellow"> yellow </div>
        <span onclick="login()"> Start </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 = " red ";
        i = 2;
    }
    function clear2(){
        clearInterval(interval);
        document.getElementById("green").style = "background-color:darkgrey";
        document.getElementById("green").innerHTML = " green ";
        j = 2;
    }
    function clear3(){
        clearInterval(interval);
        document.getElementById("yellow").style = "background-color:darkgrey";
        document.getElementById("yellow").innerHTML = " yellow ";
        k = 3;
    }
</script>
</html>

 

原网站

版权声明
本文为[Ape code takes the lead]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207270610254339.html

边栏推荐

猜你喜欢

随机推荐