Question

我试图在单击按钮时使轮盘旋转，但是我似乎无法将从js文件生成的随机数传递给CSS

JS

function roulette_spin(btn){
var rand = Math.floor(Math.random() * 720) + 540;

$('.roulette_wheel').css('transform','rotate('+rand+'deg)');
}

HTML

<body>
<div class="roulette_wheel" style="z-index: 0;">
    <img src="ayy.jpg" width="500px" height="500px" />
    <button value="spin" onclick="roulette_spin(this)">SPIN</button>
</div>

Answer 1

这是一个有效的示例，对您的代码进行了一些更新。

就像@ H.Figueiredo建议的那样，我已将旋转选择器更改为img，以避免旋转按钮。

HTML

<div class="roulette_wheel" style="z-index: 0;">
    <img src="https://picsum.photos/200/300" width="500px" height="500px" />
    <button class="spin" value="spin">SPIN</button>
</div>

CSS

function roulette_spin(btn){    
    var rand = Math.floor(Math.random() * 720) + 540;

    $('.roulette_wheel img').css('transform','rotate('+rand+'deg)');
}


$('.spin').click(function(){
    roulette_spin($(this).siblings('img'));
});

See this fiddle

Answer 2

尝试一下：

<html>
<body>
<div class="roulette_wheel" style="z-index: 0;">
    <img src="ayy.jpg" width="500px" height="500px" />
    <button value="spin" onclick="roulette_spin()">SPIN</button>
</div>

<script>
    function roulette_spin(){
        var rand = Math.floor(Math.random() * 720) + 540;
        document.querySelector('.roulette_wheel').style.transform = 'rotate('+rand+'deg)';
    }
</script>

</body>
</html>

Answer 3

我会说roulette_wheel类没有分配给适当的元素，即图像。除了设置旋转变换，不会使车轮旋转，而只会改变其旋转角度一次（这里没有任何过渡）。

下面您将找到一个在动画过程中分配变换样式的可行示例。

JQuery调用已被普通选择器（getElementsByClassName，getElementById）和style对象操作代替，而不是JQuery的run sql select E.userid from enduser E where E.pkid = '5a71fc04-d348-8115-9ff9-ea78f38b06fc'方法。

另外，请查看requestAnimationFrame

的文档

（好的，我在这里有点无聊：））

css

var force = 0;
var angle = 0;
var inertia = 0.985;
var minForce = 15;
var randForce = 15;
var rouletteElem = document.getElementsByClassName('roulette_wheel')[0];
var scoreElem = document.getElementById('score');

var values = [
  0,27,10,25,29,12,8,19,31,18,6,21,33,16,4,
  23,35,14,2,0,28,9,26,30,11,7,20,32,17,5,
  22,34,15,3,24,36,16,1
].reverse();

function roulette_spin(btn){
  // set initial force randomly
  force = Math.floor(Math.random() * randForce) + minForce;
  requestAnimationFrame(doAnimation);
}

function doAnimation() {
  // new angle is previous angle + force modulo 360 (so that it stays between 0 and 360)
  angle = (angle + force) % 360;
  // decay force according to inertia parameter
  force *= inertia;
  rouletteElem.style.transform = 'rotate('+angle+'deg)';
  // stop animation if force is too low
  if (force < 0.05) {
    // score roughly estimated
    scoreElem.innerHTML = values[Math.floor(((angle / 360) * values.length) - 0.5)];
    return;
  }
  requestAnimationFrame(doAnimation);
}

使用CSS和jQuery使图像旋转

3 个答案: