2017-01-06 4 views
1

純粋なJSを使用してカウントダウンタイマーを構築しました。IE8に達するまではすべて正常に動作しているようです。 IE8を使用すると、タイマフィールドにNaNが返されます。JSタイマはIE8でNaNを表示します

私はその瞬間が日付/時刻フィールドを扱うための良いライブラリだが、それは良い古いJS(ライブラリなし)で作業しようとしたいと思った。これが、単純な数学を行うために、日付をUNIXに変換する理由です。ここで

は、私が使用したJSです:

(function(){ 
    // Setup all the variables needed 
    var week = document.getElementById('timer-weeks'); 
    var day = document.getElementById('timer-days'); 
    var hour = document.getElementById('timer-hours'); 
    var min = document.getElementById('timer-minutes'); 
    var sec = document.getElementById('timer-seconds'); 
    var target = new Date('2017-01-17T08:00:00Z').getTime(); 
    setInterval(function(){ 
    var now = new Date().getTime(); 
    var d = target - now; 

    // Get number of weeks until event 
    var weeks = Math.floor(d/604800000); 
    week.innerHTML = weeks; 

    // Remove weeks from d variable and work out days 
    d = d - (weeks * 604800000); 
    var days = Math.floor(d/86400000); 
    day.innerHTML = days; 

    // Remove days from d variable and work out hours 
    d = d - (days * 86400000); 
    var hours = Math.floor(d/3600000); 
    hour.innerHTML = hours; 

    // Remove hours from d variable and work out minutes 
    d = d - (hours * 3600000); 
    var minutes = Math.floor(d/60000); 
    min.innerHTML = minutes; 

    // Remove minutes from d variable and work out seconds 
    d = d - (minutes * 60000); 
    var seconds = Math.floor(d/1000); 
    sec.innerHTML = seconds; 

    }, 1000); 

}()); 

はここCodepenへのリンクです:http://codepen.io/MattJLeach/pen/JEdXoZ

は、私はIE 8を持っていないあなたは

+2

さて、あなたはデバッグする必要があります(または、さまざまな時点でIE8挿入アラート()を使用して、数字ではないことを確認してください...)Date()ctorに渡される文字列形式が確実にサポートされていることから始めます。 –

答えて

0

を与えることができます任意の助けてくれてありがとうメモリからは、ISO 8601の日付文字列は解析されません。とにかく、Dateコンストラクタ(またはDate.parse)を解析するのは良い考えではないので、これをやってはいけません。

のプレES5当量

new Date('2017-01-17T08:00:00Z').getTime(); 

は、互換性のどこにでも、またレスタイプである

Date.UTC(2017,0,17,8,0,0); 

あります。 ;-)

// Should fail in IE 8 and other pre ES5 implementaitons 
 
console.log(new Date('2017-01-17T08:00:00Z').getTime()); 
 

 
// Compatible everywhere 
 
console.log(Date.UTC(2017,0,17,8,0,0));

ところで、あなたのコードは、もう少し簡潔にすることができます

すべてのチッククロックのため のsetIntervalを使用して

(function(){ 
 
    // Setup all the variables needed 
 
    var tgtDate = document.getElementById('timer-date'); 
 
    var week = document.getElementById('timer-weeks'); 
 
    var day = document.getElementById('timer-days'); 
 
    var hour = document.getElementById('timer-hours'); 
 
    var min = document.getElementById('timer-minutes'); 
 
    var sec = document.getElementById('timer-seconds'); 
 
    var target = Date.UTC(2017,1,17,8); 
 
    tgtDate.innerHTML = new Date(target).toString(); 
 
    setInterval(function(){ 
 
    var now = new Date(); 
 
    var d = target - now; 
 

 
    // Get number of weeks until event 
 
    week.innerHTML = d/6.048e8 | 0; 
 
    day.innerHTML = (d % 6.048e8)/8.64e7 | 0; 
 
    hour.innerHTML = (d % 8.64e7)/3.6e6 | 0; 
 
    min.innerHTML = (d % 3.6e6 )/6e4 | 0; 
 
    sec.innerHTML = (d % 6e4 )/1e3 | 0; 
 

 
    }, 1000); 
 
}());
table { 
 
    border-collapse: collapse; 
 
    border-top: 1px solid #999999; 
 
    border-left: 1px solid #999999; 
 
} 
 
th, td { 
 
    border-right: 1px solid #999999; 
 
    border-bottom: 1px solid #999999; 
 
} 
 
td { 
 
    text-align: center; 
 
} 
 
#timer-date { 
 
    font-weight: normal; 
 
}
<table> 
 
    <tr><th colspan="5">Time left to <span id="timer-date"></span> 
 
    <tr><th>Weeks 
 
     <th>Days 
 
     <th>Hours 
 
     <th>Minutes 
 
     <th>Seconds 
 
    <tr><td id="timer-weeks">&nbsp; 
 
     <td id="timer-days">&nbsp; 
 
     <td id="timer-hours">&nbsp; 
 
     <td id="timer-minutes">&nbsp; 
 
     <td id="timer-seconds">&nbsp; 
 
</table>

秒で実行されないので、秒はお勧めしません実際には1秒間隔で、それはゆっくりとドリフトするので、毎秒をスキップするように見えます。 のsetTimeoutを使用し、次のフル秒の直後に関数を呼び出すことを検討してください。

関連する問題