Question

这里我有6个子div的div。再次，每个子div具有span标签。现在，我必须计算div的span（class =“ dot”）吗？我有一个3D立方体。单击多维数据集时，生成的面带有点（例如2）。我的要求是获取值2。

我试图找到div是否在视口中。如果它在视口中，那么我将通过使用childElementCount获得该div的子元素。但没有答案。

_roll() {
  var cube = this._root.getElementById('cube');
  var min = 1;
  var max = 24;
  var xRand = this._getRandom(max, min);
  var yRand = this._getRandom(max, min);
  cube.style.webkitTransform = 'rotateX(' + xRand + 'deg) rotateY(' + yRand + 'deg)';
  cube.style.transform = 'rotateX(' + xRand + 'deg) rotateY(' + yRand + 'deg)';
}

.container {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 0 auto 40px;
  perspective: 1000px;
  perspective-origin: 50% 100%
}

#cube {
  width: 100%;
  height: 100%;
  top: 100px;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 6s;
}

#cube:hover {
  cursor: pointer;
}

#cube div {
  background: #aa0000;
  display: block;
  position: absolute;
  width: 150px;
  height: 55px;
  padding: 48px 0px;
}

#cube .front {
  transform: translateZ(75px);
}

#cube .back {
  transform: rotateX(-180deg) translateZ(75px);
}

#cube .right {
  transform: rotateY(90deg) translateZ(75px);
}

#cube .left {
  transform: rotateY(-90deg) translateZ(75px);
}

#cube .top {
  transform: rotateX(90deg) translateZ(75px);
}

#cube .bottom {
  transform: rotateX(-90deg) translateZ(75px);
}

.dot {
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background: #fff;
  border-radius: 15px;
}

.front .dot1 {
  top: 62px;
  left: 62px;
}

.back .dot1 {
  top: 12px;
  left: 12px;
}

.back .dot2 {
  top: 112px;
  left: 108px;
}

.right .dot1 {
  top: 12px;
  left: 12px;
}

.right .dot2 {
  top: 62px;
  left: 62px;
}

.right .dot3 {
  top: 112px;
  left: 108px;
}

<section class="container">
  <div id="cube" onclick="${e => this._roll()}">
    <div class="front">
      <span class="dot dot1" id="dot"></span>
    </div>
    <div class="back">
      <span class="dot dot1" id="dot"></span>
      <span class="dot dot2" id="dot"></span>
    </div>
    <div class="right">
      <span class="dot dot1" id="dot"></span>
      <span class="dot dot2" id="dot"></span>
      <span class="dot dot3" id="dot"></span>
    </div>
  </div>
</section>

Answer 1

我认为给你一个海峡前瞻性的答案很复杂，因为一开始你会神魂颠倒，没有达到一定程度。

无论如何，我能想到的唯一一件事就是将度数重置为每次点击的基础。然后您可以创建一个包含每个面孔的位置（deg）的const数组，然后将您随机地用作该数组的键。

const arr = {'front' : [1260, 90], 'back' : [1350, 720] ... } ;
var rand = getRandFace();//'front' or 'back' ...;
//then you apply the values from `arr[rand]`.
cube.style.transform = 'rotateX(' + arr[rand][0] + 'deg) rotateY(' + arr[rand][1]+ 'deg)';

在下次单击时，将立方体度放回原位（现在为1），但是您应该在没有动画的情况下进行位置重置。抱歉。但我认为您需要重写它。

您可以通过这种方式来实现它，但是它非常复杂。

如何知道要渲染哪个div以及如何获取div的子元素？

1 个答案: