在html中使用javascript呈現一個大小爲n的框

我想在使用純Javascript的HTML中製作網格。我有一個網址，其中給出的數字和基礎上，我正在生成一個網格。在html中使用javascript呈現一個大小爲n的框

我的網址是這樣的abc.html?num=5和這個基礎num=5我需要生成一個5x5大小的網格。

目前我正在使用jQuery，但我想看看我們如何使用純Javascript來做同樣的事情。這是我的jsfiddle示例。

下面是我的abc.html全文：

<!DOCTYPE html> 
<html> 

    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       var defaultNum = 4; 
       var url = window.location.search; 
       var num = parseInt(url.split('num=')[1]) || defaultNum; 
       var container = $('#container'); 
       var width = container.outerWidth(); 
       createGrid(num); 

       function createGrid(n) { 
        if (!$.isNumeric(n) || n <= 0) return; 
        for (var i = 0; i < n * n; i++) { 
         var dimension = width/n; 
         var cell = $('<div/>').addClass('gridCell').css({ 
          'width': dimension + 'px', 
           'height': dimension + 'px' 
         }); 
         container.append(cell); 
        } 
       } 
      }); 
     </script> 
     <style> 
      #container { 
       width: 300px; 
       height: 300px; 
      } 
      #container > .gridCell { 
       float: left; 
       padding: 0; 
       margin: 0; 
       border: 0; 
       outline: 1px solid; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="container"></div> 
    </body> 

</html>

我如何做同樣的事情用普通的JavaScript，而不是使用像jQuery的庫裏面我是用當前的？

來源

2015-05-10 john

這不能在jsfiddle中演示，因爲它需要訪問url。但這裏是代碼，把它放在一個HTML並對它進行測試：

<html> 
 
<style> 
 
#container { 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
#container > .gridCell { 
 
    float: left; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
    outline: 1px solid; 
 
} 
 
</style> 
 
<body> 
 
<div id="container"> 
 
    
 
</div> 
 

 
<script> 
 
// QueryString is the function that gets the num parameter. 
 
// Source to this function: http://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-url-parameter 
 
var QueryString = function() { 
 
    // This function is anonymous, is executed immediately and 
 
    // the return value is assigned to QueryString! 
 
    var query_string = {}; 
 
    var query = window.location.search.substring(1); 
 
    var vars = query.split("&"); 
 
    for (var i=0;i<vars.length;i++) { 
 
    var pair = vars[i].split("="); 
 
     // If first entry with this name 
 
    if (typeof query_string[pair[0]] === "undefined") { 
 
     query_string[pair[0]] = pair[1]; 
 
     // If second entry with this name 
 
    } else if (typeof query_string[pair[0]] === "string") { 
 
     var arr = [ query_string[pair[0]], pair[1] ]; 
 
     query_string[pair[0]] = arr; 
 
     // If third or later entry with this name 
 
    } else { 
 
     query_string[pair[0]].push(pair[1]); 
 
    } 
 
    } 
 
    return query_string; 
 
}(); 
 

 
var defaultNum = 3; 
 
var num = parseInt(QueryString.num) || defaultNum; 
 
var container = document.getElementById('container'); 
 
var width = container.offsetWidth; 
 
createGrid(num); 
 

 
function createGrid(n) { 
 
    // If n is not a number or smaller than 0 
 
    if(isNaN(n) || n <= 0) 
 
     return; 
 
    for(var i = 0; i < n*n; i++) { 
 
     var dimension = width/n; 
 
     var cell = document.createElement('div'); 
 
     cell.className = cell.className + ' gridCell'; 
 
     cell.style.width = dimension + 'px'; 
 
     cell.style.height = dimension + 'px'; 
 
     container.appendChild(cell); 
 
    } 
 
} 
 
</script> 
 
</body> 
 
</html>

來源

2015-05-10 03:45:24 Ben

在html中使用javascript呈現一個大小爲n的框

回答

相關問題