Javascript
남아있는 시간 카운트다운
- 2025.04.02 11:01:28
[!]html[/!]
<div class="countdown">08:24:40</div>
[!]jquery[/!] function countdown(targetDate) {
var end = new Date(targetDate).getTime(); var timer = setInterval(function() { var now = new Date().getTime(); var distance = end - now; if (distance < 0) { $('.countdown').html("종료됨"); clearInterval(timer); return; } var d = Math.floor(distance / (1000 * 60 * 60 * 24)); var h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var s = Math.floor((distance % (1000 * 60)) / 1000); $('.countdown').html( // (d<10?'0'+d:d)+'일 '+ (h<10?'0'+h:h)+':'+ (m<10?'0'+m:m)+':'+ (s<10?'0'+s:s)+'' ); }, 50); } countdown('2025-04-10T00:00:00+09:00');//종료일 이벤트 진행을 라인으로 표기 [!]html[/!] <div class="line"><span></span></div>
[!]jquery[/!] // 라인 퍼센트 적용
function lineper() { var $wrap = $('.line_1'); var start = new Date('2025-04-01T00:00:00+09:00').getTime();//이벤트 시작일 var end = new Date('2025-04-07T00:00:00+09:00').getTime();//종료일 (이벤트 종료일 과동일하게 설정) setInterval(() => { var now = new Date().getTime();//실시간 date var per = Math.floor((now - start) * 100 / (end - start)); //진행율 // console.log(per); $wrap.find('span').css('width', per+'%'); //진행 라인 width 적용 $wrap.find('span').text(per+'%'); //텍스트 적용 }, 50); } lineper(); |
- 이전글 영역 캡쳐하고 프린트 하기 1