今天我們要介紹的是javascript的9宮格抽獎，它在活動中的應用非常廣泛，適用于各種營銷、互動、游戲等等場景。很多人都很喜歡抽獎，因為它能夠提供一種刺激、獎勵的感覺，而且有一些獎品是非常吸引人的，例如，打折優惠券、限量商品、現金紅包、海量積分等等。
那么，如何實現一個簡單的9宮格抽獎呢？其實非常簡單，只需要掌握一些基本的javascript知識即可。下面就讓我們來看看代碼吧。
<style>
#lottery {
width: 300px;
height: 300px;
margin: 0 auto;
position: relative;
background: url("images/bg.jpg") no-repeat center center;
}
#lottery img {
position: absolute;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top: -75px;
}
#lottery .start {
display: block;
width: 120px;
height: 40px;
background: url("images/start.png") no-repeat center center;
text-align: center;
line-height: 40px;
position: absolute;
left: 50%;
top: 80%;
margin-left: -60px;
color: #fff;
font-weight: bold;
font-size: 16px;
text-decoration: none;
cursor: pointer;
}
</style>
<div id="lottery">
<img src="images/light.png">
<a href="#" class="start">開始抽獎</a>
</div>
<script>
var prize = [
{"id": "item1", "name": "一等獎", "angle": 0},
{"id": "item2", "name": "二等獎", "angle": 45},
{"id": "item3", "name": "三等獎", "angle": 90},
{"id": "item4", "name": "四等獎", "angle": 135},
{"id": "item5", "name": "五等獎", "angle": 180},
{"id": "item6", "name": "六等獎", "angle": 225},
{"id": "item7", "name": "七等獎", "angle": 270},
{"id": "item8", "name": "八等獎", "angle": 315}
];
function luckDraw() {
var num = Math.floor(Math.random() * 8);
var deg = prize[num].angle + (360 * 5);
$("#lottery").stopRotate();
$("#lottery").rotate({
angle: 0,
animateTo: deg,
duration: 5000,
callback: function() {
alert(prize[num].name);
}
});
}
$(function() {
$(".start").click(function() {
luckDraw();
});
});
</script>上述代碼實現了一個非常簡單、易懂的9宮格抽獎，你只需要準備好獎品列表，定義好每個獎品所對應的角度，然后隨機生成一個數字，找到對應的獎品，讓轉盤轉到相應的角度就可以了。這里我們使用了jquery插件rotate，這個插件提供了非常豐富的動畫效果，可以讓轉盤轉動的非常流暢、自然。
當用戶點擊“開始抽獎”按鈕時，我們會調用函數luckDraw，這個函數中會隨機生成一個數字，找到對應的獎品，然后通過jquery的animateTo動畫效果，讓轉盤旋轉到相應的角度。當動畫結束后，我們會彈出一個alert框，告訴用戶抽中了哪個獎品。
體驗一把，趕快點擊“開始抽獎”按鈕，看看你有沒有運氣哦！
