취업/PHP

[JS]IOS 카운트다운(getTimeRemaining) NaN출력 문제

카슈밀 2021. 6. 25. 12:30
반응형
function getTimeRemaining(endtime) {
        var t, seconds, minutes, hours, days;
        t = Date.parse(endtime) - Date.parse(new Date());
        seconds = Math.floor((t / 1000) % 60);
        minutes = Math.floor((t / 1000 / 60) % 60);
        hours = Math.floor((t / (1000 * 60 * 60)) % 24);
        days = Math.floor(t / (1000 * 60 * 60 * 24));
        return {
            'total': t,
            'days': days,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        };
    }

    function initializeClock(id, endtime) {
        var clock = document.getElementById(id);
        var daysSpan = clock.querySelector('.days');
        var hoursSpan = clock.querySelector('.hours');
        var minutesSpan = clock.querySelector('.minutes');
        var secondsSpan = clock.querySelector('.seconds');

        function updateClock() {
            var t = getTimeRemaining(endtime);

            daysSpan.innerHTML = t.days;
            hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
            minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
            secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

            if (t.total <= 0) {
                clearInterval(timeinterval);
            }
        }

        updateClock();
        var timeinterval = setInterval(updateClock, 1000);
    }

기존에 쓰던 코드.

IOS의 경우 출력이 안되는 문제가 발생했다.

이유로는 MySQL의 날짜 형식으로는 출력이 안되는 문제가 발생한 것.

안드로이드나 웹상에서는 출력이 제대로 되는데, IOS에서만 안되는 것이었다.

 

원인은 

t = Date.parse(endtime) - Date.parse(new Date());

이부분이었다.

엄한 곳을 만지고 있었다... ㅠ

 

https://stackoverflow.com/questions/26657353/date-on-ios-device-returns-nan

 

Date on iOS device returns NaN

i'm currently developing a cordova web based application with ionic and angularjs. now i've created a service that returns a formatted time the way my client wants it.. the problem with this is that

stackoverflow.com

팀장님이 이걸 주셨는데, 그 중 가장 투표를 많이 받은 것을 적용해보았다.

function convertDateForIos(date) {
    var arr = date.split(/[- :]/);
    date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
    return date;
}
t = Date.parse(convertDateForIos((endtime))) - Date.parse(new Date());

요렇게 적용해보니까 제대로 출력된다.!!!

 

원인을 찾아보니 아이폰은 iso(8601)이라는 형식을 따르는데, 이를 지키지 않으면 출력하지 않는다.

728x90