<script>
	//타이머
	var ps = document.querySelectorAll("div.timer");
	ps.forEach(function(timer){
    
            var countDownDate = new Date(timer.querySelector('[class="endDate"]').value).getTime();
            
            var x = setInterval(function() {
            
            var now = new Date().getTime();
            
            var distance = countDownDate - now;
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                //timer.innerText = days + "일 " + hours + "시 "+ minutes + "분 " + seconds + "초 ";
            timer.querySelector("div.show").innerText = days + "일 " + hours + "시 "+ minutes + "분 " + seconds + "초 ";
            
            if (distance < 0) {
                clearInterval(x);
                timer.innerText = "땡~";
              }
              }, 1000);    
	});
</script>

오늘은 경매 페이지에 각 경매정보마다 종료날짜까지 타이머가 필요했기에

setInterval()를 이용한 1초마다 시간데이터에서 1초가 떨어지게 구현해보았다.

코드는 예제를 보며 클론코딩하였고 완벽하게 숙지하였다.

우선

<script>
	var ps = document.querySelectorAll("div.timer");
</script>

ps는 div 태그안에 class이름이 timer인것들을 모조리 불러와 list형태로 저장된다.
그 후 forEach문으로 리스트 size만큼 function(timer)가 수행되는데

각각의 경매마다 타이머가 존재해야하기때문에

클래스가 timer인것 안에 넣어둔 hidden값인 날짜 데이터를 가져와야하므로

<script>
	var countDownDate = new Date(timer.querySelector('[class="endDate"]').value).getTime();
</script>

input의 hidden 타입인 클래스이름이 endDate의 value값을 가져와서 Date형태로 선언해주었다.

그 후 본격적으로 setInterval() function을 구현하게 되는데
우선 경매가 종료되기까지 남은시간을 보여줘야하므로 종료날짜 - 오늘날짜를 계산 해야하기 때문에

오늘날짜의 시간을 선언해주었다.

그 후 일, 시간, 분, 초 단위로 각각 데이터를 넣어주고
타이머를 보여주는 곳 안에 innerText로 값을 넣어주었다.

당연한거지만 타이머가 종료될때 setInterval은 종료되어야 하므로
타이머가 끝나면 clear시켜주는 로직도 넣어주었다.