JavaScript는 3가지 색상의 조명을 설정합니다.

JavaScript는 많은 웹 개발자가 대화형 및 동적 웹 페이지를 만드는 데 사용하는 널리 사용되는 프로그래밍 언어입니다. 그중 JavaScript의 DOM(Document Object Model) 개체는 HTML 요소를 조작하는 몇 가지 흥미로운 메서드와 속성을 제공합니다. 이 기사에서는 이 방법을 통해 재미있는 3색 조명을 만들고 JavaScript를 사용하여 HTML 요소를 조작하는 방법을 알아봅니다.

먼저 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 코드를 추가하면 3색 조명이 완성됩니다.

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

위에서 언급했듯이 우리는 HTML에서 정의한 요소를 조작하기 위해 JavaScript의 DOM 개체 메서드와 속성을 사용합니다. 우리는 세 개의 조명 상태를 제어하기 위해 "setLight"라는 함수를 만든 다음, 타이머를 사용하여 이 함수를 주기적으로 호출하여 세 개의 조명 상태를 변경했습니다. 결국 우리는 HTML과 JavaScript 간의 상호 작용을 통해 동적으로 변화하는 조명 효과를 구현하는 매우 흥미로운 3색 조명을 만들었습니다.

위 내용은 JavaScript는 3가지 색상의 조명을 설정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!