您如何使用 javascript 读取 div 的旋转？

Question

我有一个纺车，我需要读取它的旋转。它旋转并停止，然后我需要读取旋转以了解分配给它的点数。 (the wheel with point values on it)。我该怎么做？我认为它会是 document.querySelector(".container").style.transform.rotate 但它是 returns NaN.

这是我用来旋转轮子的代码。

var spinInterval = 0;
function timeSpin() {
  var loop = setInterval(function () {
    let spin = Math.round(Math.random() * 100);
    spinInterval += spin;
    let rotate = `rotate(${spinInterval}deg)`;
    document.querySelector(".container").style.transform = rotate;
    // console.log(rotate);
    rotation = spinInterval;
  }, 100);

  setTimeout(function () {
    clearInterval(loop);
  }, 5000);
}

Answer 1

使用 CSS Typed Object Model API（仍然是草稿）这可能会变得更容易，但同时您需要查看 style.transform 并手动解析它。如果你知道这只是上面的旋转，你可以使用以下内容：

parseFloat(/rotate\(([0-9.]+)deg\)/.match(document.querySelector(".container").style.transform)[1])

Answer 2

您可以简单地在外部 setTimeout 的回调中访问最终轮换。

setTimeout(function () {
  clearInterval(loop);
  // inline style.transform
  console.log(document.querySelector(".container").style.transform);
}, 5000);

// rotate(2279deg)

或者您可以使用 window.getComputedStyle() 到 return 完整的计算变换矩阵。你需要从那里解析它。

setTimeout(function () {
  clearInterval(loop);
  // full computed transform matrix
  const rotation = window.getComputedStyle(document.querySelector(".container")).getPropertyValue('transform');
  console.log(rotation);
}, 5000);

// matrix(-0.7880107536067242, -0.6156614753256553, 0.6156614753256553, -0.7880107536067242, 0, 0)

CSS-技巧的数学总结：Get Value of CSS Rotation through JavaScript or in this answer: How to get CSS transform rotation value in degrees with JavaScript

var spinInterval = 0;
function timeSpin() {
  var loop = setInterval(function () {
    let spin = Math.round(Math.random() * 100);
    spinInterval += spin;
    let rotate = `rotate(${spinInterval}deg)`;
    document.querySelector(".container").style.transform = rotate;
    // console.log(rotate);
    rotation = spinInterval;
  }, 100);

  setTimeout(function () {
    clearInterval(loop);
    console.clear();
    // inline style.transform
    console.log(document.querySelector(".container").style.transform);

    // full computed transform matrix
    const rotation= window.getComputedStyle(document.querySelector(".container")).getPropertyValue('transform');
    console.log(rotation);
  }, 5000);
}

document.querySelector('button').addEventListener('click', timeSpin);

.container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border-right: 8px solid yellow;
  border-left: 8px solid lightgray;
  border-top: 8px solid aqua;
  border-bottom: 8px solid pink;
 }

<div class='container'></div>
<button type='button' >Spin</button>

您如何使用 javascript 读取 div 的旋转？

How do you read the rotation of a div using javascript?

javascript

css

transform