카운트다운 스크립트 정보
카운트다운 스크립트본문
작업중에 팁 공유합니다~ ^^
지정한 날짜/시간/분/초 까지 남은시간을 실시간 카운트 해줍니다.
남은시간이 없는 경우 종료문구 포함되어 있습니다.
경매 등에 사용하면 좋을것 같습니다~
Script
<script>
CountDownTimer('12/20/2019 00:00', 'countdown');
//시간 지정시
//CountDownTimer('01/01/2020', 'countdown');
//시간 필요없는 경우 대체
function CountDownTimer(dt, id)
{
var end = new Date(dt);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = '경매종료'; // 종료시 보일 문구
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById(id).innerHTML = days + '일 ';
document.getElementById(id).innerHTML += hours + '시간 ';
document.getElementById(id).innerHTML += minutes + '분 ';
document.getElementById(id).innerHTML += seconds + '초';
}
timer = setInterval(showRemaining, 1000);
}
</script>
Html
<!-- 카운트 출력 (실시간) -->
<span id="countdown"></span>
예시화면 첨부합니다.
!-->!-->
추천
15
15
댓글 35개
오오... 공구진행할때도 좋아보이네요!! 요새 소셜커머스에서 핫딜 같은??
네 그런데 사용되면 좋을거같습니다 !
감사합니다.
감사합니다~
감사합니다. ^^
안녕하세요~!
아주 유용한 소스입니다. 나중에 써먹어 봐야겠네요. 감사합니다.
꼭 써먹어 주세요! ㅎㅎ
감사합니다
감사합니다~!
좋네요 감사합니다
감사합니다~!
좋은자료 입니다!!
잘쓰셔요~~
잘 쓰겠습니다.
추천 누르고 갑니다.
추천 누르고 갑니다.
잘쓰세요~ 추천 감사합니다 ㅎㅎ
감사합니다~
감사합니다! 잘쓰셔요~
카운트다운
스크랩 되었습니다.
스타트버튼도있었으면 좋겠습니다........ㅎ
CountDownTimer('12/20/2019 00:00', 'countdown');
에서 미리 날자/시간부분을 변수로 지정 해주면
알아서 카운트하도록 사용하는 용도라..ㅎㅎ
에서 미리 날자/시간부분을 변수로 지정 해주면
알아서 카운트하도록 사용하는 용도라..ㅎㅎ
감사합니다.
감사합니다~
감사합니다
^^;
감사합니당 사용해보겠습니다!ㅎㅎ
ㅎㅎ 도움이 됬으면 좋겠네요 ^^
나중에 써 봐야겠네용..
^^ 도움이 되시길!
게시글에 종료 시간을 넣어서 목록에 보여주려면 필드값을 어떻게 줘야 하나요 ?
스크립트안에 타이머 부분을 여분필드로 처리하시면 될것 같네요~
//CountDownTimer('12/20/2019 00:00', 'countdown');
CountDownTimer('<?php echo $list[i]['wr_1'] // 날짜?> <?php echo $list[i]['wr_2'] //시간?>', 'countdown');
감사합니다.
감사합니다.
역시 펄스나인님 최고에요 바닐라 자스 공부하고있는데 도움많이되겠어요