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

h1桁目と2桁目に分解します。

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]を作成し、文字列連結を使用して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);
}
于 2013-02-08T16:33:56.790 に答える
1

関連付けられたクラスに数字の連想配列を保持するソリューションを提案します。次に、各桁を設定するために必要なのは2行だけです（2桁のすべての組み合わせを個別に設定するのではなく）

これらの線に沿った何か：

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 に答える
1

私の最初のコメントを拡大するだけです

  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 に答える
0

クラス名の配列を作成し、そのインデックス（60項目）を参照します。これはスイッチよりも優れています。

編集：他の人は例とより良い解決策を投稿しました、しかし論理は配列が最良の解決策であるということです。

于 2013-02-08T16:32:30.963 に答える