抽獎(jiǎng)活動(dòng)一直是企業(yè)舉辦的一種促銷方式，而現(xiàn)在很多企業(yè)都在使用jquery轉(zhuǎn)盤抽獎(jiǎng)活動(dòng)代碼來增強(qiáng)用戶的參與感。下面我們來看一下如何使用jquery轉(zhuǎn)盤抽獎(jiǎng)活動(dòng)代碼。

//html代碼
<div id="container">
<canvas id="canvas" width="300" height="300"></canvas>
<img id="start" src="start.png" width="100" height="100">
</div>
//CSS代碼
#canvas{
background-color:#F9ECDF;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}
#container{
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
}
#start{
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
cursor:pointer;
}
//JS代碼
$(document).ready(function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var num = 8; //獎(jiǎng)項(xiàng)個(gè)數(shù)
var rotateAngle = 360/num; //每個(gè)獎(jiǎng)項(xiàng)旋轉(zhuǎn)的角度
for(var i = 0 ; i < num ; i++){
context.beginPath();
context.moveTo(150,150);
context.arc(150,150,100,i*rotateAngle*(Math.PI/180),(i+1)*rotateAngle*(Math.PI/180));
context.fillStyle = "#ffc843";
context.fill();
context.strokeStyle = "#ffffff";
context.stroke();
context.closePath();
}
$("#start").click(function(){
var randomNum = Math.floor(Math.random()*num+1); //隨機(jī)獎(jiǎng)項(xiàng)
var angle = randomNum * rotateAngle; //中獎(jiǎng)獎(jiǎng)項(xiàng)旋轉(zhuǎn)的角度
$("#canvas").rotate({
angle:0,
animateTo:angle+1440, //多旋轉(zhuǎn)幾圈的動(dòng)畫效果
easing: $.easing.easeInOutExpo,
duration:5000,
callback:function(){
alert("恭喜您獲得了"+randomNum+"等獎(jiǎng)！");
}
});
});
})

在上面的代碼中，我們首先定義了一個(gè)8個(gè)獎(jiǎng)項(xiàng)的轉(zhuǎn)盤，然后通過點(diǎn)擊按鈕使得轉(zhuǎn)盤隨機(jī)旋轉(zhuǎn)，最后通過回調(diào)函數(shù)來彈出中獎(jiǎng)提示。所以如果您要舉辦抽獎(jiǎng)活動(dòng)，不妨使用這樣簡(jiǎn)單易操作的jquery轉(zhuǎn)盤抽獎(jiǎng)活動(dòng)代碼來增加用戶的參與感。