2

ラジオ局のウェブサイトを構築していますが、現在放送中のプレゼンターを表示したいと思います。プレゼンターに関するデータ（名前、写真、経歴、各平日の開始/終了時刻）を含むWebアプリを作成しました。

<div id="presenter1">
    <div class="slot">
        <div id="sunday-off"> - </div>
        <div id="monday-afternoon">12:00 - 15:59</div>
        <div id="tuesday-afternoon">12:00 - 15:59</div>
        <div id="wednesday-afternoon">12:00 - 15:59</div>
        <div id="thursday-afternoon">12:00 - 15:59</div>
        <div id="friday-afternoon">12:00 - 15:59</div>
        <div id="saturday-morning">06:00 - 08:59</div>
    </div>
</div>

私がやりたいのは、Javascript関数getDay（）およびgetHours（）+ getMinutes（）を使用して、アプリで指定された時間に基づいて放送がスケジュールされているプレゼンターのみを表示することです。

私が苦労している主な部分は、このプレゼンターが現在の時間内にあるかどうかを判断し、必要に応じてdivを表示/非表示にすることです。

これを達成する方法についてのヘルプやガイダンスをいただければ幸いです。

4

2 に答える 2

2

次のように getHours および getDay 関数と比較することができます。分の関数はすべて時間の境界上にあるため、心配する必要はありません。その日は日曜日から 0 にインデックス付けされていることを覚えておいてください

//Hide all the divs up here
var d = new Date();
var weekday = d.getDay();
var hours = d.getHours();
//    between 12 and 6pm           From monday  to friday
if (hours >= 12 && hours < 18 && weekday > 0 && weekday < 6) {
   switch(weekday) {
      case 1:
          //Show monday
          break;
      case 2:
          //Show tuesday
          break;
      case 3:
          //Show wed
          break;
      case 4:
          //Show thur
          break;
      case 5:
          //Show fri
          break;
    }
//          Saturday         between 6 and 9
} else if (weekday == 6 && hours >=6 && hours < 9) {
  //Show saturday
} else if (weekday == 0) {
  //Show sunday
}

編集：あなたの要求に従って、単純なモジュラー実装がここにあります

var schedule = [
    {"starthour":12, "endhour":18, "weekday":1, "div":"div1"},
    {"starthour":18, "endhour":20, "weekday":1, "div":"div2"}
]
var d = new Date();
var weekday = d.getDay();
var hours = d.getHours();
var i;
for (i = 0; i < schedule.length; i++) {
    if (schedule[i].starthour >= hours && schedule[i].endhour < hours && schedule[i].weekday == weekday) {
        //Show schedule[i].div
    }
}
于 2012-11-25T22:47:57.700 に答える
0

すでにjQueryライブラリを使用している場合。コードを読みやすく、もう少し保守しやすいように、日付ライブラリを使用することをお勧めします http://archive.plugins.jquery.com/project/jquery-dateFormat

timenow = $.format.date( new Date(), 'ddd h:mm a')
// returns Monday 6:22 AM

switch(timenow){
case 'Monday 1:00 PM':
    //do something
    break;
case 'Tuesday 3:00 PM':
    //do something
    break;
}

その後、常に1時間以内の場合は、分を省略します。'dddha'の形式を使用して ください。SWITCHを使用してJavaScriptを記述できます。

timenow = $.format.date( new Date(), 'ddd h a')
// returns Monday 6 AM

switch(timenow){
case 'Monday 1 PM':
case 'Monday 2 PM':
    //do something
    break;
case 'Tuesday 3 PM':
    //do something
    break;
}

ただし、jqueryを使用しておらず、getDay（）、プレーンjavascriptを使用したい場合

var days =["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var d = new Date();
var hr = d.getHours() % 12;

timenow = days[d.getDay()] + ' ' + hr + (d.getHours() > 12?'PM':'AM')

// returns "Monday 2PM"

注意事項：DBを処理するためにAJAXを介して現在のプレゼンターをフェッチする

于 2012-11-25T22:25:48.127 に答える