今天用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()) {//這里可以從后臺請求返回的值，賦值給resultCodesetTimeout(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>

?

總結

以上是生活随笔為你收集整理的js 抽奖转盘实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。