HTML5抽獎轉盤-CSS3超簡單版本

核心思路

採用CSS3的transition（過渡效果），給定需要旋轉的元素設置transform的rotate屬性的結束角度，同時添加transition-timing-function來控制旋轉的速率包括起始速率和結束速率，代碼如下（瀏覽器首碼可自行添加）：

 #pointer {
   transition: transform 6.5s;
   transition-timing-function: ease-in-out;
 }

這樣，給定結束角度後，元素就會旋轉，結束角度可以自由控制旋轉的圈數，例如結束角度為angelEnd，即圈數m=angelEnd/360 並取整，前幾圈轉滿360無需特殊處理，關鍵是最後一圈的角度決定了抽獎的結果，代碼如下：

let base = 2160; //先轉滿360×6圈
     let result = getRandom(-30,330); // 最後一圈角度，獲取-30到330的隨機數
     let angelEnd = -(base+result)// 結束角度數，負數代表逆時針旋轉
     $("#pointer").css({"transform":"rotate("+angelEnd+"deg)"});// 設置CSS

判斷抽獎結果

通過監聽旋轉元素的transitionend獲得動畫結束的事件，在此回調中，可以判斷抽獎結果，同時結合獎品數據及獎品的角度區間來計算，代碼如下：

     gifts = {
       "1":{
           angleStart : -30,
           angleEnd : 30,
           tips : "恭喜您獲得理財金2000元~~"
       },
       "2":{
           angleStart : 31,
           angleEnd : 90,
           tips : "恭喜您獲得理財金1000元~~"
       },
       "3":{
           angleStart : 91,
           angleEnd : 150,
           tips : "很遺憾沒有能中獎，再試一次吧~"
       },
       "4":{
           angleStart : 151,
           angleEnd : 210,
           tips : "恭喜您抽中京東E卡一張~"
       },
       "5":{
           angleStart : 211,
           angleEnd : 270,
           tips : "恭喜您獲得理財金5200元~~"
       },
       "6":{
           angleStart : 271,
           angleEnd : 330,
           tips : "很遺憾沒有能中獎，再試一次吧~"
       }
       
     $("#pointer").on('transitionend',function(){
         for (var key in gifts) {
           // 最後一圈的角度落在哪個獎品區間
           if (options.gifts[key].angleStart <= result && result<=options.gifts[key].angleEnd) {
             // 得到獎品的key值
             alert(options.gifts[key].tips);
           }
         }
     })

設定指定獎品

每個抽獎程式都可能預留內部介面，轉盤也不例外，通過設置最後一圈的角度數即可提前設置獎品結果，代碼如下：

 let _key = null; // 內定獎品id
 ​
 if (_key) {
   result = getRandom(gifts[_key].angleStart,gifts[_key].angleEnd)
 }

總結

對了，小編為大家準備了一套2020最新的web前端資料，需要點擊下方鏈接獲取方式

學習前端，你掌握這些。二線也能輕鬆拿8K以上