22-05-25 | 5์ดˆ ํ›„ ๐Ÿ”ฅ(setInterval)

Moon Heeยท2022๋…„ 5์›” 25์ผ
0

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="alert alert-danger">
        <span id="count">5</span>์ดˆ ๋’ค ๐Ÿ”ฅ
    </div>
    
    <script>
        // ์ •์˜
        const counter = document.querySelector('#count');
        const alert = document.querySelector('.alert');

        // 5์ดˆ ์ •์˜(๋ณ€ํ•˜๋Š” ๊ฐ’)
        let count = 5;

        // 5์ดˆ ๋๋‚˜๋ฉด ์–ด๋–ป๊ฒŒ ํ• ์ง€
        let timerEnd = setInterval(function() {
            alert.remove('.alert');
        }, 5000);

        // ์–ด๋–ป๊ฒŒ ์นด์šดํŠธ ํ• ์ง€
        setInterval(function() {
            count --;
            if (count >= 0) {
                counter.innerHTML = count;
            }
        }, 1000);
    </script>
</body>
</html>
profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœํ•˜๋Š” ์‚ฌ๋žŒ

0๊ฐœ์˜ ๋Œ“๊ธ€