Question

我创建了一个时钟，连接到date（）。getHours / minutes / Seconds 显示的图像嵌入在不同的类中。

现在，当我想要更改图像时，我每隔一分钟和几小时写一个开关。这可能比谷歌引擎更多的代码。所以我想知道是否有更简单的解决方案。

这是小时开关的一些代码因此，当第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 = ["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];

Answer 2

当然有一个更简单的解决方案。例如，您可以创建类clock-digit-[number]等类名，然后使用字符串连接来创建className：

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

要找出时间编号包含哪些数字的表单，您可以将数字转换为字符串并将其.split()转换为字符串。这不是最有效的方法，但它简单明了。

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

然后使用for循环向您的div添加数字：

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

如果您想使用原始类名，可以创建一个数组，如@Jon建议：

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 3

我建议使用一种解决方案，将关联的数字数组保存到其关联的类中。那么你只需要两行来设置每个数字（而不是单独的两个数字的每一个组合）

这些方面的东西：

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

Answer 4

只是扩展我的初步评论

  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 5

创建一个类名数组并引用它的索引（60项），这比交换机好。

编辑：其他人已经发布了示例和更好的解决方案，但逻辑是阵列是最佳解决方案。

比改变classNames的开关更好的解决方案

5 个答案: