JavaScript sets three-color lights

JavaScript is a widely used programming language used by many web developers to create interactive and dynamic web pages. Among them, the DOM (Document Object Model) object in JavaScript provides some interesting methods and properties to manipulate HTML elements. In this article, we'll go through this method to create a fun three-color light and learn how to manipulate HTML elements using JavaScript.

First, we need to create a container of lights in HTML and add three circular elements to it to represent red, yellow and green lights. We can use CSS styles to set the width, height, and color of these elements.

<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>

After setting up the initial HTML and CSS, we will next use JavaScript code to manipulate the lights. We will create a function called "setLight" which will be used to control the state of the three lights.

First, we need to define a variable named "cur" to track the current status of the light. We set it to 0, which means the initial state is that the red light is on.

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

Next, we will create a function called "setLight". This function will determine which light should be in the light state based on the current value of the variable "cur" and set the remaining lights to the dark state. We use the classList attribute to add and remove the "on" class on the light circle to achieve this functionality.

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;
    }
}

Next, we will use a timer to control the status changes of the three lights. We change the light's state to every 2 seconds. The state change of the lamp is achieved by incrementing the value of the variable "cur" by 1 and resetting it to 0 when the value of cur reaches 3.

setInterval(function() {
    cur++;

    if(cur >= 3) {
        cur = 0;
    }

    setLight();
}, 2000);

Finally, add JavaScript code to the HTML, and our three-color light is complete.

<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>

As mentioned above, we use JavaScript’s DOM object methods and properties to manipulate the elements we define in HTML. We created a function called "setLight" to control the state of the three lights, and then used a timer to call the function periodically to change the state of the three lights. In the end, we created a very interesting three-color light that achieves dynamically changing lighting effects through interaction between HTML and JavaScript.

The above is the detailed content of JavaScript sets three-color lights. For more information, please follow other related articles on the PHP Chinese website!