我想把这个效果改成动态的，就是文本框里输入几，那一行就是几个

Question

我想要改成动态的，现在效果做好了，就是动态创建数组那里卡主了，希望大神帮忙解答。

<style>
		ul { overflow:hidden; }
		li { width:50px; height:20px; text-align:center; line-height:20px; list-style:none; border:1px solid #dedede; float:left; }
	</style>

<input type="text" class="js-text" value="" />
	<input type="button" class="js-btn" value="确定"/>
	
	<div class="list js-list">
		<ul></ul>
	</div>

<script>
		$(function(){
			var btn = $('.js-btn');
			var ul = $('.js-list ul');
			var li = $('.js-list ul li');
			var text = parseInt($('.js-text').val());
			
			var arr = new Array();
			arr[0] = new Array();
			arr[1] = new Array();
			arr[2] = new Array();
			arr[3] = new Array();
			arr[4] = new Array();
			
			btn.on('click',function(){
				var text = parseInt($('.js-text').val());
				var arr = cal(5);
				var stas = "";

				for(var i=0; i<arr.length; i++){
					for(var j=0; j<arr.length; j++){
						stas += arr[i][j];
					}
					stas +='<br /><br />';
				}
				
				ul.html(stas);
			});
			
			var cal = function(len){
				var min = 0;
				var max = len - 1;
				var row = 0;
				var col = 0;

				for(var i=0; i<len*len; i++){
					arr[row][col]='<li>'+(i+1)+'</li>';
					if(row == min && col < max){
						col = col + 1;
					}else if(row < max && col == max ){
						row = row +1;
					}else if(row == max && col > min ){
						col = col - 1;
					}else if(row > min && col == min){
						row = row - 1;
					}
					if(row - 1 == min && col == min ){
						min = min + 1;
						max = max - 1;
					}
				}
				return arr;
			}
		})
	</script>

Answer 1

$(function(){             var btn = $('.js-btn');             var ul = $('.js-list ul');             var li = $('.js-list ul li');             var text = parseInt($('.js-text').val());               btn.on('click',function(){                 var text = parseInt($('.js-text').val()); var arr = new Array(); for(var i=0;i<text;i++){ arr[i] = new Array(); }                 var arr1 = cal(arr,text);                 var stas = "";                   for(var i=0; i<arr1.length; i++){                     for(var j=0; j<arr1.length; j++){                         stas += arr1[i][j];                     }                     stas +='<br /><br />';                 }                                   ul.html(stas);             });                           var cal = function(arr,len){                 var min = 0;                 var max = len - 1;                 var row = 0;                 var col = 0;                   for(var i=0; i<len*len; i++){                     arr[row][col]='<li>'+(i+1)+'</li>';                     if(row == min && col < max){                         col = col + 1;                     }else if(row < max && col == max ){                         row = row +1;                     }else if(row == max && col > min ){                         col = col - 1;                     }else if(row > min && col == min){                         row = row - 1;                     }                     if(row - 1 == min && col == min ){                         min = min + 1;                         max = max - 1;                     }                 }                 return arr;             }         })