红绿灯效果

最新推荐文章于 2022-10-11 20:06:46 发布

聒噪，

最新推荐文章于 2022-10-11 20:06:46 发布

阅读量283

点赞数 1

文章标签： html css3 js

本文链接：https://blog.csdn.net/yang939207690/article/details/108981785

版权

没事干的小伙伴请过来看看
其实简单想想挺简单的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }

    .all {
        width: 100%;
        height: 80vh;
        background-color: black;
        padding-top: 20vh
    }

    .nos {
        width: 350px;
        border: 5px solid gray;
        display: flex;
        margin: auto;
        border-radius: 15em;
        padding: 10px;
    }

    .no1 {
        background-color: red;
        width: 100px;
        height: 100px;
        margin: auto;
        border-radius: 15em;
        background: radial-gradient(circle 100px, red, black);
        border: 2px solid red;
    }

    .no2 {
        background-color: green;
        width: 100px;
        height: 100px;
        margin: auto;
        border-radius: 15em;
        background: radial-gradient(circle 100px, green, black);
        border: 2px solid green;
    }

    .no3 {
        background-color: yellow;
        width: 100px;
        height: 100px;
        margin: auto;
        border-radius: 15em;
        background: radial-gradient(circle 100px, yellow, black);
        border: 2px solid yellow;
    }

    .gan {
        width: 3%;
        height: 50vh;
        margin: auto;
        border: 5px solid gray;
        border-radius: 0 0 1em 1em;
    }

    .open {
        width: 5px;
        height: 2vh;
        border: 1px solid gray;
        background-color: green;
        border-radius: 0 0.5em 0.5em 0;
        position: absolute;
        left: 52%;
        top: 65vh;
    }

    .close {
        width: 5px;
        height: 2vh;
        border: 1px solid gray;
        background-color: red;
        border-radius: 0 0.5em 0.5em 0;
        position: absolute;
        left: 52%;
        top: 68vh;
    }
</style>

<body>
    <div class="all">
        <div class="nos">
            <div id="no1" class="no1"></div>
            <div id="no3" class="no3"></div>
            <div id="no2" class="no2"></div>
        </div>
        <div class="gan"></div>
        <input type="button" id="open" class="open" onclick="b1()" />
        <input type="button" id="close" class="close" onclick="b2()" />
    </div>
</body>

</html>
<script>

    function m1() {
        document.getElementById("no1").style.transition = "2s";
        document.getElementById("no1").style.boxShadow = "0px 0px 200px 100px red";
        document.getElementById("no2").style.boxShadow = "0px 0px 0px 0px green";
        document.getElementById("no3").style.boxShadow = "0px 0px 0px 0px yellow";
    }

    function m2() {
        document.getElementById("no2").style.boxShadow = "0px 0px 200px 100px green";
        document.getElementById("no1").style.boxShadow = "0px 0px 0px 0px red";
        document.getElementById("no3").style.boxShadow = "0px 0px 0px 0px yellow";
        document.getElementById("no2").style.transition = "2s";
    }

    function m3() {
        document.getElementById("no3").style.boxShadow = "0px 0px 200px 100px yellow";
        document.getElementById("no2").style.boxShadow = "0px 0px 0px 0px green";
        document.getElementById("no1").style.boxShadow = "0px 0px 0px 0px red";
        document.getElementById("no3").style.transition = "2s";
    }

    var num = 1;
    var count = 0;

    function ms() {
        switch (num) {
            case 1:
                m1();
                num++;
                break;
            case 2:
                m3();
                if (count == 0) {
                    num++;
                    count++;
                } else {
                    num--;
                    count--;
                }
                break;
            case 3:
                m2();
                num--;
                break;
        }
    }
    var count1 = 0;
    var start = null;
    function b1() {
        if (count1 == 0) {
            count1 = 1;
            start = setInterval(ms, 2000);
        }
    }
    function b2() {
        if (count1 == 1) {
            count1 = 0;
            clearInterval(start);
        }
    }











</script>

效果如下
在这里插入图片描述

聒噪，

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
红绿灯效果

没事干的小伙伴请过来看看其实简单想想挺简单的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><s
复制链接

扫一扫