Обратный отсчет времени в Chrome, но не сафари

Question

У меня есть верхняя панель с обратным отсчетом на ней. Он отлично работает на chrome и firefox, но я просто понял, что он не работает на сафари. Это код:

<div class="deadline_Container"> 
    <div id="clockdiv"> 
    <span class="deadline_Text">You only have </span> 
    <div><span class="days"></span><span class="smalltext">Days</span></div> 
    <div><span class="hours"></span><span class="smalltext">Hours</span></div> 
    <div><span class="minutes"></span><span class="smalltext">Minutes</span> 
</div> 
<div class="clockLast"><span class="seconds"></span><span class="smalltext">Seconds</span></div> 
<span class="deadline_Text2">left to get free delivery!</span></div> 
</div> 

<script type="text/javascript"> 
var deadline = 'Jun 15 2016 23:59:59 GMT'; 
function time_remaining(endtime){ 
    var t = Date.parse(endtime) - Date.parse(new Date()); 
    var seconds = Math.floor((t/1000) % 60); 
    var minutes = Math.floor((t/1000/60) % 60); 
    var hours = Math.floor((t/(1000*60*60)) % 24); 
    var days = Math.floor(t/(1000*60*60*24)); 
return {'total':t, 'days':days, 'hours':hours, 'minutes':minutes, 'seconds':seconds}; 
} 

function run_clock(id,endtime) { 
    var clock = document.getElementById(id); 
    var days_span = clock.querySelector('.days'); 
    var hours_span = clock.querySelector('.hours'); 
    var minutes_span = clock.querySelector('.minutes'); 
    var seconds_span = clock.querySelector('.seconds'); 

    function update_clock(){ 
    var t = time_remaining(endtime); 
    days_span.innerHTML = t.days; 
    hours_span.innerHTML = ('0' + t.hours).slice(-2); 
    minutes_span.innerHTML = ('0' + t.minutes).slice(-2); 
    seconds_span.innerHTML = ('0' + t.seconds).slice(-2); 
    if(t.total<=0) { 
     clearInterval(timeinterval); 
    } 
    } 

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

run_clock('clockdiv',deadline); 
</script> 

В настоящее время на сафари insteadt в дни, часы, минуты и т.д. оставил это говорит «NaN» «в» «An». Поэтому я предполагаю, что это связано с форматом времени?

Я попытался установить время, как это:

var deadline = '2016-06-15T23:59:59 GMT +0100'; 

Но это не сработало. Есть идеи?

Answer 1

Ваша основная проблема заключается в анализе строк с помощью конструктора Date. Не делай этого, никогда. Разбор строк с использованием конструктора Date (или Date.parse, они эквивалентны для синтаксического анализа) настоятельно рекомендуется против, поскольку он в значительной степени зависит от реализации.

Как следствие, вы видите разные результаты в разных браузерах. Изменение:

var deadline = 'Jun 15 2016 23:59:59 GMT'; 

в

var deadline = new Date(Date.UTC(2016, 5, 15, 23, 59, 59)); 

И

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

в

var t = endtime - new Date(); 

Обратите внимание, что Date.parse(new Date()) создаст новую дату, преобразовать его в строку с помощью реализации зависимый Date.prototype.toString, разобрать, что обратно к дате, а затем получить значение времени.