實戰實現一個h5轉盤抽獎頁面，談談代碼實現，順便談一下優化和數據處理

時間 2019-11-17

標籤實戰實現一個 h5 轉盤抽獎頁面談談代碼順便一下優化數據處理欄目大數據简体版

原文原文鏈接

前言

這個組件是我寫過的關於移動端h5活動轉盤抽獎的頁面，當時寫完以後肯定挺好看、挺炫的，因此就把它單獨出來了，之後再寫相似的頁面，能夠參考其中的一些實現原理！css

主要用到的技術

用Math.random()方法實現一個區間的隨機數，用於實現每次用戶點擊抽獎的時候，隨機獲得轉盤須要所轉的盤數。代碼原理以下：

//獲取一個介於某兩個數之間的
    function getRandomNumber(min,max){
        return Math.floor(Math.random() * (max - min)) + min;
    };複製代碼

在實現轉盤的時候，用到了兩個隨機數，一個較小，一個較大，主要用來分別控制指針和獎品轉盤以不一樣的速度旋轉，用以給用戶實現視差！html
轉盤旋轉以前，用不一樣的初始角度表明不一樣的不一樣的獎品，那麼最後轉盤要轉的角度就是:隨機數n 360。好比「xx獎品」的默認角度相對於轉盤是45度，抽獎的時候，獲得的隨機數是2，那麼轉盤就應該轉2 360 + 45 = 765度。這樣就能把每次轉盤所轉的角度跟產品對應起來了！java
動畫實現方面主要用到了setTimeout和window.requestAnimationFrame，可是主要在用setTimeout的時候，爲了防止動畫的抖動，應該保證1s中繪製60幀頁面，也就是說，轉盤要轉3圈，用時3秒的話，那麼每調一次setTimeout方法，轉盤所轉的角度就是：git

var perAngle = 3 * 360 / 3 * 60;//6°複製代碼

寫完這段代碼，是在pc上查看效果的，在手機上產看效果的時候，會出現抽獎頁面圖片加載慢以及旋轉閃爍燈有點卡頓的問題，咱們能夠分別採用下面的方法解決：

一、圖片加載慢的問題，咱們能夠採用一種最原始、最笨、最省錢的方法（其它方法可使用cdn等等，這裏不介紹）——預加載解決，方法就是在進入本頁面以前，在同一個服務器的其它頁面把對應的圖片加載一遍，這樣當進入到當前的頁面，須要加載的圖片已經在緩存中了，因此此時再加載這些圖片就會快從緩存中直接拿圖片，速度就會槓槓的！如（須要在b頁面圖片1，咱們能夠在a頁面中先加載一次，記住，a頁面和b頁面在同一個服務器下）：github

<!--a頁面-->
    <div>
        <img src="圖片1" />
    </div>


    <!--b頁面-->
    <!--此時加載圖片固然就是從緩存中拿到的圖片-->
    <div>
        <img src="圖片1" />
    </div>複製代碼

二、閃爍燈卡頓的，問題，能夠調節響應圖片的動畫的更新頻率解決ajax

另外，爲了防止用戶屢次點擊抽獎，屢次向後臺發送數據，對ajax請求進行了必定的處理，固然了，也爲了防止連續點擊抽獎按鈕，屢次動畫，也進行了響應的處理，主要思路就是點擊抽獎的時候，顯示一個遮罩層，這個遮罩層的z-index大於抽獎按鈕，這樣就阻止了用戶再次點擊抽獎按鈕，最後抽獎成功以後，再把這個遮罩層隱藏。主要原理代碼以下：

var isRequesting = false;
    function getData(){
        //若是當前用戶正在進行抽獎，那麼就返回
        if(isRequesting)return false;
        isRequesting = true;
        //顯示遮罩層
        $("._mask").css('display','block');
        //其他代碼省略
        $.ajax({
            url:server_api_address,
            type:'GET',
            success : function(data){
                isRequesting = false;
                //其他代碼省略


                //當前轉盤動畫完成以後
                //再隱藏遮罩層
                animationComplate(function(){
                    $("._mask").css('display','none');
                });
            },
            error:function(data){
                //代碼省略
            }
        });
    };複製代碼