javascript - 使用 JavaScript/jQuery 创建同心圆

Question

我正在尝试使用 jQuery 使用 for 循环从一个对象生成 10 个同心圆。

我已经在我的 jsfiddle 中写了这个 http://jsfiddle.net/JoshuaWaheed/NJkda/2/ ，看起来像这样:

<div class="circle"></div>

for(var count = 0; count < 20; count++){
  var ten = 10;
  ten = ten + 30;
  $(".circle").css({"width":ten+"px","height":ten+"px"});
};

我怎样才能做到这一点？当我将变量添加任何数字(例如 30)时，它的宽度和高度似乎增加了，但没有产生应有的结果。

Answer 1

您需要在循环外定义 ten 变量，并为每个环创建一个新元素。

例如，

var ten = 10;
var tgt = $('body');
for(var count = 0; count < 20; count++){
    ten += 30;
    tgt.append('<div class="circle" style="width:'+ten+'px;height:'+ten+'px;margin:-'+(ten/2)+'px 0 0 -'+(ten/2)+'px"></div>');
};

请注意，我还在 javascript 中定义了边距，因为它也需要更改。

您的 CSS 也需要稍作改动；

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 3px solid #666666;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

我已将边框半径设置为 100% 而不是像素值，并删除了不必要的边距和宽度/高度。