我有一个幸运轮,带有随机旋转的旋转箭头。问题是有时箭头在点击时几乎没有旋转,因为(例如)如果第一次点击给出数字 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 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" >
关于javascript - 制作一个旋转到随机值的图像,将随机值相加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43367871/