Web應用程序中的動態Div對象？

Question

我想弄清楚如何讓每個變化的變量顯示一定數量的橙色圓圈。這將如何完成？

如果數字是4，應該有4個橙色圓圈。 如果數字是3，應該有3個橙色圓圈。

另外，動畫出口和入口？

什麼是在網絡應用程序中執行此操作的最佳方法？謝謝！

示例代碼/ jsfiddle會很棒。 :)

Answer 1

$(document).ready(function(){ 
 
    $('#number').keyup(function(){ 
 
     $('#container').empty(); 
 
     for(var i = 1; i <= $(this).val(); i++){ 
 
      $('#container').append('<div class="circle">&nbsp</div>'); 
 
     } 
 
    }); 
 

 
});

.circle { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    border-radius: 50%; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
change this value: 
 
<input id="number" type="text" value="3"> 
 
<div id="container"></div>