JavaScript setzt dreifarbige Lichter

JavaScript ist eine weit verbreitete Programmiersprache, die von vielen Webentwicklern zum Erstellen interaktiver und dynamischer Webseiten verwendet wird. Unter anderem bietet das DOM-Objekt (Document Object Model) in JavaScript einige interessante Methoden und Eigenschaften zum Bearbeiten von HTML-Elementen. In diesem Artikel gehen wir diese Methode durch, um ein unterhaltsames dreifarbiges Licht zu erstellen, und lernen, wie man HTML-Elemente mit JavaScript manipuliert.

Zuerst müssen wir in HTML einen Container mit Lichtern erstellen und ihm drei kreisförmige Elemente hinzufügen, um rote, gelbe und grüne Lichter darzustellen. Wir können CSS-Stile verwenden, um die Breite, Höhe und Farbe dieser Elemente festzulegen.

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

Nachdem wir das anfängliche HTML und CSS eingerichtet haben, werden wir als Nächstes JavaScript-Code verwenden, um die Lichter zu manipulieren. Wir erstellen eine Funktion namens „setLight“, mit der der Zustand der drei Lichter gesteuert wird.

Zuerst müssen wir eine Variable namens „cur“ definieren, um den aktuellen Status des Lichts zu verfolgen. Wir setzen es auf 0, was bedeutet, dass im Ausgangszustand das rote Licht an ist.

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

Als nächstes erstellen wir eine Funktion namens „setLight“. Diese Funktion bestimmt anhand des aktuellen Werts der Variablen „cur“, welches Licht sich im hellen Zustand befinden soll, und versetzt die übrigen Lichter in den dunklen Zustand. Wir verwenden das classList-Attribut, um die „on“-Klasse im Lichtkreis hinzuzufügen und zu entfernen, um diese Funktionalität zu erreichen.

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

Als nächstes werden wir einen Timer verwenden, um die Statusänderungen der drei Lichter zu steuern. Wir ändern den Zustand des Lichts auf alle 2 Sekunden. Die Zustandsänderung der Lampe wird erreicht, indem der Wert der Variablen „cur“ um 1 erhöht und auf 0 zurückgesetzt wird, wenn der Wert von cur 3 erreicht.

setInterval(function() {
    cur++;

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

    setLight();
}, 2000);

Zum Schluss noch den JavaScript-Code in den HTML-Code einfügen und schon ist unser dreifarbiges Licht fertig.

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

Wie oben erwähnt, verwenden wir die DOM-Objektmethoden und -Eigenschaften von JavaScript, um die Elemente zu manipulieren, die wir in HTML definieren. Wir haben eine Funktion namens „setLight“ erstellt, um den Zustand der drei Lichter zu steuern, und dann einen Timer verwendet, um die Funktion regelmäßig aufzurufen, um den Zustand der drei Lichter zu ändern. Am Ende haben wir ein sehr interessantes dreifarbiges Licht geschaffen, das durch das Zusammenspiel von HTML und JavaScript dynamisch wechselnde Lichteffekte erzielt.

Das obige ist der detaillierte Inhalt vonJavaScript setzt dreifarbige Lichter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!