使用 jquery 动画控制头奖 html 旋转

Question

我正在使用以下代码来匹配用户旋转。它正在工作，但我的问题是当 winner 匹配一个数字时，在为获胜的圆圈添加样式之前，自旋旋转仍然在特定的圆圈中结束。

我的问题是，有什么方法可以让自旋的旋转速度变慢，落在winner上，这样它停止后就不用再跳到中奖的数字了？我希望它仍然旋转直到它落在数字上。

$(function() {

  var current = 1;
  var num = 0;
  var max = $('.jackpot').length + 1;
  var rotate = 5;
  var speed = 80;

  function change() {
    var winner = Math.floor((Math.random() * 12) + 1);
    $('.jack-' + current).toggleClass("active-spin spin-default");
    current++;
    if (current == max) {
      current = 1;
      num++;
    }
    if (num == 3) {
      speed = 160;
    }

    if (num != rotate) {
      setTimeout(function() {
        change()
      }, speed);
    } else {
      $('.jackpot').removeClass("active-spin").addClass("spin-default");
      $('.jack-' + winner).addClass("iswin");
      current = winner;
      num = 0;
    }
  }

  $('.play').click(function(event) {
    $('.jackpot').removeClass("iswin").addClass('spin-default');
    setTimeout(function() {
      change()
    }, speed);
  });
});

.jackpot {
  display: inline-block;
  padding: 10px;
  margin: 10px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: 0.5s;
}

.spin-default {
  border: 1px solid orange;
  background-color: #eee;
}

.jackpot.active-spin {
  border: 1px solid blue;
  background-color: red;
}

.jackpot.iswin {
  border: 1px solid yellow;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <table>
    <tr>
      <td>
        <div class="jackpot spin-default jack-1">JK</div>
      </td>
      <td>
        <div class="jackpot spin-default jack-2">TR</div>
      </td>
      <td>
        <div class="jackpot spin-default jack-3">JK</div>
      </td>
      <td>
        <div class="jackpot spin-default jack-4">IC</div>
      </td>
      <td>
        <div class="jackpot spin-default jack-5">JK</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="jackpot spin-default jack-12">TR</div>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <div class="jackpot spin-default jack-6">JK</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="jackpot spin-default jack-11">TR</div>
      </td>
      <td>
        <div class="jackpot spin-default jack-10">JK</div>
      </td>
      <td>
        <div class="jackpot spin-default jack-9">IC</div>
      </td>
      <td>
        <div class="jackpot spin-default jack-8">JK</div>
      </td>
      <td>
        <div class="jackpot spin-default jack-7">IC</div>
      </td>
    </tr>
  </table>

</div>
<button class="play">PLay</button>

Answer 1

试试这个 :) lastRound() 是您想要的功能。 findWinner() 是您的代码，就在程序的另一部分。

$(function() {

  var current = 1;
  var num = 0;
  var max = $('.jackpot').length + 1;
  var rotate = 5;
  var speed = 80;
  var winner = 0;

  function change() {
    winner = Math.floor((Math.random() * 12) + 1);
    $('.jack-' + current).toggleClass("active-spin spin-default");
    current++;
    if (current == max) {
      current = 1;
      num++;
    }
    if (num == 3) {
      speed = 160;
    }

    if (num != rotate) {
      setTimeout(function() {
        change()
      }, speed);
    } else {
      current = 1;
     lastRound();
    }
  }

  function lastRound(){

     setTimeout(function() {
       $('.jack-' + current).toggleClass("active-spin spin-default");
       if (current == winner){
         findWinner();
       }else{
         current++;
         lastRound();
       }
      }, speed + current * 20);
    }


     function findWinner(){
     $('.jackpot').removeClass("active-spin").addClass("spin-default");
      $('.jack-' + winner).addClass("iswin");
      current = winner;
      num = 0;
  }

  $('.play').click(function(event) {
    $('.jackpot').removeClass("iswin").addClass('spin-default');
    setTimeout(function() {
      change()
    }, speed);
  });
});

使用 jquery 动画控制头奖 html 旋转

Using jquery animation to control jackpot html spin

html

javascript

css

jquery

jquery-animate