JAVASCRIPT STEP 30 - Timer 예제

★ 문제 1

• 아래와 같은 문서를 생성하시오.
• 조건
  • 카운트 다운을 구현하시오.
  • 카운트가 0이 되면 구글로 이동하시오.
  • esc 키를 누르면 카운트를 중단하시오

 

■ HTML 코드

<input type="text" id="text1" name="text1" value="10" readonly>

 

■ CSS 코드

<style>
    #text1 {
        font-weight: bolder;
        font-size : 300px;
        text-align: center;
        width : 500px;
        margin : 10px 300px;
        border : 0px;
    }
</style>

 

■ JavaScript

<script>
    
var n = 10;

var timer = setInterval(function() {
    n--;
    document.all.text1.value = n;

    if (n == 0) {
        clearInterval(timer);
        location.href = "http://google.com";
    }
}, 1000);

window.onkeydown = function() {
    if (event.keyCode == 27) {
        clearInterval(timer);
        document.body.bgColor = "tomato";
        alert('시간을 멈춥니다')
    }
};



</script>

 

■ 실행 결과

카운트 다운이 다되면 구글로 이동, esc를 누르면 숫자 멈춤

 

★ 문제 2

• 아래와 같은 문서를 생성하시오
• 조건
  • 뉴스 서비스를 구현하시오.

 

■ HTML 코드

<div id="main">
    <textarea name="txt1" id="txt1" readonly></textarea>
    <hr>
    <textarea name="txt2" id="txt2">
네, 낮동안에도 찬바람이 강하게 불고있습니다.
때문에 체감상 느껴지는 온도는 현재기온보다 2~3도가량 낮게 나타나고 있는데요.
남부해안지역과 제주도를 중심으로는 강풍주의보도 이어지고 있기 때문에 시설물 피해 없도록 주의하셔야겠습니다.
쌀쌀했던 어제보다도 기온이 더 오르지 못하고있습니다.
현재기온 서울 7.3도, 대전 9.3도, 부산 6.8도로 이맘때 평년수준을 밑돌고있고요. 
찬바람이 더해지면서 체감상 느껴지는 날씨는 더 쌀쌀합니다.
꽃샘추위는 내일 절정을 보이겠습니다. 
    </textarea>
    <input type="button" value="시작" name="btn1" id="btn1">
    <input type="button" value="정지" name="btn2" id="btn2">
</div>

 

■ CSS 코드

<style>
    body {
        margin: 30px;
    }
    #main {
        border: 1px solid #ccc;
        width: 900px;
        padding: 20px;
    }
    #txt1, #txt2 {
        width: 100%;
        height: 250px;
        outline: none;
        font-size : 15px;
        font-weight: bold;
    }
</style>

 

■ JavaScript

<script>

    var timer = 0;
    var length = 0;

    window.onload = function() {

        var txt1 = document.all.txt1;
        var txt2 = document.all.txt2;
        var btn1 = document.all.btn1;
        var btn2 = document.all.btn2;

        btn1.onclick = function() {
            if(timer == 0) {
                timer = setInterval(function() {

                    txt1.value = txt2.value.substr(0, length);
                    length++;
                    if(length == txt2.value.length) clearInterval(timer);

                }, 50);
            }

        };

        btn2.onclick = function() {
            clearInterval(timer);
            timer=0;
        };


    };


</script>

 

■ 실행 결과

시작을 누르면 아래에 해당하는 텍스트가 위의 텍스트에 입력됨

 

★ 문제 3

• 아래와 같은 문서를 생성하시오.
• 조건
  • <input type="text">를 사용한다.
  • let n = 0; 누적 변수를 사용한다.
  • 누적 변수의 값을 시,분,초 단위로 환산한다.

 

■ HTML 코드

<div id="timer">
    <input type="text" name="txt1" id="txt1" value="00">
    <span>:</span>
    <input type="text" name="txt2" id="txt2" value="00">
    <span>:</span>
    <input type="text" name="txt3" id="txt3" value="00">
</div>
<div id="btns">
    <input type="button" value="시작" name="btn1">
    <input type="button" value="멈춤" name="btn2" disabled>
    <input type="button" value="종료" name="btn3" disabled>
</div>

 

■ CSS 코드

<style>
    body {
        margin: 50px;
    }
    #timer {
        border: 1px solid gray;
        width: 560px;
        height: 130px;
        /* margin: 50px auto 20px auto; */
        padding: 5px;
        text-align: center;
    }
    #timer:after {
        content: " ";
        display: block;
        clear: both;
    }
    #timer input, #timer span {
        float: left;
        font-size: 7em;
    }
    #timer input {
        width: 155px;
        border: 0px solid black;
        outline: none;
        text-align: center;
    }
    #timer span {
        margin-top: -25px;
    }
    #btns {
        width: 560px;
        /* margin: 20px auto; */
        margin-top: 20px;
        text-align: center;
    }
    #btns input {
        border: 1px solid #aaa;
        background-color: white;
        width: 30%;
        height: 50px;
        outline: none;
        cursor: pointer;
    }
    #btns input:disabled {
        background-color: #eee;
        cursor: not-allowed;
    }
</style>

 

■ JavaScript

<script>

    var txt1, txt2, txt3;
    var btn1, btn2, btn3;
    var n = 0;
    var timer = 0;

    window.onload = function() {
        txt1 = document.all.txt1;
        txt2 = document.all.txt2;
        txt3 = document.all.txt3;
        btn1 = document.all.btn1;
        btn2 = document.all.btn2;
        btn3 = document.all.btn3;


        //시작
        btn1.onclick = function() {
            if (timer == 0) {
                timer = setInterval(function() {
                    txt3.value = formatnumber(n % 100);
                    txt2.value = formatnumber(n / 100 % 60);
                    txt1.value = formatnumber(n / 100 / 60)
                    n++;
                }, 10);
                btn1.disabled = true;
                btn2.disabled = false;
                btn3.disabled = false;
            }
        };

        //멈춤
        btn2.onclick = function() {
            clearInterval(timer);
            timer = 0;
            btn1.disabled = false;
            btn2.disabled = true;
            btn3.disabled = false;
        };

        //종료
        btn3.onclick = function() {
            clearInterval(timer);
            timer = 0;
            btn1.disabled = false;
            btn2.disabled = true;
            btn3.disabled = true;
            init();
            n = 0;
        };
    };

    function formatnumber(num) {
        if (num < 10)
            return "0" + parseInt(num);
        else
            return parseInt(num);
    }

    function init() {
        txt1.value = "00";
        txt2.value = "00";
        txt3.value = "00";
    }

</script>

 

■ 실행 결과

스톱워치와 동일한 기능