Question

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

<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不包含在小提琴中

点击事件未正确连线 - 它实际上是在尝试提交表单。您需要使用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();。

我还在我的小提琴中做了一些基于样式的更改，但是那些不能使它工作或不工作，它们只是帮助我阅读代码！所以你有它！祝你好运！

绘制3D对象

1 个答案: