JAVASCRIPT STEP 31 - Timer 예제2

★ 문제 4 

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

 

■ HTML 코드

<div id="timer">
    <img name="img1">
    <img name="img2">
    <span>:</span>
    <img name="img3">
    <img name="img4">
    <span>:</span>
    <img name="img5">
    <img name="img6">
</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: 640px;
        /* margin: 50px auto 20px auto; */
        padding: 25px;
    }
    #timer:after {
        content: " ";
        display: block;
        clear: both;
    }
    #timer img, #timer span {
        float: left;
        font-size: 7em;
    }
    #timer img {
        width: 95px;
        height: 139px;
        border: 0px;
        outline: none;
    }
    #timer span {
        margin-top: -10px;
    }
    #btns {
        width: 680px;
        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 img1, img2, img3, img4, img5, img6;
    var btn1, btn2, btn3;
    var n = 0;
    var timer = 0;

    window.onload = function() {
        img1 = document.all.img1;
        img2 = document.all.img2;
        img3 = document.all.img3;
        img4 = document.all.img4;
        img5 = document.all.img5;
        img6 = document.all.img6;
        btn1 = document.all.btn1;
        btn2 = document.all.btn2;
        btn3 = document.all.btn3;
        init();

        //시작
        btn1.onclick = function() {
            if (timer == 0) {
                timer = setInterval(function() {
                    console.log(n);
                    console.log(formatnumber(n % 100));
                    console.log(formatnumber(n % 100).substr(0, 1));
                    console.log(formatnumber(n % 100).substr(1, 1));

                    img5.src = "images/" + formatnumber(n % 100).substr(0, 1) + ".png";
                    img6.src = "images/" + formatnumber(n % 100).substr(1, 1) + ".png";

                    img3.src = "images/" + formatnumber(n / 100 % 60).substr(0, 1) + ".png";
                    img4.src = "images/" + formatnumber(n / 100 % 60).substr(1, 1) + ".png";

                    img1.src = "images/" + formatnumber(n / 100 / 60).substr(0, 1) + ".png";
                    img2.src = "images/" + formatnumber(n / 100 / 60).substr(1, 1) + ".png";

                    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" + num;
        else
            return "" + num;
    }

    function init() {
        img1.src = "images/0.png";
        img2.src = "images/0.png";
        img3.src = "images/0.png";
        img4.src = "images/0.png";
        img5.src = "images/0.png";
        img6.src = "images/0.png";
    }
</script>

 

■ 실행 결과

이미지를 이용한 STOP 워치

 

★ 문제 5

• 아래와 같은 문서를 생성하시오.
• 조건
  • 활성화된 버튼을 클릭하시오.
  • 흰색 버튼: 클릭이 가능하다.
  • 회색 버튼: 클릭이 불가능하다.
  • 힌트
  • <button> + fontawesome icon
  • 흰색 버튼: btn:enabled { background-color: white; }
  • 회색 버튼: btn:disabled { background-color: gray; }

 

■ HTML 코드

<div id="list">
    <button type="button" name="btn"><i class="fas fa-dog"></i></button>
    <button type="button" name="btn" disabled><i class="fas fa-paw"></i></button>
    <button type="button" name="btn" disabled><i class="fas fa-bone"></i></button>
    <button type="button" name="btn" disabled><i class="fas fa-frog"></i></button>
    <button type="button" name="btn" disabled><i class="fas fa-cat"></i></button>
    <button type="button" name="btn" disabled><i class="fas fa-piggy-bank"></i></button>
    <button type="button" name="btn" disabled><i class="fas fa-horse"></i></button>
    <button type="button" name="btn" disabled><i class="fas fa-dove"></i></button>
    <button type="button" name="btn" disabled><i class="fas fa-drumstick-bite"></i></button>
    <button type="button" name="btn" disabled><i class="fas fa-fish"></i></button>
</div>

 

■ CSS 코드

<style>
    #list {
        margin: 100px auto !important;
        width: 1048px;
    }
    #list > button {
        font-size: 2.5em;
        padding: 15px;
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
    }
    #list > button:enabled {
        background-color: white;
    }
    #list > button:disabled {
        background-color: #bbb;			
    }
</style>

 

■ JavaScript

<script>

    var list = document.all.btn;
    var n = 0;

    for (var i=0; i<list.length; i++) {
        list[i].onclick = function() {
            document.body.bgColor = "cornflowerblue";
            clearInterval(timer);
        };
    }

    var timer = setInterval(function() {
        for (var i=0; i<list.length; i++) {
            list[i].disabled = true;
        }
        list[n].disabled = false;
        n++;
        if (n >= list.length) n = 0;
    }, 150);
</script>

 

■ 실행 결과

시간초에 따라서 순차적으로 이미지의 색상이 하얗게 변함

 

★ 문제 6

• 아래와 같은 문서를 생성하시오.
• 조건
• 타이머를 구현하시오.
• <table>, <tr>, <td>를 사용해 시간을 표시하시오.
• 첫번째 <tr>: 시
• 두번째 <tr>: 분
• 세번째 <tr>: 초

 

■ HTML 코드

<table>
    <tr>
        <th>Hour&nbsp;</th>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour" colspan="2"></td>
        <td class="hour disabled" colspan="2"></td>
        <td class="hour disabled" colspan="2"></td>
        <td class="hour disabled" colspan="2"></td>
        <td class="hour disabled" colspan="2"></td>
        <td class="hour disabled" colspan="2"></td>
        <td class="hour disabled"></td>
    </tr>
    <tr>
        <th>Minute&nbsp;</th>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
        <td class="min"></td>
    </tr>
    <tr>
        <th>Second&nbsp;</th>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
        <td class="sec"></td>
    </tr>
</table>

 

■ CSS 코드

<style>
    body {
        margin: 20px;
        margin-top: 40px;
        margin-right: 30px;
    }
    table { border-spacing: 3px; }
    th { width: 100px; text-align: right; }
    td { border: 1px solid #999; border-radius: 5px; width: 20px; height: 20px; text-align: center; }
    td.disabled { background-color: #ccc; }
</style>

 

■ JavaScript

<script>

    var hour = document.getElementsByClassName("hour");
    var min = document.getElementsByClassName("min");
    var sec = document.getElementsByClassName("sec");

    var timer = setInterval(m1, 1000);

    function m1() {

        var now = new Date();

        var h = now.getHours();
        var m = now.getMinutes();
        var s = now.getSeconds();
        console.log(h, m, s);

        for (var i=0; i<hour.length; i++) {
            hour[i].bgColor = "white";
        }
        for (var i=0; i<min.length; i++) {
            min[i].bgColor = "white";
        }
        for (var i=0; i<sec.length; i++) {
            sec[i].bgColor = "white";
        }

        for (var i=0; i<h; i++) {
            hour[i].bgColor = "tomato";
        }
        for (var i=0; i<m; i++) {
            min[i].bgColor = "cornflowerblue";
        }
        for (var i=0; i<s; i++) {
            sec[i].bgColor = "gold";
        }
    }

    m1();

</script>

 

■ 실행 결과

현재 시간을 나타내는 Bar