使旋转为随机值的图像将随机值相加

时间:2017-04-12 11:07:51

标签: javascript html css animation random

我有一个幸运轮,旋转箭头随意旋转。问题是,有时箭头在点击时几乎没有旋转,因为(例如)如果第一次点击给出数字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>

帮助!

1 个答案:

答案 0 :(得分:0)

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;
}
<img id="wheel" class="placeholder" >