Question

我试图将骰子随机化，并使用HTML和CSS创建了不同的面孔。现在我无法隐藏它们。我想一次只显示一张死者的脸。如何在1到6的随机数上调用单张面孔，并在javascript中尝试单击按钮以更改边框颜色。如何链接CSS，HTML和javascript，以便在单击时显示通过CSS设计的一张脸？

HTML

function roll() {
  var die = Math.floor(Math.random() * 6) + 1;
  $('#die').removeAttr('class').addClass('die' + die);
}

#die {
  width: 30px;
  border: 5px solid black;
  padding: 25px;
  margin: 25px;
}

#die.die1 {
  width: 30px;
  border: 5px solid green;
  padding: 25px;
  margin: 25px;
}

#die.die2 {
  width: 30px;
  border: 5px solid pink;
  padding: 25px;
  margin: 25px;
}

#die.die3 {
  width: 30px;
  border: 5px solid violet;
  padding: 25px;
  margin: 25px;
}

#die.die4 {
  width: 30px;
  border: 5px solid yellow;
  padding: 25px;
  margin: 25px;
}

#die.die5 {
  width: 30px;
  border: 5px solid red;
  padding: 25px;
  margin: 25px;
}

#die.die6 {
  width: 30px;
  border: 5px solid blue;
  padding: 25px;
  margin: 25px;
}

.dice {
  border: solid 3px #aaa;
  border-radius: 3px;
  display: block;
  width: 100px;
  height: 100px;
  margin: 7px auto;
  box-sizing: border-box;
  padding: 10px;
  position: relative;
}

.dice .dot {
  border-radius: 50%;
  position: absolute;
  width: 15px;
  height: 15px;
  background: #000;
}

