繪制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中進行了一些基於樣式的更改，但是這些更改使其無效或無效，它們只是幫助我閱讀了代碼！ 所以你有它！ 祝你好運！