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

better solution than a switch for change classNames

本文关键字：开关 解决方案 更好 classNames      更新时间：2023-09-26

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

感谢

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

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

当然还有一个更简单的解决方案。例如，您可以制作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);
}

只是扩展我的初始注释

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

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

大致如下：

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

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

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

相关文章：