好吧,我的意圖是創建一個按鈕,它會彈出一個對話框,詢問您要調整網格的大小,一旦用戶輸入了網格的數量在與前面相同的總空間中生成(應該是960像素),我已經調整了網格的大小,但它不會像以前一樣保留在相同的總空間中,並且如果添加了太多的正方形,它似乎完全嚇壞了,在這裏是鏈接 - https://codepen.io/codeChimp88/pen/zzMrjx的codepen,如果你需要更多的信息讓我知道,任何指針,我應該看看的信息將不勝感激,也任何批評,我應該尋求改善是值得歡迎的(我是一個初學者),代碼如下!Odin項目蝕刻草圖 - 調整大小的網格
HTML -
<h1>Etch a Sketch Pad</h1>
<div class="cont">
<button class="but">Clear Pad</button>
<button class="but" id="resize">Resize</button>
</div>
<div class="container">
</div>
CSS -
.squares {
background-color: black;
border: solid 1px black;
display: inline-block;
width: 20px;
height: 20px;
color: transparent;
}
.black {
background-color: black;
}
.container {
text-align: center;
border: solid 20px red;
background-color: red;
height: 100%;
width: 100%;
}
h1 {
text-align: center;
font-size: 50px;
}
.but {
width: 100px;
height: 100px;
cursor: pointer;
background-color: red;
font-size: 20px;
margin: 10px;
border-radius: 10px;
}
.cont {
text-align: center;
margin: 20px;
}
的jQuery -
$(document).ready(function() {
var $grid = $('.container');
for (i = 0; i < 16; i++)
{
var row = '<div>';
for (j = 0; j < 16; j++)
row += '<div class="squares">' + j + '</div>';
row += '</div>';
$grid.append(row);
}
$('.squares').mouseenter(function() {
$(this).css("background-color", "white");
});
$('.but').click(function() {
$('.squares').css("background-color", "black");
});
$('#resize').click(function() {
$('.squares').remove();
$('.container').append('<table></table>');
var gridsize = prompt('How big would you like to make the grid?');
var $grid = $('.container');
for (i = 0; i < gridsize; i++)
{
var row = '<div>';
for (j = 0; j < gridsize; j++)
row += '<div class="squares">' + j + '</div>';
row += '</div>';
$('.squares').width(960/gridsize);
$('.squares').height(960/gridsize);
$grid.append(row);
$('.squares').mouseenter(function() {
$(this).css("background-color", "white");
});
}
});
});
那完全回答了所有的我的問題和排序問題,感謝您花時間! –