๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ณต๋ถ€/JavaScript

[ex32] timer

๋Œ€์žฅ์ฟต์•ผ 2023. 4. 27. 12:02

ex32

 

ํƒ€์ด๋จธ, Timer

ํƒ€์ด๋จธ ์ƒ์„ฑ
1. number setTimeout(ํ•จ์ˆ˜, ์‹œ๊ฐ„)
    - 1ํšŒ์„ฑ ํƒ€์ด๋จธ
2. number setInterval(ํ•จ์ˆ˜, ์‹œ๊ฐ„)
    - ๋ฐ˜๋ณต์„ฑ ํƒ€์ด๋จธ

ํƒ€์ด๋จธ ์ข…๋ฃŒ
1. clearTimeout(id)
2. clearInterval(id)

 

    <style>
        fieldset {
            border: 1px solid #777;
            padding: 20px;
            margin: 20px;
            width: 300px;
        }
    </style>
</head>
<body>
    <!-- ex32_timer.html -->

    <h1>ํƒ€์ด๋จธ</h1>

    <form name="form1">
        <fieldset>
            <input type="button" value="ํ™•์ธ" name="btn1"></input>
            <input type="text" name="txt1">
        </fieldset>
        <fieldset>
            <input type="button" value="ํ™•์ธ" name="btn2"></input>
            <input type="text" name="txt2">
        </fieldset>
        <fieldset>
            <input type="button" value="์‹œ์ž‘" name="btn3"></input>
            <input type="button" value="๋ฉˆ์ถค" name="btn4"></input>
            <input type="text" name="txt3">
        </fieldset>
    </form>

    <img src="images/catty01.png" name="cat">

    <script>


        var btn1 = document.form1.btn1;
        var btn2 = document.form1.btn2;
        var btn3 = document.form1.btn3;
        var btn4 = document.form1.btn4;
        
        var txt1 = document.form1.txt1;
        var txt2 = document.form1.txt2;
        var txt3 = document.form1.txt3;

        btn1.onclick = m1;

        function m1() {
            // 3์ดˆ ํ›„์— f1์„ ํ˜ธ์ถœํ•ด๋ผ!!
            // setTimeout(f1, 1000);
            f1();
        }

        function f1() {
            // alert('๋”ฐ๋ฅด๋ฆ‰');
            txt1.value = (new Date()).toLocaleTimeString();

            setTimeout(f1, 1000); //์žฌ๊ท€ ํ˜ธ์ถœ + ๋ฌดํ•œ ๋ฃจํ”„
        }


        btn2.onclick = m2;

        function m2() {
            setInterval(f2, 1000);
        }

        function f2() {
            // alert('๋ต๋˜ฅ~');
            txt2.value = (new Date()).toLocaleTimeString();
        }


        var n = 1;
        var timer = 0;

        btn3.onclick = m3;
        function m3() {

            // if (timer == 0) {
            //     timer = setInterval(f3, 100);
            //     console.log(timer);            
            // }

            timer = setInterval(f3, 10);
            timerlist.push(timer);

        }
        function f3() {
            txt3.value = n;
            n++;
        }


        btn4.onclick = m4;
        function m4() {
            // clearInterval(timer);

            // ์ˆœ์ฐจ์ ์œผ๋กœ ์ค‘์ง€
            // clearInterval(timerlist.pop());

            //์ผ๊ด„ ์ค‘์ง€
            for (var i=0; i<timerlist.length; i++) {
                clearInterval(timerlist[i]);
            }

        }


        var cat = document.images['cat'];
        var m = 1;
        var ctimer = 0;

        cat.onclick = m5;

        function m5() {
            if (ctimer == 0) {
                ctimer = setInterval(f5, 100);
            } else {
                // ๋‹ค์‹œ ๋ˆ„๋ฅด๋ฉด ๋ฉˆ์ถค
                clearInterval(ctimer);
                ctimer = 0;
            }
        }

        function f5() {
            m++;
            if (m > 9) m = 1;
            cat.src = 'images/catty0' + m + '.png';
        }

    </script>
</body>
</html>

 

ํ™”๋ฉด

๋”๋ณด๊ธฐ
Document

ํƒ€์ด๋จธ

'ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ณต๋ถ€ > JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[ex33] variable, hoisting, object, function  (0) 2023.04.27
[ex31] select  (0) 2023.04.27
[ex28~30] check, radio, range  (0) 2023.04.27
[ex27] form(์œ ํšจ์„ฑ ๊ฒ€์‚ฌ)  (0) 2023.04.26
[ex26] ์š”์†Œ(ํƒœ๊ทธ)์˜ ์ด๋ฒคํŠธ ์ผ๊ด„์ฒ˜๋ฆฌ  (0) 2023.04.26

'ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ณต๋ถ€/JavaScript' Related Articles

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”