스탑워치 만들기 (프로젝트 2인, javascript 담당)

FrontEnd/JavaScript

by H_Develop 2022. 7. 7. 09:02

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<style>

* {margin: 0px; padding: 0px;}

    section {width : 600px; height: 750px;   text-align : center; font-weight: bold; background-color: black;}

  #stopwatch { display: inline-block; width: 600px; height: 350px;
     margin-top: 20px;  line-height: 350px; font-size: 120px; background-color: black;
     color:white; border-bottom: solid 1px white;}

  #reset1 {display: inline-block; width: 120px; height: 120px;  margin-left:60px;
     margin-top : 70px; border-radius: 100px; line-height: 100px; font-size: 30px;
     background-color: black; color:white; border: double 8px white;}

  #start1 {display: inline-block;  width: 120px; height: 120px; font-size: 30px;
    margin-top : 100px; box-sizing: border-box; border-radius: 100px;  
    line-height: 100px; background-color: black; color:white; border: double 8px white;}

    #stop1 {display: inline-block;  width: 120px; height: 120px;  
   margin-top : 70px; border-radius: 100px; margin-left:60px; font-size: 30px;
    line-height: 100px; background-color: black; color:white; border: double 8px white;}

    #box {  width: 600px; height: 70px; border-bottom: solid 1px white; font-size: 30px;
        text-align: center; line-height: 70px; background-color: black; color:white;}

</style>
<script>
        var ms_cycle = 00;
        var s_cycle=00;
        var m_cycle=00;
        var time_cycle=0;

        // if ( m_cycle <10 ) {
        // // if (s_cycle <= 1){
        //     m_cycle = "0"+m_cycle;
        // }
        

        function time () {

            if (ms_cycle == 100) {
                ms_cycle=0;
                s_cycle++;
                // ms_cycle = String(0).padstar(2, "0");
                // ms_cycle=0;
            }

            if (s_cycle == 60) {
                s_cycle=0;
                m_cycle++;
            }

            if ( ms_cycle < 10 ) {
                    msc_cycle = "0"+ms_cycle;
            } else {
                msc_cycle = ms_cycle;
            }

            if ( s_cycle <10 ) {
                    sc_cycle = "0"+s_cycle;
            } else {
                sc_cycle = s_cycle;
            }

            if ( m_cycle <10 ) {
                mc_cycle = "0"+m_cycle;
            } else {
                mc_cycle = m_cycle;
            }

            document.getElementById("stopwatch").innerHTML= mc_cycle + " : " + sc_cycle + " : " + msc_cycle;
            start();
        }


        function start() {
            ms_cycle++;
            time_cycle = setTimeout(time, 10);
        }

        function stop () {
            clearTimeout(this.time_cycle);
        }

        function reset () {
            s_cycle = 0;
            m_cycle = 0;
            document.getElementById("stopwatch").innerHTML= "00 : 00 : 00" ;
        }
</script>
<title>watch</title>
</head>
    <body>
            <section>
                <div id="box">
                    STOP WATCH
                </div>
                <div id="stopwatch">
                    00:00
                </div>
                <button id="start1" onclick="time()">start</button>
                <button id="stop1" onclick="stop()">pause</button>
                <button id="reset1"onclick="reset()">reset</button>
            </section>
</body>
</html>

time() 는 계속 화면에 시간을 표시를 해주며,

start() 는 스탑워치를 시작을 해준다.

stop()은 스탑워치의 시간을 멈추고,

reset()은 0으로 초기화를 해준다.

time()

second 변수 s_cycle 에서 60초가 되면, s_cycle은 0으로 초기화되고,

minutes 변수인 m_cycle은 증감연산으로 1이 증가하게 하였다.

화면에 00 : 00으로 분과 초를 두자리 숫자로 표기하기 위해,

s_cycle 과 m_cycle이 10 이하, 1의 자리일 때, 앞에 문자열 0을 추가해주었다.

s_cycle은 그냥 되는데 m_cycle은 안되서 다른 변수를 넣어주어 실행해주었따.

start()

s_cycle, 초가 증가되고 그 시간을 1초마다 늘어나게 끔 setTimeout() 함수를 넣어주었다.

setTimeout() 에서 time()함수를 부르고 1000은 1초를 표기한다. (time() 괄호를 넣지 않아야 실행가능)

stop()

clearTimeout() 함수를 사용해서 setTimeout()를 멈추게 한다.

clearTimeout()의 매개변수로 setTimeout()의 변수인 time_cycle을 사용했고,

start()에 있어서 그런지 바로 불러지지 않아, this인 지역변수를 사용하여 불러내어서 실행하였다.

reset()

second 변수인 s_cycle과 minutes 변수인 m_cycle을 0으로 초기화하여,

버튼 실행 시, 시간을 0으로 초기화 하였다.

'FrontEnd > JavaScript' 카테고리의 다른 글

Object객체 와 ArrayList리스트 (0)	2023.01.06
var gaq = gqa \|\| []; (0)	2022.12.15
Math, Date 객체 (0)	2022.07.07
배열 Array(PUSH, Number, pop(), length, splice(), slice(), substr(), replace(), 정규 표현식 Regular Expression, String 객체 문자열) (0)	2022.07.06
객체 (Window, screen, location, history, navigator) (0)	2022.07.06