HTML 5抽選ダイヤル-CSS 3超単純バージョン

コア構想
CSS 3の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最新のウェブフロントエンド資料を用意しています.下のリンクをクリックして取得する必要があります.
勉強の先端で、あなたはこれらをマスターします.二線でも簡単に8 K以上持つことができます