javascript怎么设置三色灯

这篇文章主要讲解了“javascript怎么设置三色灯”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“javascript怎么设置三色灯”吧！

首先，我们需要在HTML中创建一个灯的容器，并在其中添加三个圆形元素，以表示红、黄和绿色灯。我们可以使用CSS样式来为这些元素设置宽度、高度和颜色。

<div id="light">    <div class="light-circle red"></div>    <div class="light-circle yellow"></div>    <div class="light-circle green"></div></div><style>    #light {        width: 200px;        height: 400px;        margin: 0 auto;        border: 2px solid black;        border-radius: 10px;        overflow: hidden;        position: relative;    }    .light-circle {        width: 100%;        height: 100%;        position: absolute;        top: 0;        left: 0;        border-radius: 50%;        background-color: #333;        transition: all 0.5s ease;    }    .red {        background-color: red;    }    .yellow {        background-color: yellow;    }    .green {        background-color: green;    }</style>

在设置了初始的HTML和CSS之后，接下来我们将使用JavaScript代码来操纵这些灯。我们将创建一个名为“setLight”的函数，该函数将用于控制三个灯的状态。

首先，我们需要定义一个名为“cur”的变量，用于追踪当前灯的状态。我们将其设置为0，表示初始状态为红灯亮。

var cur = 0;    // 初始状态为0：红灯亮

接下来，我们将创建一个名为“setLight”的函数。该函数将根据变量“cur”的当前值来确定哪个灯应处于亮的状态，并将其余灯设置为暗的状态。我们使用classList属性来添加和删除灯圈上的“on”类来实现这个功能。

function setLight() {    var redLight = document.querySelector('.red');    var yellowLight = document.querySelector('.yellow');    var greenLight = document.querySelector('.green');    switch(cur) {        case 0:            redLight.classList.add('on');            yellowLight.classList.remove('on');            greenLight.classList.remove('on');            break;        case 1:            redLight.classList.remove('on');            yellowLight.classList.add('on');            greenLight.classList.remove('on');            break;        case 2:            redLight.classList.remove('on');            yellowLight.classList.remove('on');            greenLight.classList.add('on');            break;    }}

接下来，我们将使用定时器来控制三个灯的状态更改。我们将灯的状态更改为每隔2秒钟一次。灯的状态更改是通过将变量“cur”的值递增1而实现的，并在cur的值达到3时重新设置为0。

setInterval(function() {    cur++;    if(cur >= 3) {        cur = 0;    }    setLight();}, 2000);

最后，在HTML中添加JavaScript代码，我们的三色灯就完成了。

<div id="light">    <div class="light-circle red"></div>    <div class="light-circle yellow"></div>    <div class="light-circle green"></div></div><script>    var cur = 0;    function setLight() {        var redLight = document.querySelector('.red');        var yellowLight = document.querySelector('.yellow');        var greenLight = document.querySelector('.green');        switch(cur) {            case 0:                redLight.classList.add('on');                yellowLight.classList.remove('on');                greenLight.classList.remove('on');                break;            case 1:                redLight.classList.remove('on');                yellowLight.classList.add('on');                greenLight.classList.remove('on');                break;            case 2:                redLight.classList.remove('on');                yellowLight.classList.remove('on');                greenLight.classList.add('on');                break;        }    }    setInterval(function() {        cur++;        if(cur >= 3) {            cur = 0;        }        setLight();    }, 2000);</script><style>    #light {        width: 200px;        height: 400px;        margin: 0 auto;        border: 2px solid black;        border-radius: 10px;        overflow: hidden;        position: relative;    }    .light-circle {        width: 100%;        height: 100%;        position: absolute;        top: 0;        left: 0;        border-radius: 50%;        background-color: #333;        transition: all 0.5s ease;    }    .red {        background-color: red;    }    .yellow {        background-color: yellow;    }    .green {        background-color: green;    }    .on {        box-shadow: 0 0 20px 8px #FFD700;    }</style>

感谢各位的阅读，以上就是“javascript怎么设置三色灯”的内容了，经过本文的学习后，相信大家对javascript怎么设置三色灯这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！