JAVASCRIPT STEP 31 - Timer 예제2 — Developer Story House

728x90

★ 문제 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>

■ 실행 결과

★ 문제 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>

■ 실행 결과

728x90

저작자표시 비영리 변경금지 (새창열림)

'웹페이지' 카테고리의 다른 글

JAVASCRIPT STEP 33 - Constructor (0)	2023.04.26
JAVASCRIPT STEP 32 - Function (0)	2023.04.26
JAVASCRIPT STEP 30 - Timer 예제 (0)	2023.04.25
JAVASCRIPT STEP 29 - Hoisting, Object (0)	2023.04.25
JAVASCRIPT STEP 28 - Variable (0)	2023.04.25

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

JAVASCRIPT STEP 31 - Timer 예제2

'웹페이지' 카테고리의 다른 글

'웹페이지' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역