使用javascript在html中呈现大小为n的框。
使用javascript在html中呈现大小为n的框。
提问于 2015-05-10 03:06:28
我试图使用普通的Javascript在HTML中创建一个网格。我有一个给出数字的URL，并在此基础上生成一个网格。
我的url就像这个abc.html?num=5，在这个num=5的基础上，我需要生成一个5x5大小的网格。
目前我正在使用jQuery，但是我想看看我们如何使用普通的Javascript来做同样的事情。下面是我的小提琴示例。
下面是我对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之类的库来做同样的事情呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-05-10 03:45:24
因为它需要访问url，所以不能在jsfiddle中演示这一点。但是下面是代码，将其放入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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30147298
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号