使图像旋转到随机值加起来的随机值

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

帮助！

来源

2017-04-12 Tomás Miguel

你'VAR度='代码看起来完全正常，什么_exactly_是什么问题？ –

@ChrisG问题是，有时箭头只会旋转一点，只有20度，我不希望发生这种情况。它需要至少完成一个完整的旋转（360度）。 –

@Chris我不知道。但我认为你明白我的意思。 –

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" >

来源

2017-04-13 13:20:34

使图像旋转到随机值加起来的随机值

回答

相关问题