JavaScript définit des lumières tricolores

JavaScript est un langage de programmation largement utilisé par de nombreux développeurs Web pour créer des pages Web interactives et dynamiques. Parmi eux, l'objet DOM (Document Object Model) en JavaScript fournit des méthodes et propriétés intéressantes pour manipuler des éléments HTML. Dans cet article, nous passerons en revue cette méthode pour créer une lumière tricolore amusante et apprendre à manipuler des éléments HTML à l'aide de JavaScript.

Tout d'abord, nous devons créer un conteneur de lumières en HTML et y ajouter trois éléments circulaires pour représenter les lumières rouges, jaunes et vertes. Nous pouvons utiliser des styles CSS pour définir la largeur, la hauteur et la couleur de ces éléments.

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

Après avoir configuré le HTML et le CSS initiaux, nous utiliserons ensuite le code JavaScript pour manipuler les lumières. Nous allons créer une fonction appelée "setLight" qui servira à contrôler l'état des trois lumières.

Tout d'abord, nous devons définir une variable nommée "cur" pour suivre l'état actuel de la lumière. Nous le mettons à 0, ce qui signifie que l'état initial est que le voyant rouge est allumé.

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

Ensuite, nous allons créer une fonction appelée "setLight". Cette fonction déterminera quelle lumière doit être à l'état clair en fonction de la valeur actuelle de la variable « cur » et mettra les lumières restantes à l'état sombre. Nous utilisons l'attribut classList pour ajouter et supprimer la classe "on" sur le cercle lumineux afin d'obtenir cette fonctionnalité.

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

Ensuite, nous utiliserons une minuterie pour contrôler les changements d'état des trois lumières. Nous changeons l'état de la lumière toutes les 2 secondes. Le changement d'état de la lampe s'effectue en incrémentant la valeur de la variable "cur" de 1 et en la remettant à 0 lorsque la valeur de cur atteint 3.

setInterval(function() {
    cur++;

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

    setLight();
}, 2000);

Enfin, ajoutez le code JavaScript dans le HTML et notre lumière tricolore est terminée.

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

Comme mentionné ci-dessus, nous utilisons les méthodes et propriétés des objets DOM de JavaScript pour manipuler les éléments que nous définissons en HTML. Nous avons créé une fonction appelée "setLight" pour contrôler l'état des trois lumières, puis avons utilisé une minuterie pour appeler périodiquement la fonction afin de changer l'état des trois lumières. En fin de compte, nous avons créé une lumière tricolore très intéressante qui permet d'obtenir des effets d'éclairage changeants de manière dynamique grâce à l'interaction entre HTML et JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!