使旋转到随机值的图像将随机值相加答案

【问题标题】：Make an image that spins to a random value add up the random values使旋转到随机值的图像将随机值相加
【发布时间】：2017-04-12 11:07:51
【问题描述】：

我有一个幸运轮，带有一个随机旋转的旋转箭头。问题是有时点击时箭头几乎不旋转，因为（例如）如果第一次点击给出数字 400，箭头实际上会旋转 400 度，但如果第二次点击给出 380，箭头只会返回 20 度，这意味着它几乎不会移动。所以我想我需要一种方法来使各种点击加起来（第一次点击 - 随机数；第二次点击 - 第一次点击结果 + 随机数等等）。

我的代码如下：

CSS

    img {
    transition: transform 2s ease-out;
}

HTML

<div>
    <img src="34-200.png" />
</div>

JavaScript

<script>
    var img = document.querySelector('img');
img.addEventListener('click', onClick, false);


function onClick() {
    this.removeAttribute('style');

    var deg = 500 + Math.round(Math.random() * 4000);

    var css = 'transform: rotate(' + deg + 'deg);';

    this.setAttribute(
        'style', css
    );
}

</script>

救命！

【问题讨论】：

您的var deg = 代码看起来非常好，究竟是什么问题？
@ChrisG 问题是有时箭头只旋转一点，比如只有 20 度，我不希望这种情况发生。它需要至少旋转一整圈（360 度）。
@Chris 我不知道。但我想你明白我的意思。
@Chris 你是对的，谢谢。已编辑
我相信@Chris 是不正确的。这里最大的问题是，虽然将<img> 设置为rotate(500) 确实会导致大约一个半旋转，但将其设置为rotate(480) next 将使<img> 向后旋转20 度。

标签： javascript html css animation random

【解决方案1】：

var angle = 0;

var blocked = false;

var wheel = document.querySelector('#wheel');
wheel.addEventListener('click', () => {
  if (blocked) return;

  var deg = 720 + Math.round(Math.random() * 2000);
  angle += deg;

  wheel.style.transform = "rotate(" + angle + "deg)";
  blocked = true;
  setTimeout(function() {
    blocked = false;
  }, 2100);
}, false);

.placeholder {
  display: block;
  width: 200px;
  height: 200px;
  background-color: red;
}

img {
  transition: transform 2s ease-out;
}

&lt;img id="wheel" class="placeholder" &gt;

【讨论】：