时间戳

首页 > 解决方案 > 显示与单击时生成的随机数相对应的骰子元素

javascript - 显示与单击时生成的随机数相对应的骰子元素

问题描述

我试图随机制作一个骰子，并使用 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>

标签： javascriptjqueryhtmlcssdice

解决方案

无需隐藏、显示和重新定位您创建的骰子元素，您只需在点击时创建所需的元素（通过一些 css 修改以利用随机数生成来帮助定位点）。顺便说一句，这里没有真正需要 jQuery，但在示例中使用了它，因为您在原始方法中使用了它。

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

$('#roll').click(() => {
  const 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%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id="roll" type="button">Click to roll</button>
  <div id="die" class="dice">
  </div>
</div>

推荐阅读