使<div>以随机顺序和随机位置出现

Question

我正在尝试使用 JavaScript、HTML 和 CSS 创建一个迷你游戏。它的结构是一个 4x4 的表格。我的表格的每一行都存储在一个<section> 标签中。每个<section> 包含4 个<div>s。当我点击一个按钮时，我想让表格的一个随机元素出现。此外，让元素以随机顺序出现也很棒。

这是我的部分代码：

<section class="oggettoElements">
    <i class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="11"></i>
    <i class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="21"></i>
    <i class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="31"></i>
    <i class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="41"></i>
</section>
<section class="oggettoElements">
    <i class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="12"></i>
    <i class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="22"></i>
    <i class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="32"></i>
    <i class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="42"></i>
</section>
<section class="oggettoElements">
    <i class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="13"></i>
    <i class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="23"></i>
    <i class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="33"></i>
    <i class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="43"></i>   
</section>
<section class="oggettoElements">
    <i class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="14"></i>
    <i class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="24"></i>
    <i class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="34"></i>
    <i class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="44"></i>
</section>

所以，我的目标是：拥有一个让一个元素一次出现的功能（我将在按钮中使用 onClick 属性调用它）。该元素将是表中的随机元素。

有人可以帮我吗？非常感谢

Answer 1

以下内联代码 sn-p 实现了网格元素的随机幻影并演示了一些（希望）有用的概念：

• 基于 CSS 的布局，使用 display 属性进行表格布局；
• Css 属性display: flex 内容居中；
• 使用 document.querySelector(...)、document.querySelectorAll(...) 以编程方式访问 DOM 元素；
• DOM NodeList 不是数组。类似的惊喜比比皆是，参考文档和规范是您的朋友。文档，而不是 YouTube 视频...

记住id 属性值不能是数字。避免过度优化 - 尚未显示的元素的选择非常原始，可见的元素越多，找到隐藏元素的尝试就越多。然而，为了应对与慢人的互动，效率不是问题...... ;)

let b_allVisible = false
  ;
  
function showme ( eve ) {
    let e_chosen
      , n_c
      , n_r
      ;
      
    b_allVisible = !(
      Array
        .from(document.querySelectorAll('div[id^="c-"]'))
        .some ( (pe_grid) => { return pe_grid.style.visibility !== 'visible'; } )
    );
    
    if (b_allVisible) {
      document.getElementById('showme').setAttribute('disabled', 'disabled');
    } else {
      do {
          n_c = 1 + Math.floor( 4 * Math.random() ); 
          n_r = 1 + Math.floor( 4 * Math.random() ); 
          e_chosen = document.querySelector(`#c-${n_c}${n_r}`);
              // Here (referencing an element by their id), 'document.getElementById(`c-${n_c}${n_r}`)' can also be used.
              // Note the absence of the selector marker '#' for ids
      } while ( e_chosen.style.visibility === 'visible' );

      e_chosen.style.visibility = 'visible';
    }
} // showme

body > section {
    display:    table;
    padding:    20px;
}
section.oggettoElements {
    display:    table-row;
}
section.oggettoElements > div {
    display:    table-cell;
    border: solid 1px black;
    height: 30px;
    width:  30px;
    visibility: hidden;
}
section.oggettoElements > div > div {
    display:            flex;
    height:             30px;
    align-items:        center;
    justify-content:    center;
}
div > span {
    flex: 1;
    text-align: center
}

<section>
    <section class="oggettoElements">
        <div class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="c-11"><div><span>01</span></div></div>
        <div class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="c-21"><div><span>02</span></div></div>
        <div class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="c-31"><div><span>03</span></div></div>
        <div class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="c-41"><div><span>04</span></div></div>
    </section>
    <section class="oggettoElements">
        <div class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="c-12"><div><span>05</span></div></div>
        <div class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="c-22"><div><span>06</span></div></div>
        <div class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="c-32"><div><span>07</span></div></div>
        <div class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="c-42"><div><span>08</span></div></div>
    </section>
    <section class="oggettoElements">
        <div class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="c-13"><div><span>09</span></div></div>
        <div class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="c-23"><div><span>10</span></div></div>
        <div class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="c-33"><div><span>11</span></div></div>
        <div class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="c-43"><div><span>12</span></div></div>   
    </section>
    <section class="oggettoElements">
        <div class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="c-14"><div><span>13</span></div></div>
        <div class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="c-24"><div><span>14</span></div></div>
        <div class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="c-34"><div><span>15</span></div></div>
        <div class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="c-44"><div><span>16</span></div></div>
    </section>
</section>
<button id="showme" name="showme" onclick="showme()">Show Me!</button>