店舗時間：現在の時間と祝日を表示

Question

したがって、私は特定のサイトに店舗時間を追加しようとしています。私はページがロードされ、ストアが閉じられているかどうかを識別する現在の時刻を表示するJSのこの素晴らしいビットを見つけました。しかし、私はページの読み込み時にキャプチャされた時間をアクティブなクロックに変更したいと思います。私は誰かが助けることを望んでいる。

ページが読み込まれると、ページが読み込まれる時刻が表示されます。すなわち、12:30 PMに訪問サイト、timeDivは12:30 PMを表示する。午後12時31分には、まだ午後12時30分が表示されます。

代わりにアクティブクロックを使用したいので、午後12時31分に午後12時31分を表示し、その後の各時間間隔で現在の時刻を表示します。

は、ここで元のペンへのリンクです：https://codepen.io/zeinab92/pen/xwWGWM

var now = new Date(); 
var weekday = new Array(7); 
weekday[0] = "Sunday"; 
weekday[1] = "Monday"; 
weekday[2] = "Tuesday"; 
weekday[3] = "Wednesday"; 
weekday[4] = "Thursday"; 
weekday[5] = "Friday"; 
weekday[6] = "Saturday"; 

var checkTime = function() { 
    var today = weekday[now.getDay()]; 
    var timeDiv = document.getElementById('timeDiv'); 
    var dayOfWeek = now.getDay(); 
    var hour = now.getHours(); 
    var minutes = now.getMinutes(); 

    //add AM or PM 
    var suffix = hour >= 12 ? "PM" : "AM"; 

    // add 0 to one digit minutes 
    if (minutes < 10) { 
    minutes = "0" + minutes; } 

    if ((dayOfWeek === 1 || dayOfWeek === 2 || dayOfWeek === 3 || dayOfWeek === 4 || dayOfWeek === 5) && hour >= 9 && hour === 17 && minutes <=29) { 
    hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15 
    timeDiv.innerHTML = 'it\'s ' + today + ' ' + hour + ':' + minutes + suffix + ' - we\'re open!'; 
    timeDiv.className = 'open'; 
    } 

    else if ((dayOfWeek === 6) && hour >= 8 && hour === 15 && minutes <= 59) { 
    hour = ((hour + 11) % 12 + 1); 
    timeDiv.innerHTML = '<p id="hour">it\'s ' + today + ' ' + hour + ':' + minutes + suffix + '</p> <p id="stat">we\'re open!</p>'; 
    timeDiv.className = 'open'; 
    } 

    else { 
    if (hour === 0 || hour > 12) { 
     hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15 
    } 
    timeDiv.innerHTML = '<p id="hour">It\'s ' + today + ' ' + hour + ':' + minutes + suffix + '</p><p id="stat">we\'re closed!</>'; 
    timeDiv.className = 'closed'; 
    } 
}; 

var currentDay = weekday[now.getDay()]; 
var currentDayID = "#" + currentDay; //gets todays weekday and turns it into id 
$(currentDayID).toggleClass("today"); /hightlights today in the view hours modal popup 

setInterval(checkTime, 1000); 
checkTime(); 

Answer 1

JavaScriptのための非常に人気のライブラリがありますがmomentjsと呼ばれ、それがうまく日付/時刻のロジックの多くを処理します。私はそこから始めることをお勧めします。

このコードは、あなたの休日に配置する必要があるだろうとほぼ同じ方法でmomentjsを拡張：

https://gist.github.com/jrhames/5200024

基本的なロジックは、その関数を作成し、別のカスタム配列であなたの休日を追跡することですパラメータとして日付をとり、休日の配列を参照します。