抽獎大概是有個旋轉的轉盤，然后點擊開始后，就可以開始轉動轉盤，同時也在跟后端發送驗證請求，然后得到請求之后，開始不轉動。
首先，這里有個transform,rotate的知識點，其次，這里有個transition的知識點，原來設置了transition以后，它css屬性的改變不會立即改變,而是可以控制改變。
還有一個是transitionend事件，用來檢測事件的結束。
這里我們設置結果為一個按鈕來調試。比較簡單的版本先是這樣，后期還有調整的思路。
<style>
.cont_img{
transition: transform 1s linear;
transform-origin: 50% 85%;
}
</style>
<div class="rotate_wrap">
</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>
