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 중국어 웹사이트의 기타 관련 기사를 참조하세요!