setTimeout을 이용한 랜덤색상변경 예제

2024년 08월 29일

chantleman
작성자
2024.08.29.:01

<random.js>

    let rnd = (min, max)=>{
        return Math.floor(Math.random()*(max-min+1)+min);
    };

<timer.html>

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                border: solid;
            }
        </style>
    </head>

    <body>
        <div>1초마다 랜덤색</div>
        <input type="button" value="랜덤">
        <input type="button" value="중지">
        <script src="../js/random.js"></script>

        <script>
            let timer;
            document.querySelectorAll('input')[1].addEventListener('click',function(){
                clearTimeout(timer);
                document.querySelector('input').removeAttribute('disabled',true);
            })

            document.querySelector('input').addEventListener('click', function () {
                setTimeout(fnc=function () {
                    const random10 = [], random16 = [];
                    for (let i = 0; i < 3; i++) {
                        random10[i] = rnd(0, 255);

                        //한자리 값을 두자리 수로 변형
                        const RND = rnd(0, 255).toString(16);
                        if (RND.length == 1) {
                            random16.push("0" + RND); //16진수로 변환
                        }
                        else {
                            random16.push(RND); //16진수로 변환
                        }
                    }
                    document.querySelector('div').style.color = "rgb(" + random10 + ")";
                    document.querySelector('div').style.backgroundColor = "#" + random16.join("");

                    timer=setTimeout(fnc, 1000);
                }, 1000)

                console.log(this);
                //setAttribute('속성명','속성값');
                //버튼 비활성화
                this.setAttribute('disabled',true);
            });
        </script>
    </body>
    </html>

글자색과 배경색이 랜덤으로 바뀌는 것 확인

728x90

'js' 카테고리의 다른 글

XMLHttpRequest (0)	2024.09.18
fetch (1)	2024.09.18
setTimeout(), setInterval() (0)	2024.08.29
팝업 (0)	2024.08.28
href, replace()를 이용한 페이지 이동 (0)	2024.08.22

다음 글이 없습니다.

이전 글이 없습니다.

'js' 카테고리의 다른 글

티스토리툴바