Javascript 여러가지 함수

Javscript내에서 createElement(), append(), setTimeout(), setInterval() 함수를 알아보고 스톱워치를 만들어보자.

createElement(): 지정한 html태그를 만들어 반환한다.
append(): 선택한 요소의 마지막에 새로운 요소나 컨텐츠를 추가
setTimeout(): 일정 시간 기다린 후 실행해야하는 코드가 있을 경우에 사용
setInterval(): 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용

    <h1>스탑워치 만들어보기</h1>
    <p>
        <strong id="min">0</strong>
        <strong id="sec">0</strong>
        <strong id="msec">0</strong>
    </p>
    <button id="startBtn">시작</button>
    <button id="resetBtn">재설정</button>

   
        <h3>기록</h3>
        <ol class="record">

        </ol>

화면에 보여질 내용이다. ol요소 내부에는 재설정 버튼을 누를때마다 li요소의 innerText 값으로 시간이 기록될 것이기 때문에 비워놨다.

 <script>
        let min = 0, sec = 0, msec = 0;
        // 상태값을 관리할 변수를 만들고 초기상태값 대입하기
        let isStarted = false;

        document.querySelector("#startBtn").addEventListener("click", (e) => {

            if (isStarted == false) {
                isStarted = true;
                e.target.innerText = "중단";
            }
            else {
                isStarted = false;
                e.target.innerText = "시작";
            }
        });
        </script>

시작버튼을 누르면 중단버튼으로 바뀌고, 중단버튼을 다시 누르면 시작버튼으로 바뀌는것을 구현한 것이다.

<script>
 setInterval(() => {
            //만일 시작된 상태가 아니라면 함수를 여기서 종료하기
            if (isStarted == false) {
                return;
            }
            msec++;
            if (msec == 100) {
                sec++;
                msec = 0;
            }
            else if (sec == 60) {
                min++;
                sec = 0;
            }
            document.querySelector("#msec").innerText = msec;
            document.querySelector("#sec").innerText = sec;
            document.querySelector("#min").innerText = min;
        }, 10);
        </script>

msec값이 100이 되었을 때 sec값을 1증가시키고, sec값이 60이 되었을 때, min값을 1증가시켜 화면에 출력하는 코드다.

<script>
 document.querySelector("#resetBtn").addEventListener("click", () => {
            //시작버튼이 innerText일떄만 리셋 버튼 기능하도록
            let a = document.querySelector("#startBtn");

            if (a.innerText == "시작" && msec != 0) {
                let list = document.createElement("li");
                let ol = document.querySelector(".record");
                list.innerText = min + ":" + sec + ":" + msec;
                ol.append(list);
                min = 0; sec = 0; msec = 0;

                document.querySelector("#msec").innerText = msec;
                document.querySelector("#sec").innerText = sec;
                document.querySelector("#min").innerText = min;
            }
            else {
                return;
            }
        });
        </script>

화면의 버튼이 시작일때, 시간은 흐르지 않으므로 그때의 시간을 ol요소안에 createElement함수를 이용해 li를 만들어 기록했고 시간을 초기화시켰다. 반대로 버튼이 중지상태라는 것은 시간이 계속 흐르고 있을때이다. 그 때는 재설정버튼을 클릭해도 시간이 초기화되지 않도록 return문을 이용했다.