有没有更好的方法来写这篇文章,或者用一种更短更紧凑的方法
Is there a better way to write this, or a shorter more compact way
我正在使用jsfiddle创建一个路径,该路径根据用户输入的数字循环一定次数。例如,用户在小于30的任何数目中键入1个路径(一个瓶子)将在纸上绘制,用户在大于30的任何数目的任何数目中输入2个路径(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
});
将多余的代码移动到一个单独的函数中。
此外,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/
两个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
})
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));
});
相关文章:
- 有没有一种方法可以添加相同的项目val=“0”;4〃;到JavaScript中数组的每个对象
- 有没有一种方法可以防止img get请求使用css或js发生
- Javascript,有没有一种方法可以将数组写成没有逗号或空格的单个文本字符串
- 有没有一种方法可以在控制台关闭的情况下让console.log()在IE中记录消息
- 有没有一种方法可以仅使用HTML/CSS来隐藏基于特定值的数据单元格
- 有没有一种方法可以从URL跟踪请求的域
- 有没有一种方法可以列出Ember.Object的所有绑定
- 有没有一种方法可以获得three.js的最小/lite版本
- 有没有一种方法可以在没有文档或jQuery的情况下使用javascript解码html实体
- 有没有一种方法可以从Javascript检测特定的应用程序是否安装在(AndroidiOS)设备上
- 在HTML/JavaScript中,有没有一种方法可以在图像开始加载时知道图像的最终布局尺寸
- 有没有一种方法可以在Javascript中进行可变递归currying
- 有没有一种方法可以检测ios<>使用jquery和触发器操作形成导航按钮
- 有没有一种方法可以让内联事件处理程序在元素创建后立即执行
- 任何一种简单的方法都可以将带有onload的元素作为目标
- jQuery:使用substr()的另一种方法
- 有没有一种方法可以直接从cordova获得滚动位置
- 有没有一种方法可以通过只引用JavaScript来执行代码
- firebase中有没有一种方法可以防止快速连续写入
- GWT:有没有一种方法可以修改GWT在编译中使用的Cast.java文件