Javascript를 사용하여 영업 시간 표시

저는 대학 도서관을위한 새로운 웹 사이트를 개발하는 중입니다. 특정 날짜에 영업 시간을 표시하는 기능이 포함됩니다. 많은 라이브러리는 PHP와 백엔드 데이터베이스 또는 Google 캘린더 통합의 일부 조합을 사용하여이를 수행합니다. 캠퍼스 웹 마스터를 괴롭 히지 않고도 CMS (WordPress)에서 작동하는 것으로 알려져 있기 때문에 Javascript를 사용하기로 결정한 이유는 다양합니다.Javascript를 사용하여 영업 시간 표시

필자의 초기 접근 방식은 몇 가지 파일을 사용하고 각각은 switch 문을 사용하여 요일을 기준으로 시간을 표시했습니다. 우리는 3 가지 유형의 시간 (정규, 시험 주간 및 중보기도)과 단 하나의 위치만을 가지고 있습니다. 그럼에도 불구하고 파일을 교환해야하는 것은 어느 정도 인간의 실수를 야기합니다.

따라서 하나의 파일을 사용하기로 결정했습니다. 가장 합리적인 접근 방식은 날짜를 가져 와서 월/일주일의 숫자 (1, 2, 3 등)/날짜와 같은 서식을 지정하고 일련의 if ... else 문을 사용하여 현재 날짜를 스위치 명령문을 실행하여 현재 요일의 정확한 시간을 선택하십시오.

문제는 첫 번째 if 문에서 조건부가 true가 아닌 경우에도 계속 평가됩니다. 아무도 내가 잘못한 것을 말해 줄 수 있습니까? 아니면이 작업에 대한 더 나은 접근 방법이 있습니까? 여기

내 코드입니다 : 내가 게으른 기분이 좋아졌다하고 month/week_num/weekDay 문자열의 달력 날짜를 파악해야하고 싶지 않았기 때문에,

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>"; 
}

출처

2014-07-08 Mike P

음, 날짜가 아닌 문자열을 비교하고 있습니다 ... –

날짜 개체 또는 숫자로 비교해야합니다. 형식이 지정된 날짜 문자열과 비교하지 마십시오. –

date_formatted> = '12/3/1 '은 날짜 비교에 올바른 접근법이 아닙니다. 단지 문자열 비교입니다. – InferOn

주의 사항 I 방금 수치 비교를 구현 했으므로 가장 효율적이지는 않습니다. (또는 가장 읽기 쉬운 것)

Here's a jsfiddle

당신이 실제로 볼 수 있도록

꽤 많이 나는

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

으로 매일

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

를 교체 한 일을 결국 내가 또한 jsfiddle에 사업부의 # 시간 추가 결과가 다른 테스트 날짜와 함께 을 가독성을 위해 변수에 캐스트합니다.

출처

2014-07-09 03:22:58 RevanProdigalKnight

대단히 고마워요! month/week_num/weekDay 형식은 Javascript Cookbook 포럼에서 발견 된 스크립트에서 가져 와서 하루가 연방 휴일인지 확인합니다. 아마 포부의 최고의 원천이 아닙니다. 이 생각은 아마도 날짜를 비교하고 어떤 유형의 시간 (정규, 시험 또는 중보기도)을 설정해야 하는지를 결정하는 기능을 사용할 수 있다고 생각했습니다. 그러나 지금 당장 이것은 할 것입니다. –

Javascript를 사용하여 영업 시간 표시

답변

관련 문제