.dice:first-child .dot {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.dice:nth-child(2) .dot:first-child {
  top: 20px;
  left: 20px;
}

.dice:nth-child(2) .dot:last-child {
  bottom: 20px;
  right: 20px;
}

.dice:nth-child(3) .dot:first-child {
  top: 15px;
  left: 15px;
}

.dice:nth-child(3) .dot:nth-child(2) {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.dice:nth-child(3) .dot:last-child {
  bottom: 15px;
  right: 15px;
}

.dice:nth-child(4) .dot:first-child {
  top: 15px;
  left: 15px;
}

.dice:nth-child(4) .dot:nth-child(2) {
  top: 15px;
  right: 15px;
}

.dice:nth-child(4) .dot:nth-child(3) {
  bottom: 15px;
  left: 15px;
}

.dice:nth-child(4) .dot:last-child {
  bottom: 15px;
  right: 15px;
}

.dice:nth-child(5) .dot:first-child {
  top: 15px;
  left: 15px;
}

.dice:nth-child(5) .dot:nth-child(2) {
  top: 15px;
  right: 15px;
}

.dice:nth-child(5) .dot:nth-child(3) {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.dice:nth-child(5) .dot:nth-child(4) {
  bottom: 15px;
  left: 15px;
}

.dice:nth-child(5) .dot:last-child {
  bottom: 15px;
  right: 15px;
}

.dice:nth-child(6) .dot:first-child {
  top: 15px;
  left: 15px;
}

.dice:nth-child(6) .dot:nth-child(2) {
  top: 15px;
  right: 15px;
}

.dice:nth-child(6) .dot:nth-child(3) {
  top: 0;
  bottom: 0;
  left: 15px;
  margin: auto;
}

.dice:nth-child(6) .dot:nth-child(4) {
  top: 0;
  right: 15px;
  bottom: 0;
  margin: auto;
}

.dice:nth-child(6) .dot:nth-child(5) {
  bottom: 15px;
  left: 15px;
}

.dice:nth-child(6) .dot:last-child {
  bottom: 15px;
  right: 15px;
}

.content {
  left: 80%;
}

<!DOCTYPE HTML>
<html>

<head>
  <link rel="stylesheet" href="dice.css" type="text/css" />
  <script src="dice.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

  <div id="die">
  </div>
  <button type="button" onclick="roll()">Click me!</button>
  <div class="container">
    <div class="dice">
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
  </div>
</body>

</html>

Answer 1

您不必隐藏，显示和重新放置已创建的骰子元素，而是只需单击即可创建所需的元素（进行一些CSS修改，以利用随机数生成来帮助定位点）。顺便说一句，这里并不需要jquery，但是在示例中使用了jquery，因为您是在原始方法中使用它的。

js在#roll按钮上创建了一个单击事件侦听器。每次单击按钮时，num变量都会设置为1到6之间的一个随机数。cls变量会设置各种类的前缀，这些类决定了点在骰子上的位置-它假定掷骰是一个奇数，然后调整它是否是偶数。然后，我们用#die从empty()中删除所有子元素（因此，在添加新点之前，所有前一卷中的点都将被删除）。最后，我们使用循环将#die变量中生成的相同数量的点附加到num。同时，我们为每个点附加编号的类（这就是为什么我们将类命名为odd-1，“ even-1”等的原因）。例如：

$('#roll').click(() => {
  let num = Math.floor(Math.random() * 6) + 1;
  let cls = 'odd-'
  if (num % 2 === 0) {
    cls = 'even-'
  }
  $('#die').empty();
  for (let i = 1; i <= num; i++) {
    $('#die').append('<div class="dot ' + cls + i + '"></div>');
  }
});

.dice {
  position: relative;
  margin: 8px;
  border: solid 3px #aaa;
  border-radius: 3px;
  width: 100px;
  height: 100px;
}

.dice .dot {
  position: absolute;
  background: #000;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-8px, -8px);
}

.odd-1 {
  top: 50%;
  left: 50%;
}

.even-1,
.odd-2 {
  top: 25%;
  left: 25%;
}

.even-2,
.odd-3 {
  top: 75%;
  left: 75%;
}

.even-3,
.odd-4 {
  top: 75%;
  left: 25%;
}

.even-4,
.odd-5 {
  top: 25%;
  left: 75%;
}

.even-5 {
  top: 50%;
  left: 75%;
}

.even-6 {
  top: 50%;
  left: 25%;
}

<div>
  <button id="roll" type="button">Click to roll</button>
  <div id="die" class="dice">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

某事让我创建了@benvc 出色答案的 Vanilla JS 版本（已投票）。
这使用了完全相同的策略，但当然没有像 .empty() 和 .append()

这样的 jQuery 便利

我还选择在可能的情况下使用 const 代替 let，将类名“cls”的确定折叠为三元 ?: 代替 {{1} ，并且我正在显示随机数以直观地确认呈现的骰子与对 HTML 进行细微更改的数字相匹配。
CSS 完全没有变化。

if

const die = document.getElementById('die');
const val = document.getElementById('value');
document.getElementById('roll')
        .addEventListener('click', () => {
            const num = Math.floor(Math.random() * 6) + 1;
            const cls = num % 2 === 0 ? 'even-' : 'odd-';
            val.innerText = num;
            die.innerHTML = '';
            for (let i = 1; i <= num; i++) {
                die.innerHTML += `<div class="dot ${cls}${i}"></div>`;
            }
        });

.dice {
  position: relative;
  margin: 8px;
  border: solid 3px #aaa;
  border-radius: 3px;
  width: 100px;
  height: 100px;
}

.dice .dot {
  position: absolute;
  background: #000;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-8px, -8px);
}

.odd-1 {
  top: 50%;
  left: 50%;
}

.even-1,
.odd-2 {
  top: 25%;
  left: 25%;
}

.even-2,
.odd-3 {
  top: 75%;
  left: 75%;
}

.even-3,
.odd-4 {
  top: 75%;
  left: 25%;
}

.even-4,
.odd-5 {
  top: 25%;
  left: 75%;
}

.even-5 {
  top: 50%;
  left: 75%;
}

.even-6 {
  top: 50%;
  left: 25%;
}

显示与点击产生的随机数相对应的骰子元素

2 个答案: