问如何将css网格中的位置顺序随机化？
EN

Stack Overflow用户

提问于 2022-09-25 21:34:01

回答 1查看 60关注 0票数 0

我对编码非常陌生，当你点击HTML/CSS/Javascript中的一个按钮时，我正在尝试做一个宾果板。目前，我有一个CSS网格，它将文本div网格项按5x5顺序排列。有办法洗牌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>

css

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-25 21:47:39

像这样的东西怎么样？

<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73847991

复制

相似问题

问如何将css网格中的位置顺序随机化？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将css网格中的位置顺序随机化？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将css网格中的位置顺序随机化？
EN