-
[Javascript] 카운트다운 만들기Coding 2023. 2. 15. 17:48반응형
이벤트 페이지를 만들경우, 어떤 날짜를 기준으로 카운트다운 하는 UI를 사용할때가 많다.
flip으로 넘어가는것도 아니고 단순하게 카운트 숫자만 바뀌는건데
제이쿼리 플러그인이나 라이브러리를 불러오는것도 불필요해보여서 간단하게 사용할 수 있도록 코드를 남겨본다.
var countDateGetTime = new Date(2023, 4, 9, 24, 0, 0).getTime(); // 년, 월-1, 일, 시, 분, 초 var countEl = document.querySelector(".countdown-text"); var countInterval = setInterval(function() { var now = new Date().getTime(); var distance = countDateGetTime - now; var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = ('0' + Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).slice(-2); var minutes = ('0' + Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).slice(-2); var seconds = ('0' + Math.floor((distance % (1000 * 60)) / 1000)).slice(-2); if ( days > 0 ) { // 남은시간이 일까지 포함될경우 '일+시간+분+초' // 숫자 사이에 텍스트를 넣을 수 있음 countEl.innerHTML = days + "<span>Days </span>" + hours + "<span>:</span>" + minutes + "<span>:</span>" + seconds; } else { // 남은시간이 일까지는 안갈경우 '시간+분+초' countEl.innerHTML = hours + "<span>:</span>" + minutes + "<span>:</span>" + seconds; } if (distance < 0) { // 지정한 시간이 지났을 경우 시간 대신 넣어 줄 텍스트 clearInterval(countInterval); countEl.innerHTML = "EXPIRED"; } }, 1000);
카운트다운 codepen 화면
반응형'Coding' 카테고리의 다른 글
[CSS, JS] 꽃이 흔들거리는 효과 구현하기 (0) 2023.05.19 [CSS] Hover 하는 형제들(siblings) 스타일 적용 (0) 2023.05.12 [CSS] 동영상 반응형 사이트에 추가하기 (0) 2022.11.10 [JS] Swiper.js 이미지 슬라이드 스크립트 사용법 (+반응형) (0) 2022.11.04 [HTML] 이미지맵 쉽게 만들기 (+JS+모바일에 적용하기) (0) 2022.11.01