有没有更好的方式来写这个，或更短的更紧凑的方式

我正在创建一个jsfiddle根据用户输入的数字循环一定次数的路径。例如，用户输入任何小于30 1的路径（一个瓶子）将在用户输入的纸张上绘制30个以上的路径（2个瓶子）将在纸张上绘制。最终我想继续使用10条路径（10瓶），所以范围应该是（0-30,31-60,61-90 ...）。目前它正在工作，但是如果我写出全部内容，它会有很多代码，而在我这样做之前，我想知道是否有人用新的方法缩短了这一点。我确信有一种方法我无法弄清楚。有没有更好的方式来写这个，或更短的更紧凑的方式

http://jsfiddle.net/anderskitson/Gqbmk/

var paper = Raphael(document.getElementById("notepad"), 500, 500); 

$("input").keyup(function() { 
      var value = parseInt($(this).val()); 
      paper.clear(); 
    if (value > 30) { 
       for (i = 0; i < 2; i++) { 

       var randomNumber1 = Math.floor(Math.random()*200 +25); 
       var randomNumber2 = Math.floor(Math.random()*200 +25); 
       var randomNumber3 = Math.floor(Math.random()*25); 
       var path_a = paper.path("M242.07,270.119c0,0-14.596-30.606-7.625-35.793 c3.864-2.876,2.145-18.561,1.832-18.784c-0.313-0.224-1.839-0.319-1.839-0.319c-1.555-0.192-0.201-3.456-0.201-3.456 s0,0-0.598-0.352c-0.598-0.351,1.129-1.345,1.129-1.345c3.738-2.785,10.449-2.983,11.126-2.344c0.677,0.64-0.354,1.44-0.354,1.44 s0.73,0.832,1.333,2.111c0.604,1.28-0.792,1.665-0.792,1.665c1.852,6.718,9.877,14.935,9.877,14.935 c4.795,0.589,7.7,10.683,7.7,10.683l6.271,22.746C269.929,261.307,263.641,270.119,242.07,270.119z"); 
       path_a.attr({fill: 'none',stroke: '#231F20',"stroke-width": '3',"stroke-miterlimit": '10','stroke-opacity': '1'}).data('id', 'path_a'); 
       path_a.translate(i*30, 10); 
       path_a.rotate(randomNumber3); 

      }//end of for statement 
    }else{ 


      for (i = 0; i < 1; i++) { 

       var randomNumber1 = Math.floor(Math.random()*200 +25); 
       var randomNumber2 = Math.floor(Math.random()*200 +25); 
       var randomNumber3 = Math.floor(Math.random()*25); 
       var path_a = paper.path("M242.07,270.119c0,0-14.596-30.606-7.625-35.793 c3.864-2.876,2.145-18.561,1.832-18.784c-0.313-0.224-1.839-0.319-1.839-0.319c-1.555-0.192-0.201-3.456-0.201-3.456 s0,0-0.598-0.352c-0.598-0.351,1.129-1.345,1.129-1.345c3.738-2.785,10.449-2.983,11.126-2.344c0.677,0.64-0.354,1.44-0.354,1.44 s0.73,0.832,1.333,2.111c0.604,1.28-0.792,1.665-0.792,1.665c1.852,6.718,9.877,14.935,9.877,14.935 c4.795,0.589,7.7,10.683,7.7,10.683l6.271,22.746C269.929,261.307,263.641,270.119,242.07,270.119z"); 
       path_a.attr({fill: 'none',stroke: '#231F20',"stroke-width": '3',"stroke-miterlimit": '10','stroke-opacity': '1'}).data('id', 'path_a'); 
       path_a.translate(i*30, 10); 
       path_a.rotate(randomNumber3); 

      }//end of for statement 

}//end of else statement

}）;

来源

2012-02-27 Cool Guy Yo

这听起来像http://codereview.stackexchange.com/ – 2012-02-27 23:46:08

@MikeSamuel一个问题，它像是*听起来像*一个步骤运行，但IMO它太琐碎CR。我宁愿亲自看到它在这里问及回答。 – 2012-02-28 03:41:36

这个问题似乎是无关紧要的，因为它没有显示对问题的最小理解。 – 2014-03-03 05:42:42

将冗余代码移入单独的函数中。

而且，randomNumber1和randomNumber2未被使用。

var paper = Raphael(document.getElementById("notepad"), 500, 500); 

function drawBottles(count) { 
    for (i = 0; i < count; i++) { 

     var randomNumber3 = Math.floor(Math.random()*25); 
     var path_a = paper.path("M242.07,270.119c0,0-14.596-30.606-7.625-35.793 c3.864-2.876,2.145-18.561,1.832-18.784c-0.313-0.224-1.839-0.319-1.839-0.319c-1.555-0.192-0.201-3.456-0.201-3.456 s0,0-0.598-0.352c-0.598-0.351,1.129-1.345,1.129-1.345c3.738-2.785,10.449-2.983,11.126-2.344c0.677,0.64-0.354,1.44-0.354,1.44 s0.73,0.832,1.333,2.111c0.604,1.28-0.792,1.665-0.792,1.665c1.852,6.718,9.877,14.935,9.877,14.935 c4.795,0.589,7.7,10.683,7.7,10.683l6.271,22.746C269.929,261.307,263.641,270.119,242.07,270.119z"); 
     path_a.attr({fill: 'none',stroke: '#231F20',"stroke-width": '3',"stroke-miterlimit": '10','stroke-opacity': '1'}).data('id', 'path_a'); 
     path_a.translate(i*30, 10); 
     path_a.rotate(randomNumber3); 

    }//end of for statement 
} 

$("input").keyup(function() { 
    var value = parseInt($(this).val()); 
    paper.clear(); 
    if (value > 30) { 
     drawBottles(2); 
    } else { 
     drawBottles(1); 
    }//end of else statement 
});

http://jsfiddle.net/Gqbmk/2/

来源

2012-02-27 23:35:22

这适用于我，除了当输入字段为空或删除空白paper.clear不像以前那样运行。 – 2012-02-28 02:06:38

@AndersKitson它似乎没有清除您原来的小提琴中的纸张。我没有改变那部分。 – 2012-02-28 02:16:15

哦，你的权利，这是我的任何建议，让我工作的最后一块。 – 2012-02-28 02:31:17

两个for循环看起来是一样的。如果循环中的终点是唯一的diff，那么将其设置为一个变量，并且只写for循环1次。

$("input").keyup(function() { 
       var value = parseInt($(this).val()); 
       paper.clear(); 
     var endVal = value > 30 ? 2 : 1; //all values that change between the two define as such 
     for (i = 0; i < endVal; i++) { 
      var randomNumber1 = Math.floor(Math.random()*200 +25); 
      var randomNumber2 = Math.floor(Math.random()*200 +25); 
      var randomNumber3 = Math.floor(Math.random()*25); 
      var path_a = paper.path("M242.07,270.119c0,0-14.596-30.606-7.625-35.793 c3.864-2.876,2.145-18.561,1.832-18.784c-0.313-0.224-1.839-0.319-1.839-0.319c-1.555-0.192-0.201-3.456-0.201-3.456 s0,0-0.598-0.352c-0.598-0.351,1.129-1.345,1.129-1.345c3.738-2.785,10.449-2.983,11.126-2.344c0.677,0.64-0.354,1.44-0.354,1.44 s0.73,0.832,1.333,2.111c0.604,1.28-0.792,1.665-0.792,1.665c1.852,6.718,9.877,14.935,9.877,14.935 c4.795,0.589,7.7,10.683,7.7,10.683l6.271,22.746C269.929,261.307,263.641,270.119,242.07,270.119z"); 
        path_a.attr({fill: 'none',stroke: '#231F20',"stroke-width": '3',"stroke-miterlimit": '10','stroke-opacity': '1'}).data('id', 'path_a'); 
        path_a.translate(i*30, 10); 
        path_a.rotate(randomNumber3); 

     }//end of for statement 
})

来源

2012-02-27 23:36:58 scrappedcola

GGG代码的Mod。使您能够保持30

var stepping = 30; 
var paper = Raphael(document.getElementById("notepad"), 500, 500); 

function drawBottles (count) { 
    for (i = 0; i < count; i++) { 

     var randomNumber1 = Math.floor(Math.random()*200 +25); 
     var randomNumber2 = Math.floor(Math.random()*200 +25); 
     var randomNumber3 = Math.floor(Math.random()*25); 
     var path_a = paper.path("M242.07,270.119c0,0-14.596-30.606-7.625-35.793 c3.864-2.876,2.145-18.561,1.832-18.784c-0.313-0.224-1.839-0.319-1.839-0.319c-1.555-0.192-0.201-3.456-0.201-3.456 s0,0-0.598-0.352c-0.598-0.351,1.129-1.345,1.129-1.345c3.738-2.785,10.449-2.983,11.126-2.344c0.677,0.64-0.354,1.44-0.354,1.44 s0.73,0.832,1.333,2.111c0.604,1.28-0.792,1.665-0.792,1.665c1.852,6.718,9.877,14.935,9.877,14.935 c4.795,0.589,7.7,10.683,7.7,10.683l6.271,22.746C269.929,261.307,263.641,270.119,242.07,270.119z"); 
     path_a.attr({fill: 'none',stroke: '#231F20',"stroke-width": '3',"stroke-miterlimit": '10','stroke-opacity': '1'}).data('id', 'path_a'); 
     path_a.translate(i*30, 10); 
     path_a.rotate(randomNumber3); 

    }//end of for statement 
} 

$("input").keyup(function() { 
    var value = parseInt($(this).val()); 
    paper.clear(); 

    drawBottles(Math.floor(value/stepping)); 

});

来源

2012-02-27 23:44:15

啊，是的，我错过了那部分。当你在它时，不妨将它盖在十个瓶子上;） – 2012-02-27 23:47:41

有一件事我仍然试图得到。当输入30以下的数字时，我想要有一瓶，但现在显示0。 – 2012-02-28 01:43:10

对不起，只是一个小错误。你需要这个：'drawBottles（Math.floor（value/stepping）+ 1）;' – 2012-02-28 18:55:42

有没有更好的方式来写这个，或更短的更紧凑的方式

回答

相关问题