抽獎轉盤的簡單思路

抽獎大概是有個旋轉的轉盤，然後點選開始後，就可以開始轉動轉盤，同時也在跟後端傳送驗證請求，然後得到請求之後，開始不轉動。
首先，這裡有個transform,rotate的知識點，其次，這裡有個transition的知識點，原來設定了transition以後，它css屬性的改變不會立即改變,而是可以控制改變。
還有一個是transitionend事件，用來檢測事件的結束。

這裡我們設定結果為一個按鈕來除錯。比較簡單的版本先是這樣，後期還有調整的思路。

 <style>
        .cont_img{
            transition: transform 1s linear;
            transform-origin: 50% 85%;
        }
    </style>


<div class="rotate_wrap">
    ![](images/img1.png)
    ![](images/img2.png)
</div>
<button id = "btn">start</button>
<button id="result">result</button>

<script>
    var return_info = false;
    var btn= document.querySelector("#btn");
    var cont_img = document.querySelector(".cont_img");
    var result = document.querySelector("#result");
    var count = 1;
    btn.onclick = function(){
        count = 0;
        cont_img.style.transform = "rotate("+360*count+"deg)";
        count++;
         //呼叫ajax
    };
    result.onclick = function(e){
        return_info = true;
    };

    cont_img.addEventListener("transitionend",function(e){
        if(return_info){
            cont_img.style.transition = "transform ease-out";
            cont_img.style.transform = "rotate("+360*count+75+"deg)";
        }else{
            cont_img.style.transform = "rotate("+360*count+"deg)";
            count++;
        }
    });

</script>