2014-07-08 52 views
0

我正在爲大學圖書館開發一個新網站。它將包含顯示任何特定日期的營業時間的功能。許多庫使用PHP和後端數據庫或Google日曆集成的組合來完成此操作。由於各種原因,我們不能這樣做,所以我選擇使用Javascript,因爲它已知與我們的CMS(WordPress)合作,而無需打擾校園網站管理員。使用Javascript顯示營業時間

我最初的做法是使用幾個不同的文件,每個文件都帶有一個switch語句,用於顯示基於星期幾的小時數。我們有3種小時(正常,考試周和調解),只有一個地點。儘管如此,必須交換文件會引起一定程度的人爲錯誤。

因此我決定使用一個文件。最有意義的方法是獲取日期,格式化爲月/月(第一秒,第三等)/日期的數目,並使用一系列if ... else語句將當前日期與然後運行switch語句爲當前星期幾選擇正確的小時數。

問題是條件在第一個if語句不斷評估爲真,即使它不是。任何人都可以告訴我我做錯了什麼嗎?還是有更好的方法來完成這項任務?

這裏是我的代碼:

http://jsfiddle.net/mjcodelib/9aKmC/

var current = new Date();       //creates new date object 
var date = current.getDate();      //gets date of month 
var weekDay = current.getDay();      //gets day of week 
var week_num = Math.floor((date - 1)/7) + 1;  //determines the week in the month 
var month = current.getMonth() + 1;     //gets month number 
var date_formatted = month + '/' + week_num + '/' + weekDay;  
//puts date into month/week number/date format 
var date_month = month + '/' + date; 

var date_test = new Date (2014, 11, 24);   //for troubleshooting 

