Coding 공부/JavaScript

[JavaScript_Example] TrafficLight(HTML+CSS+JavaScript)

CBJH 2024. 3. 25. 15:58
728x90
반응형

1. 코드 설명

  • 신호등을 HTML+CSS로 만든다. 
    • div를 사용해서 사각형 디비전, 원(border-radius:50%) 디비전을 만든다.
  • 버튼을 만든다.
    • 버튼을 클릭하면(.button:active{}) 색상이 바뀌어 사용자가 클릭했는지 알 수 있게 만든다.
  • 처음 신호등 원의 색상은 회색으로 시작한다.
    • 클릭하면 3초간 초록불 점등 >> 2초간 노란불 점등 >> 3초간 빨간불 점등>> 3초간 초록불 점등... 계속 반복하도록 만든다.

 

2. 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>신호등</title>
    <style>
        *{
        margin: 0;
        padding: 0;
        }
        #trafficBody{
            position: relative;
            width: 300px;
            height: 1050px;
            background-color: black;
            box-sizing: border-box;     /*padding때문에 늘어난 영역을 원래대로 만듬*/
            margin: 0 auto;             /*중앙 정렬*/
        }
        #trafficBody>#green>#greenCircle{
            background-color: green;
        }
        #trafficBody>#yellow>#yellowCircle{
            background-color: yellow;
        }
        #trafficBody>#red>#redCircle{
            background-color: red;
        }
        .Circle{
            width: 250px;
            height: 250px;
            border-radius: 50%;
            margin: 0 auto;             /*중앙 정렬*/
        }
        .button{
            position: relative;
            left: 100px;
            width: 100px;
            height: 100px;
            margin: 100px auto;
            background-color: white;        /*버튼 배경 색*/
            color: black;                   /*폰트 색상*/
            font-size: 30px;                    /*폰트 사이즈*/            
            border:none;                        /*테두리 선 없음*/
            border-radius: 10%;                 /*테두리 둥글게*/
        }
        .button:hover {
        background-color:#002ead;      /*마우스 위에 올렸을 때 색상 변경*/ 
        transition: 0.7s;               /*딜레이*/
        }
        .button:active {
        background-color: #ffbf00;  /*클릭하면 색상 변경*/
        }
    </style>
    <script>
        window.onload = function() {
        var DivGreen = document.getElementById('greenCircle');
        var DivYellow = document.getElementById('yellowCircle');
        var DivRed = document.getElementById('redCircle');
        
        function initLight() {
            DivGreen.style.backgroundColor = 'gray';
            DivYellow.style.backgroundColor = 'gray';
            DivRed.style.backgroundColor = 'gray';            
        }

        function cycleLights() {
            initLight(); // 초기에 모든 신호등을 회색으로 변경
            setTimeout(function() { DivGreen.style.backgroundColor = 'green'; }, 0); // 초록불
            setTimeout(function() { initLight(); DivYellow.style.backgroundColor = 'yellow'; }, 3000); // 노란불
            setTimeout(function() { initLight(); DivRed.style.backgroundColor = 'red'; }, 5000); // 빨간불
            setTimeout(initLight, 7000); // 다시 회색으로
        }

        window.run = function() {
            cycleLights(); // 최초 실행
            setInterval(cycleLights, 7000); // 7초마다 반복
        }
    }
    </script>
</head>
<body>
    <div id = "trafficBody">
        <li id="green"><div id="greenCircle" class="Circle">초록색</div></li>
        <li id="yellow"><div id="yellowCircle" class="Circle">노란색</div></li>
        <li id="red"><div id="redCircle" class="Circle">빨간색</div></li>
        <button onclick="run()" class="button">Run!</button>
    </div>
</body>
</html>
  • window.onload
    • 웹 페이지가 완전히 로드되고 초기화된 후에 실행되는 이벤트 핸들러
    • DOM 요소에 접근하거나 조작해야 하는 스크립트에서 중요한 역할
  • DivGreen, DivYellow, DivRed가 전역 변수로 쓰였기 때문에 사용한다.
  • setTimeout(함수, 지연할 시간);
    • 함수는 인자에 들어간 함수가 실행 할 때까지 지연할 시간을 지정할 수 있다.
    • 시간은 ms 단위이다.
    • 지연할 시간에 3000이 들어간다면, 3000ms 후에 해당 메서드를 실행한다.
  • setInterval(함수, 반복할 시간);
    • 함수는 인자에 들어간 함수를 반복할 시간마다 계속해서 반복한다.
    • 시간은 ms단위이다.
    • 반복할 시간에 7000이 들어간다면, 7000ms 마다 해당 메서드를 반복해 실행한다.

 

3. 실행 결과

 

신호등
  • 초록색
  • 노란색
  • 빨간색