更好的解决方案比开关更改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

回答

相关问题