변경 클래스의 스위치보다 더 나은 솔루션 이름

Question

date()에 연결된 시계를 만들었습니다. getHours/minutes/Seconds 쇼 이미지는 다른 클래스에 포함되어 있습니다.

이제 이미지를 바꾸고 싶을 때마다 매분 2 시간마다 스위치를 썼습니다. Google 검색 엔진보다 코드가 더 많습니다. 그래서 더 간단한 해결책이 있는지 궁금합니다.

이것은 시간 스위치 의 일부 코드이므로 분 15가 시계에 도달하면 className이 1과 5로 변경됩니다.

switch(h){ 

     case 15: 
      x = hours.appendChild(hour1).className = "clock-digit-one"; 
      x = hours.appendChild(hour2).className = "clock-digit-five"; 
      break 
     case 16: 
      x = hours.appendChild(hour1).className = "clock-digit-one"; 
      x = hours.appendChild(hour2).className = "clock-digit-six"; 
      break 

     default: 
      x = hours.appendChild(hour1).className = "clock-digit-zero"; 
      x = hours.appendChild(hour2).className = "clock-digit-zero"; 

    } 

더 많은 코드를 표시하는 jsFiddle을 만들었습니다. 팁이 유용 할 것입니다. http://jsfiddle.net/Xk49c/2/

감사

Answer 1

을

var digits = new Array("zero","one","two","three","four","five","six","seven","eight","nine"); 
    var h=new Date().getHours().toString(); 
    var m = new Date().getMinutes().toString(); 
    var s = new Date().getSeconds().toString(); 
    var t = ((h>9?h:"0"+h)+ (m>9?m:"0"+m) +(s>9?s:"0"+s)); 

    hours.appendChild(hour1).className = "clock-digit-" + digits[t.substring(0,0+1)]; 
    hours.appendChild(hour2).className = "clock-digit-" + digits[t.substring(1,1+1)]; 
    minutes.appendChild(minute1).className = "clock-digit-" + digits[t.substring(2,2+1)]; 
    minutes.appendChild(minute2).className = "clock-digit-" + digits[t.substring(3,3+1)]; 
    seconds.appendChild(second1).className = "clock-digit-" + digits[t.substring(4,4+1)]; 
    seconds.appendChild(second2).className = "clock-digit-" + digits[t.substring(5,5+1)]; 

Answer 2

는 클래스 이름의 배열을 만들고 인덱스 (60 개 항목), 즉 스위치보다 더 나은의를 참조하십시오.

편집 : 다른 사람들은 예제와 더 나은 솔루션을 게시했지만 논리는 배열이 최상의 솔루션이라는 것입니다.

Answer 3

인간이 읽을 수의 배열을 만듭니다

var hours = Math.floor(h/10); 
var minutes = h % 10; 

지수 digits에 사용되어야하는 클래스 이름을 결정하기 : 아래 h 제 1 및 제 2 자리로

var digits = ["zero", "one", "two", ..., "nine"]; 

휴식을

hours.appendChild(hour1).className = "clock-digit-" + digits[hours]; 
hours.appendChild(hour2).className = "clock-digit-" + digits[minutes]; 

Answer 4

물론 간단한 솔루션이 있습니다. 예를 들어, 같은 clock-digit-[number] 같은 클래스 이름을 확인한 다음 클래스 이름 만들기 위해 문자열 concatnation를 사용할 수 있습니다 시간 수로 구성되어 자리 양식을 찾으려면

x = hours.appendChild(hour1).className = "clock-digit-"+h; 

을, 당신은 문자열과 .split()을에 수를 변환 할 수 있습니다. 이것은 가장 효과적인 방법은 아니지만 간단하고 명확합니다. @ 존 제안처럼 원래 클래스 이름을 사용하고 싶었 경우

for(var i=0; i<numbers.length; i++) { //We loop through ["1","5"] 
    var num = document.createElement("div");  //Use your element type here! 
    num.className = "clock-digit-"+numbers[i]; //Get either 1 or 5 
    hours.appendChild(num); 
} 

, 당신은, 배열을 만들 수 있습니다 :

var numbers = h.toString().split(""); //Will give ["1","5"] for 15 

은 그럼 당신은 for 루프를 사용하여 DIV에 번호를 추가

var digits = ["zero", "one", "two", ..., "nine"]; 

다음, for 루프는과 같습니다

for(var i=0; i<numbers.length; i++) { //We loop through ["1","5"] 
    var num = document.createElement("div");  //Use your element type here! 
    num.className = "clock-digit-"+digits[numbers[i]]; //Get either 1 or 5 
    hours.appendChild(num); 
} 

Answer 5

관련 클래스에 연관 배열을 유지하는 솔루션을 제안합니다.그럼 당신은이 라인을 따라 각 숫자 (대신 개별적으로 두 자리의 모든 단일 조합)

뭔가 설정하는 두 줄이 필요합니다 : 그냥 내 첫 코멘트를 확대

var digitToClass = { 
    0: 'clock-digit-zero', 
    1: 'clock-digit-one', 
    2: 'clock-digit-two', 
    3: 'clock-digit-three' 
    //.. 
}; 

var minute = "03"; 

minutes1.className = digitToClass[minute[0]]; 
minutes2.className = digitToClass[minute[1]];