更好的解決方案比開關更改classNames

我已創建一個時鐘，連接到日期（）。getHours/minutes/Seconds 顯示的圖像嵌入在不同的類。更好的解決方案比開關更改classNames

現在，當我想改變圖像，我寫了一個開關，每隔一分鐘和幾小時.. 這可能比谷歌引擎更多的代碼。所以我想知道是否有更簡單的解決方案。

這是小時開關的某些代碼，所以當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/

感謝

來源

2013-02-08 Dymond

我會花時間，轉換爲6個位置（h，h，m，m，s，s）的數組「t」，然後引用一個數組[「zero」，「one ...」nine「]，然後使用小時.appendChild（hour1）.className =「clock-digit-」+ digit [t [0]]; hours.appendChild（hour2）.className =「clock-digit-」+ digit [t [1]];等 – Offbeatmammal 2013-02-08 16:34:48

只是擴大我的初步意見

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)];

來源

2013-02-08 16:50:05 Offbeatmammal

工作就像一個魅力。謝謝！ – Dymond 2013-02-08 17:23:16

創建的類名稱的數組，是指它的索引（60項），這比開關更好。

編輯：其他人已經發布了示例和更好的解決方案，但邏輯是數組是最好的解決方案。

來源

2013-02-08 16:32:30 jackJoe

創建人類可讀的數字數組：

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

打破h爲第一和第二位：

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

指數爲digits，以確定你應該使用類名：

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

來源

2013-02-08 16:33:49 Jon

在類名中可以有數字，那麼爲什麼使用人類可讀的數字形式？ – 2013-02-08 16:39:02

@TomášZato：因爲這就是OP已經做的事情，而且這非常容易做到？ – Jon 2013-02-08 16:40:41

當然有一個更簡單的解決方案。例如，可以使類的名稱，如clock-digit-[number]，然後用細繩concatnation做出的className：

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

來源

2013-02-08 16:33:56

我會建議一個解決方案，以保持關聯數組的關聯數組。然後，你只需要兩行設置每個數位（而不是兩個數字的每一個組合單獨）

東西沿着這些路線：

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]];

來源

2013-02-08 16:35:37 joeltine

這仍然會導致非常長的代碼，這是我們不想要的，對嗎？ – 2013-02-08 16:40:11

更好的解決方案比開關更改classNames

回答

相關問題