JS (자바스크립트) window.Interval(인터벌)

Interval

CSS 스타일 지정 폰트색상은 rgb 10, 10, 10을 기본으로 준다

 

 <style>
        *{
            font-size: 30px;
            font-style: bold;
            font-weight: 900;
            color: rgb(10, 10, 10);
        }
    </style>

html에 시작버튼과 멈추는 버튼 그리고 시간을 출력해줄 div생성

<button class="start">시작</button>
    <button class="stop">멈춰</button>
    <div class="cur"> </div>

Script에 Interval을 생성해서 func1이라는 함수를 1초마다 동작하게 설정

<script>
        //일정주기마다 동작
        var time = window.setInterval(func1, 1000);
        function func1() {
            var date = new Date();              
            var hour = parseInt(date.getHours());         
            var minutes = parseInt(date.getMinutes());    
            var second = parseInt(date.getSeconds());     

            var over = 60;
            if ((18 - parseInt(hour)) == 0) over = 50;
            var cur = document.querySelector(".cur");
            var green=Math.round(Math.random()*250);
            var red=Math.round(Math.random()*250);
            var blue=Math.round(Math.random()*250);
            cur.style.color="RGB(+"+red+","+green+","+blue+")"

            cur.innerHTML = (18 - hour) + "시간 " + (over - minutes) + "분 " + (60 - second) + "초";
        }
        
        var start = document.querySelector(".start");
        start.onclick = function(){
            time = window.setInterval(func1, 1000);
        }
        
        var stop = document.querySelector(".stop");
        stop.onclick = function(){
            //인터벌 중지
            window.clearInterval(time);
        }



    </script>

rgb색상을 0~250사이의 랜덤숫자가 매초 바뀌게 설정했다