我对编码很陌生，我正在尝试制作一个宾果游戏板，当你在HTML/CSS/Javascript中单击按钮时，它会洗牌。目前，我有一个CSS网格，它以5x5的顺序放置文本div网格项。有没有办法打乱div元素的顺序？
例如：
<div class="grid-item"> 1 </div>
<div class="grid-item"> 2 </div>
<div class="grid-item"> 3 </div>
<div class="grid-item"> 4 </div>
<div class="grid-item"> 5 </div>
这样的东西怎么样？
<html>
<body>
<div id = "bingo">
</div>
<button onclick = "shuffleBoard()">Shuffle</button>
<script>
makeBoard();
function makeBoard() {
var str = "";
for (var i = 1; i <= 25; i++) {
str += "<div class = 'grid-item'>" + i + "</div>";
}
document.getElementById("bingo").innerHTML = str;
}
function shuffleBoard() {
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25];
var str = "";
while (numbers.length > 0) {
var i = Math.floor(Math.random() * numbers.length);
str += "<div class = 'grid-item'>" + numbers[i] + "</div>";
numbers.splice(i, 1);
}
document.getElementById("bingo").innerHTML = str;
}
</script>
</body>
</html>