countdown javascript [IE9 ~ mobile]

반응형웹에 적용될 카운트다운 만들기

 

 

 

W3C에 소개되어있는 카운트 다운 소스를 이용해 진행중인 프로젝트에 적용하였다

 

일단 

var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();

 

이 부분을 개발에서 지정된 날짜로 넣어주면 그 날짜를 읽어 카운트 해 주는 방식으로 바꾸고

var dday = $(".mainBnr__timer").attr('data-dday');
var yy = dday.substr(0,4);
var mm = dday.substr(4,2);
var dd = dday.substr(6,2);
var hhmmss = dday.substr(8,2)+':'+dday.substr(10,2)+':'+dday.substr(12,2);

 

저 mm 부분이 숫자가 아닌 문자로 바꿔주기에는 약간 귀찮아서 아래와 같은 형식으로 테스트해 보았다

var countDownDate = new Date(yy+'/'+mm+'/'+dd+' '+hhmmss).getTime();

 

작업은 수월했으나 IE9버전에서 읽어오지를 못함....

그리하여 month를 str로 분기해주는 구문을 추가하고

var mmStr = mm == 01 ? 'January' :
	mm == 02 ? 'February' :
    	mm == 03 ? 'March' :
    	mm == 04 ? 'April' :
    	mm == 05 ? 'May' :
    	mm == 06 ? 'June' :
    	mm == 07 ? 'July' :
    	mm == 08 ? 'August' :
    	mm == 09 ? 'September' :
    	mm == 10 ? 'October' :
    	mm == 11 ? 'November' :
        'December' ;
        
var countDownDate = new Date(mmStr + dd + ','+ yy + ' ' + hhmmss).getTime();

확인해보니 IE9에서는 OK

 

 

그렇게 개발에 넘기고 개발이 붙은 화면을 확인하니

이번에는 IOS에서 오류가 난다

 

확인해보니 시간을 넣어주는 부분에서 '초' 단위까지 사용하지 않아서 ios에서는 이를 쉽게 허용하지 않는 현상이 발생.

초는 무조건 00 초로 넣어주고 모든 브라우저 단말기에서 정상작동을 확인했다

var hhmmss = dday.substr(8,2)+':'+dday.substr(10,2)+':00';

 

 

아래는 이렇게 완성된 코드이다

 

 

var dday = $(".mainBnr__timer").attr('data-dday');
var yy = dday.substr(0,4);
var mm = dday.substr(4,2);
var dd = dday.substr(6,2);
var hhmmss = dday.substr(8,2)+':'+dday.substr(10,2)+':00';

var mmStr = mm == 01 ? 'January' :
            mm == 02 ? 'February' :
            mm == 03 ? 'March' :
            mm == 04 ? 'April' :
            mm == 05 ? 'May' :
            mm == 06 ? 'June' :
            mm == 07 ? 'July' :
            mm == 08 ? 'August' :
            mm == 09 ? 'September' :
            mm == 10 ? 'October' :
            mm == 11 ? 'November' :
            'December' ;
var countDownDate = new Date(mmStr + dd + ','+ yy + ' ' + hhmmss).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get today's date and time
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    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);
    
    // Display the result
    var timerCont = '남은시간 : <b>'+days+'</b>일 '+
        '<b>'+hours+'</b>시간 '+
        '<b>'+minutes+'</b>분 '+
        '<b>'+seconds+'</b>초';
    document.getElementById("mainBnr__timer").innerHTML = timerCont;

    // 설정시간 지난후
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("mainBnr__timer").innerHTML = "준비중";
    }
}, 1000);