Question

我写了一些JavaScript，基本上可以根据时间显示不同的像素。我已经编写了代码（至少几秒钟），并且工作正常，但我在简化它时遇到了麻烦，所以我不必一遍又一遍地输入（差不多）相同的代码。

以下是我的代码示例：

    var getTime = function() {
            var date = new Date();
            var hours = date.getHours();
            var mins = date.getMinutes();
            var secs = date.getSeconds();

            if (secs==0) {
                for (var s=1; s < 60; s++) {
                    $("#s" + s).removeClass('display');
                };
            } else if (secs == 1) {
                for (var s=1; s < (secs+1); s++) {
                    $("#s" + s).addClass('display');
                };
            } else if (secs == 2) {
                for (var s=1; s < (secs+1); s++) {
                    $("#s" + s).addClass('display');
                };
            } else if (secs == 3) {
                for (var s=1; s < (secs+1); s++) {
                    $("#s" + s).addClass('display');
                };
            .........(cont.)
            } else if (secs == 59) {
                for (var s=1; s < (secs+1); s++) {
                    $("#s" + s).addClass('display');
                }
            }
        };

Answer 1

如果我理解正确，您会尝试根据秒数显示#s。简单的解决方案是清除所有并重新设置显示。

var getTime = function() {
   var date = new Date();
   var hours = date.getHours();
   var mins = date.getMinutes();
   var secs = date.getSeconds();

   //Hide all ids starting with 's'
   $('[id^=s]').removeClass('display');

   for (var s=1; s < (secs+1); s++) {
       $("#s" + s).addClass('display');
   }
};

Answer 2

（更新以确保行为正确，即使我们错过了勾号）

var getTime = function() {
    var date = new Date();
    var hours = date.getHours();
    var mins = date.getMinutes();
    var secs = date.getSeconds();

    for (var s = 0; s < 60; s++) {
      var elements = $("#s" + s);
      elements.removeClass('display');
      if (s <= secs) {
          elements.addClass('display');
      }
    }
}

Answer 3

我可能会遗漏一些东西，因为你不知道为什么你有59个else看起来相同的条件

var getTime = function() {
    var date = new Date();
    var hours = date.getHours();
    var mins = date.getMinutes();
    var secs = date.getSeconds();

    if (secs==0)
        for (var s=1; s < 60; s++)
            $("#s" + s).removeClass('display');
    else
        for (var s=1; s < (secs+1); s++)
            $("#s" + s).addClass('display');
};

Answer 4

对于超过0的秒，您的逻辑总是相同的

if (secs < 1) {

    for (var s=1; s < 60; s++) {
        $("#s" + s).removeClass('display');
    };


} else {

    for (var s=1; s < (secs+1); s++) {
        $("#s" + s).addClass('display');
    };


}

在Javascript中简化迭代if / else if语句

4 个答案: