< (11) 남은 날짜, 시간, 분, 초 계산하기 - 날짜 타이머, 카운팅 >
// html
<div class="day">
<p class="day_10">0</p>
<p class="day_1">0</p>
</div>
<div class="hour">
<p class="hour_10">0</p>
<p class="hour_1">0</p>
</div>
<div class="min">
<p class="min_10">0</p>
<p class="min_1">0</p>
</div>
// javascript
CountDownTimer('04/30/2018 00:00 AM');
function CountDownTimer(dt){
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);
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);
var strDays = days.toString();
var strHours = hours.toString();
var strMin = minutes.toString();
var strSec = seconds.toString();
if( strDays < 10 ){
$('.day_10').text('0');
$('.day_1').text(strDays.substring(0, 1));
}else{
$('.day_10').text(strDays.substring(0, 1));
$('.day_1').text(strDays.substring(1, 2));
}
if( strHours < 10 ){
$('.hour_10').text('0');
$('.hour_1').text(strHours.substring(0, 1));
}else{
$('.hour_10').text(strHours.substring(0, 1));
$('.hour_1').text(strHours.substring(1, 2));
}
if( strMin < 10 ){
$('.min_10').text('0');
$('.min_1').text(strMin.substring(0, 1));
}else{
$('.min_10').text(strMin.substring(0, 1));
$('.min_1').text(strMin.substring(1, 2));
}
}
showRemaining();
timer = setInterval(showRemaining, 1000);
}
'CODING TIP > JavaScript' 카테고리의 다른 글
스크롤 플러그인 사용시 (0) | 2018.07.12 |
---|---|
(12) 날짜 비교하여 기능 적용하기 (0) | 2018.05.28 |
(10) URL 파라미터 값 받아오기 (0) | 2018.04.05 |
(9) 스크롤로 각 섹션에 진입 시 gnb 메뉴 온/오프 기능 (0) | 2018.03.29 |
(8) 화살표 슬라이드 (0) | 2018.03.26 |