js 抽獎轉盤實現

今天用js實現轉盤抽獎功能，從后台返回的值可以固定轉盤選擇停止的任意位置

實現代碼如下：

js：

<script>
        var auto, count = 0, i = 0;//auto:時間對象 count：計數器 ，i ： 計數器
        var resultCode = "";//后台返回的結果的值
        var arry = [ "1", "2", "3", "4", "5", "6", "7","8"]; //返回值的數組，圖片以數組中的數字命名
        function turn() {
            /// <summary>
            /// 轉盤旋轉
            /// </summary>
            i = (i == arry.length - 1) ? 0 : i + 1;
            $("#imgTurn").attr("src", "/Content/Images/" + arry[i] + ".png");

            //以下調整可以設置轉盤轉速
            if (count < 20) {
                auto = setTimeout(turn, 80);
            } else if (count >= 20 && count < 30) {
                auto = setTimeout(turn, 120);
            } else if (count >= 30 && count < 40) {
                auto = setTimeout(turn, 160);
            } else if (count >= 40 && count < 50) {
                auto = setTimeout(turn, 280);
            } else if (count >= 50 && count < 60) {
                auto = setTimeout(turn, 500);
            }
            else {
                auto = setTimeout(turn, 1000);
            }
            if (arry[i] == resultCode) {
                //當等於后台返回的值的時候停止轉
                count = 0;
                resultCode = 0;
                clearTimeout(auto);

                $("#but_bulliondraw").bind("click", fun);
             
                return;
            }
            count += 1;
        }


        function beginTurn() {
            /// <summary>
            /// 開始旋轉
            /// </summary>
            /// <returns type=""></returns>
            if (count == 0) {
                $("#imgTurn").attr("src", "/Content/Images/" + arry[i] + ".png");
                turn();
                return true;
            } else {
                return false;
            }
        }
        
        $(function () {
            //點擊開始旋轉
            $("#but_bulliondraw").bind("click", fun);
        });
        var fun = function () {
            $("#but_bulliondraw").unbind("click");
            if (beginTurn()) {
                //這里可以從后台請求返回的值，賦值給resultCode
                setTimeout(function () { resultCode = 2 }, 5000);
            }
        };
    </script>

html代碼：

 <div style="margin:0 auto; width:500px;">
      <p>
          <img src="/Content/Images/orderedList0.png" id="imgTurn" />@*默認有一張全部亮的圖片*@
      </p>
        <input type="button" id="but_bulliondraw" value="開始抽獎" />
    </div>