if (date_formatted >= '12/3/1') {     //begin winter intercession  
    switch (weekDay)   {     
     case 0: 
      document.getElementById("hours").innerHTML="Closed Today"; 
      break; 
     case 1: 
     case 2: 
     case 3: 
     case 4: 
      document.getElementById("hours").innerHTML="Today's Hours: 8:00AM to 4:30PM" + date_test; 
      break; 
     case 5: 
      document.getElementById("hours").innerHTML="Today's Hours: 8:00AM to 4:00PM"; 
      break; 
     case 6: 
      document.getElementById("hours").innerHTML="Closed Today"; 
      break; 
    } 
} else if (date_formatted >= '12/2/1') {   //begin fall exam week 
     switch (weekDay)    {    
      case 0: 
       document.getElementById("hours").innerHTML="Today's Hours: 2:00PM to 12:00PM"; 
       break; 
      case 1: 
      case 2: 
      case 3: 
      case 4: 
       document.getElementById("hours").innerHTML="Today's Hours: 7:30AM to 12:00AM"; 
       break; 
      case 5: 
       document.getElementById("hours").innerHTML="Today's Hours: 7:30AM to 4:00PM"; 
       break; 
      case 6: 
       document.getElementById("hours").innerHTML="Closed Today"; 
       break; 
    } 
} else if (date_formatted >= '11/4/1') {  //begin Thanksgiving intercession 
     switch (weekDay)   {     
      case 0: 
       document.getElementById("hours").innerHTML="Closed Today"; 
       break; 
      case 1: 
      case 2: 
      case 3: 
      case 4: 
       document.getElementById("hours").innerHTML="Today's Hours: 8:00AM to 4:30PM"; 
       break; 
      case 5: 
       document.getElementById("hours").innerHTML="Today's Hours: 8:00AM to 4:00PM"; 
       break; 
      case 6: 
       document.getElementById("hours").innerHTML="Closed Today"; 
       break; 
    } 
} else if (date_formatted >= '10/4/1') {  //resume regular hours after fall break 
     switch (weekDay) {       
      case 0: 
       document.getElementByID("hours").innerHTML="Today's Hours: 2:00PM to 10:00PM"; 
       break; 
      case 1: 
      case 2: 
      case 3: 
      case 4: 
       document.getElementById("hours").innerHTML="Today's Hours: 7:30AM to 10:00PM"; 
       break; 
      case 5: 
       document.getElementById("hours").innerHTML="Today's Hours: 7:30AM to 4:00PM"; 
       break; 
      case 6: 
       document.getElementById("hours").innerHTML="Closed Today"; 
       break; 
    } 
} else if (date_formatted > '10/3/3') {   //Fall break 
     switch (weekDay)   {     
      case 0: 
       document.getElementById("hours").innerHTML="Closed Today"; 
       break; 
      case 1: 
      case 2: 
      case 3: 
      case 4: 
       document.getElementById("hours").innerHTML="Today's Hours: 8:00AM to 4:30PM"; 
       break; 
      case 5: 
       document.getElementById("hours").innerHTML="Today's Hours: 8:00AM to 4:00PM"; 
       break; 
      case 6: 
       document.getElementById("hours").innerHTML="Closed Today"; 
       break; 
    } 
} else if (date_formatted == '10/3/3') {   //begin fall break 
    document.getElementByID("hours").innerHTML="Today's Hours: 7:30 AM - 5:00PM"; 
} else if (date_formatted >= '8/3/1') {    //begin fall semester 
    switch (weekDay) {       
     case 0: 
      document.getElementByID("hours").innerHTML="Today's Hours: 2:00PM to 10:00PM"; 
      break; 
     case 1: 
     case 2: 
     case 3: 
     case 4: 
      document.getElementById("hours").innerHTML="Today's Hours: 7:30AM to 10:00PM"; 
      break; 
     case 5: 
      document.getElementById("hours").innerHTML="Today's Hours: 7:30AM to 4:00PM"; 
      break; 
     case 6: 
      document.getElementById("hours").innerHTML="Closed Today"; 
      break; 
    } 
} else if (date_month >= '8/1') {    //begin August intercession 
    switch (weekDay)   {     
     case 0: 
      document.getElementById("hours").innerHTML="Closed Today"; 
      break; 
     case 1: 
     case 2: 
     case 3: 
     case 4: 
      document.getElementById("hours").innerHTML="Today's Hours: 8:00AM to 4:30PM"; 
      break; 
     case 5: 
      document.getElementById("hours").innerHTML="Today's Hours: 8:00AM to 4:00PM"; 
      break; 
     case 6: 
      document.getElementById("hours").innerHTML="Closed Today"; 
      break; 
    } 
} else if (date_formatted >= '6/1/1') {   //begin regular hours for summer  
    switch (weekDay) {       
     case 0: 
      document.getElementByID("hours").innerHTML="Today's Hours: 2:00PM to 10:00PM"; 
      break; 
     case 1: 
     case 2: 
     case 3: 
     case 4: 
      document.getElementById("hours").innerHTML="Today's Hours: 7:30AM to 10:00PM"; 
      break; 
     case 5: 
      document.getElementById("hours").innerHTML="Today's Hours: 7:30AM to 4:00PM"; 
      break; 
     case 6: 
      document.getElementById("hours").innerHTML="Closed Today"; 
      break; 
    } 
} else if (date_formatted >= '5/2/1') {   //begin May intercession 
    switch (weekDay)   {     
     case 0: 
      document.getElementById("hours").innerHTML="Closed Today"; 
      break; 
     case 1: 
     case 2: 
     case 3: 
     case 4: 
      document.getElementById("hours").innerHTML="Today's Hours: 8:00AM to 4:30PM"; 
      break; 
     case 5: 
      document.getElementById("hours").innerHTML="Today's Hours: 8:00AM to 4:00PM"; 
      break; 
     case 6: 
      document.getElementById("hours").innerHTML="Closed Today"; 
      break; 
    } 
} else if (date_formatted >= '5/1/1') {   //begin Spring exam week 
     switch (weekDay)    {    
      case 0: 
       document.getElementById("hours").innerHTML="Today's Hours: 2:00PM to 12:00PM"; 
       break; 
      case 1: 
      case 2: 
      case 3: 
      case 4: 
       document.getElementById("hours").innerHTML="Today's Hours: 7:30AM to 12:00AM"; 
       break; 
      case 5: 
       document.getElementById("hours").innerHTML="Today's Hours: 7:30AM to 4:00PM"; 
       break; 
      case 6: 
       document.getElementById("hours").innerHTML="Closed Today"; 
       break; 
    } 
} else if (date_formatted >= '3/3/1') {   //resume regular hours after Spring Break 
     switch (weekDay) {       
     case 0: 
      document.getElementByID("hours").innerHTML="Today's Hours: 2:00PM to 10:00PM"; 
      break; 
     case 1: 
     case 2: 
     case 3: 
     case 4: 
      document.getElementById("hours").innerHTML="Today's Hours: 7:30AM to 10:00PM"; 
      break; 
     case 5: 
      document.getElementById("hours").innerHTML="Today's Hours: 7:30AM to 4:00PM"; 
      break; 
     case 6: 
      document.getElementById("hours").innerHTML="Closed Today"; 
      break; 
    } 
} else if (date_formatted >= '3/2/1') {   //begin Spring Break 
    switch (weekDay)   {     
     case 0: 
      document.getElementById("hours").innerHTML="Closed Today"; 
      break; 
     case 1: 
     case 2: 
     case 3: 
     case 4: 
      document.getElementById("hours").innerHTML="Today's Hours: 8:00AM to 4:30PM"; 
      break; 
     case 5: 
      document.getElementById("hours").innerHTML="Today's Hours: 8:00AM to 4:00PM"; 
      break; 
     case 6: 
      document.getElementById("hours").innerHTML="Closed Today"; 
      break; 
    } 
} else if (date_formatted >= '1/2/1') {   //begin Spring semester 
    switch (weekDay) {       
     case 0: 
      document.getElementByID("hours").innerHTML="Today's Hours: 2:00PM to 10:00PM"; 
      break; 
     case 1: 
     case 2: 
     case 3: 
     case 4: 
      document.getElementById("hours").innerHTML="Today's Hours: 7:30AM to 10:00PM"; 
      break; 
     case 5: 
      document.getElementById("hours").innerHTML="Today's Hours: 7:30AM to 4:00PM"; 
      break; 
     case 6: 
      document.getElementById("hours").innerHTML="Closed Today"; 
      break; 
    } 
} else if (date_formatted >= '1/1/4') {   //Winter intercession 
    switch (weekDay)   {     
     case 0: 
      document.getElementById("hours").innerHTML="Closed Today"; 
      break; 
     case 1: 
     case 2: 
     case 3: 
     case 4: 
      document.getElementById("hours").innerHTML="Today's Hours: 8:00AM to 4:30PM"; 
      break; 
     case 5: 
      document.getElementById("hours").innerHTML="Today's Hours: 8:00AM to 4:00PM"; 
      break; 
     case 6: 
      document.getElementById("hours").innerHTML="Closed Today"; 
      break; 
    } 
} else { 
    document.getElementByID("hours").innerHTML="<a   href='http://www.deltastate.edu/academics/libraries/libraries-hours-of-operation/' target='_blank'>Click here for Library hours</a>"; 
} 
+0

那麼,你比較的字符串,而不是日期... –

+0

你應該做的日期對象或數字的比較。不要使用格式化的日期字符串進行任何比較。 –

+0

date_formatted> = '12/3/1'不是日期比較的正確方法,它只是一個字符串比較 – InferOn

回答

0

的說明,因爲我感到懶惰,不想要弄清楚你的month/week_num/weekDay串的日曆日期,我剛剛實施的直數值比較,因此它是不是最有效的(或最容易閱讀)

Here's a jsfiddle

差不多就是我落得這樣做有

if (month >= ## && week_num >= # && weekDay >= #) 

更換每一個

if (date_formatted >= '##/#/#') 

我還添加了一個div#小時到的jsfiddle讓你可以真正看到結果用不同的測試日期,並將document.getElementById("hours")轉換爲可讀性的變量。

+0

非常感謝! month/week_num/weekDay格式來自我在Javascript Cookbook論壇上發現的腳本,以確定一天是否爲聯邦假期。也許不是最好的願望來源。我想到我可以使用函數來比較日期並確定應設置哪種類型的小時(常規,考試或調解)。但現在這會做。 –