绘制3D对象

Question

我想通过复制图层并将增加的边距应用于这些元素来绘制带有JavaScript的3D圆柱体。 我尝试在输入中设置元素的高度并运行复制功能，同时复制的元素的总边距低于元素的设置高度。

http://jsfiddle.net/yuX7Y/3/

<form>
        <input type="number" id="userHeight" />
        <button type="submit" onclick="circleHeight">Submit</button>
</form>

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

    $(document).ready(function(){

    var initMargin = 4;
    var totalMargin = 0;
    var i = 0;

    function copy(){
        $(".slice").clone().appendTo( ".content" ).css({'margin-top': totalMargin + "px"});
        console.log("cloned");
        i++;
        totalMargin = initMargin + 4;
        }
    function setH(){
        while(i < (document.getElementById("userHeight").value)){
            copy();
        }
        if(i>100){
            initMargin = 4;
            i=0;
        }
    }
});

Answer 1

跳转到结果 ： http : //jsfiddle.net/yuX7Y/15/

笔记

这个小提琴/问题引起了我的兴趣，所以我继续看了一会儿。 实际上存在许多问题，一些很明显，有些不太明显。 按照某种顺序，我注意到了这些问题：

• jQuery未包含在小提琴中

• click事件未正确连接-实际上是试图提交表单。 您需要使用e.preventDefault停止提交表单。 由于您已经在使用jQuery，所以我只用jQuery click事件进行了连接：

   $("#recalculateHeight").click(function (e) { e.preventDefault(); setH(); }); 

• 由于使用了“全局”变量（在例程中未初始化的变量），因此提交只能工作一次。 取而代之的是，我将变量声明移至适当的例程。

• 调用$(".slice").clone()克隆页面上的所有切片元素。 第一次克隆时，这很好。 但是之后，您将克隆两个元素，然后克隆三个元素，依此类推（与页面上的切片元素一样多）。 为了解决这个问题，我创建了一个切片模板，例如：

   <div class="slice" id="slice-template" style="display: none"></div> 

  然后，您可以将$("#slice-template").clone()类的内容克隆到您的内心。 只是别忘了调用jQuery show()方法或将显示设置回以阻止在克隆的元素上进行。

• 最后，如果要多次重复该过程，则需要能够清除页面中的先前元素。 我发现最简单的方法是创建容器，然后清除容器中的内容。 因此，我将所有“切片”放入此容器中：

   <div class="content"> 

  现在，当您要清除内容节点时，可以只调用$(".content").empty(); 。

我还在Fiddle中进行了一些基于样式的更改，但是这些更改使其无效或无效，它们只是帮助我阅读了代码！ 所以你有它！ 祝你好运！