1

我创建了一个时钟，连接到 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/

谢谢

4

5 回答 5

3

创建一个人类可读的数字数组：

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-08T16:33:49.063 回答
3

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

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);
}
于 2013-02-08T16:33:56.790 回答
1

just expanding my initial comment

  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-08T16:50:05.277 回答
1

我会建议一个解决方案，将关联的数字数组保留到它们的关联类中。然后你只需要两行来设置每个数字（而不是单独的两个数字的每个组合）

这些方面的东西：

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-08T16:35:37.873 回答
0

创建一个类名数组并引用其索引（60 项），这比开关好。

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

于 2013-02-08T16:32:30.963 回答