jquery轉盤五連抽是一種常用的抽獎方式,這種抽獎方式可以使用jquery實現。下面我們來看一下jquery轉盤五連抽的實現思路。
$('btn').on('click', function (){
var random = Math.floor(Math.random()*100); //隨機數
var transfrom = ['rotate(30deg)','rotate(90deg)', 'rotate(150deg)','rotate(210deg)','rotate(270deg)','rotate(330deg)','rotate(390deg)','rotate(450deg)','rotate(510deg)','rotate(570deg)']; //轉盤旋轉角度
var randomNum = 1;
var topResult = $('#topResult');
var resultArr = ['三等獎','四等獎','五等獎','六等獎','七等獎','八等獎','九等獎','十等獎','一等獎','二等獎'];
if(random > 0 && random <= 10){
randomNum = 1;// 一等獎
}
if(random > 10 && random <= 20){
randomNum = 2;// 二等獎
}
if(random > 20 && random <= 30){
randomNum = 3;// 三等獎
}
if(random > 30 && random <= 40){
randomNum = 4;// 四等獎
}
if(random > 40 && random <= 50){
randomNum = 5;// 五等獎
}
if(random > 50 && random <= 60){
randomNum = 6;// 六等獎
}
if(random > 60 && random <= 70){
randomNum = 7;// 七等獎
}
if(random > 70 && random <= 80){
randomNum = 8;// 八等獎
}
if(random > 80 && random <= 90){
randomNum = 9;// 九等獎
}
if(random > 90 && random <= 100){
randomNum = 10;// 十等獎
}
var resultIndex = randomNum - 1;
var result = resultArr[resultIndex];
topResult.html(result);
$('.turntable').css({
"transform": transfrom[randomNum - 1]
});
});
jquery轉盤五連抽的實現思路就是通過隨機數來確定當前轉盤所停留的位置,同時得出抽獎的結果。隨機數的范圍在0~100之間,然后將隨機數根據轉盤的幾個角度進行分組,從而得出停留在哪個位置上,最后根據位置得出抽獎結果。同時將結果通過html()賦值到指定的dom節點上,最后讓轉盤旋轉到指定的角度。通過這種方法實現了jquery轉盤五連抽。