js实现转盘抽奖功能
作者：kirsten_z
这篇文章主要为大家详细介绍了js实现转盘抽奖功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现转盘抽奖功能的具体代码，供大家参考，具体内容如下
效果：点击抽奖按钮，转盘开始旋转数圈后停止
示例：
抽奖html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon-precomposed" href="icon.png" />
<meta http-equiv="Cache-Control" content="max-age=0" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0" />
<meta name="MobileOptimized" content="320" />
<title>抽奖页</title>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="disk.js"></script>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrap_disk">
<div class="page">
<div id="divDisk" class="disk">
<div id="divPointer" class="pointer"></div>
</div>
</div>
</div>
<script type="text/javascript">
disk.init();//抽奖插件初始化
if($(window).height()<568){
$('.wrap_disk').css('height','568px');
}
else{
$('.wrap_disk').css('min-height',$(window).height());
}
</script>
</body>
</html>抽奖实现js
1）原生版
// JavaScript Document
(function(win){
var degDivide = 45;
var prizeName;
var prizeTypeArr = ['一等奖','三等奖','继续加油！','二等奖','参与奖'];
var prizeTypeDegArr = [[300],[180],[240,0],[60],[120]];
var disk = {
prizeType : 0,
nowDeg : 0,
willDeg : 0,
weixinId : null,
contentId : null,
turnFlag : true,
count : null,
init : function(id,contentid,count,flag){
var t = this;
divPointer.onclick = function(){
// t.nowDeg = t.nowDeg%360;
// /*webkit*/
// divPointer.style.webkitTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
// divPointer.style.webkitTransitionDuration = '4s'
// divPointer.style.webkitTransitionProperty = 'width';
// divPointer.style.webkitTransform = 'rotate('+ t.nowDeg +'deg)';
// /*ie*/
// divPointer.style.msTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
// divPointer.style.msTransitionDuration = '4s'
// divPointer.style.msTransitionProperty = 'width';
// divPointer.style.msTransform = 'rotate('+ t.nowDeg +'deg)';
t.lottery();
}
},
lottery: function(){
var t = this;
t.prizeType= t._rand();
t._judge();
},
//获取范围内的随机数
_rand: function (){
var max=4;
var min=0;
return Math.floor(min+Math.random()*(max-min));
},
_judge: function(){
var t = this,
judgeArr = prizeTypeDegArr[t.prizeType],
judgeArrLen = judgeArr.length;
if(judgeArrLen == 1){
t.willDeg = 1080 + judgeArr[0] + 2 + (degDivide-4)*Math.random();
prizeName = prizeTypeArr[t.prizeType];
}else if(judgeArrLen > 1){
var judgeArrRan =Math.floor(judgeArrLen * Math.random());
t.willDeg = 1080 + judgeArr[judgeArrRan] + 2 + (degDivide-4)*Math.random();
prizeName = prizeTypeArr[t.prizeType];
}else{
return;
}
t._turn();
},
_turn : function(){
var t = this;
setTimeout(function(){
divPointer.style.webkitTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
divPointer.style.webkitTransitionDuration = '4s'
divPointer.style.webkitTransitionProperty = 'all';
divPointer.style.webkitTransform = 'rotate('+ t.willDeg +'deg)';
divPointer.style.msTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
divPointer.style.msTransitionDuration = '4s'
divPointer.style.msTransitionProperty = 'all';
divPointer.style.msTransform = 'rotate('+ t.willDeg +'deg)';
//t.nowDeg = t.willDeg;
},100);
setTimeout(function(){
var clss;
clss = "noPreize";
t.myAlert('',prizeName,'ok',function(){
divPointer.style.webkitTransitionProperty = 'width';
divPointer.style.webkitTransform = 'rotate(0deg)';
divPointer.style.msTransitionProperty = 'width';
divPointer.style.msTransform = 'rotate(0deg)';
t.turnFlag = true;
},clss);
},4100)
},
tels : function(){
var t = this;
t.myPrompt('请填写手机号!','','确定','取消',function(){
var telNum = $('.my_prompt_text input').val();
var telephone_regx = /^(((13[0-9]{1})|14[0-9]{1}|15[0-9]{1}|18[0-9]{1})\d{8})$/;
if(telNum == '' || !telephone_regx.exec(telNum)){
t.myAlert('','填写正确手机号','ok',function(){
t.tels();
});
}else{
//Ajax提交手机号码
$.ajax({
type:"POST",
success:function(json){
var data = $.parseJSON(json);
var submitFlag = data.submit;
if(submitFlag == 'succeed'){
t.myAlert('','提交成功！','ok',function(){
$('.my_prompt').hide();
t.turnFlag = true;
});
}else{
t.myAlert('','提交失败！','ok',function(){
t.tels();
});
}
},
error:function(){
t.myAlert('','请检查网络！','ok',function(){
t.tels();
});
},
timeout:'5000',
url:'/weixin/front_index.inc.php?type=turntable&action=submit',
data:{id:t.wenxinId,contentid:t.contentId,telephone:telNum}
})
}
},function(){
t.turnFlag = true;
return;
});
},
getPrize : function(){
var t = this;
$('.getIt').hide();
divPointer.style.webkitTransitionProperty = 'width';
divPointer.style.webkitTransform = 'rotate(0deg)';
divPointer.style.msTransitionProperty = 'width';
divPointer.style.msTransform = 'rotate(0deg)';
t.tels();
},
myAlert : function(title,text,btnText,fn,cls){
$('.my_alert').hide();
$('.my_alert_title').html(title);
$('.my_alert_text').html(text);
if(btnText == '') btnText = 'ok';
$('.my_alert_btn input').val(btnText);
$('.my_alert_btn input').click(function(){
$('.my_alert').hide();
fn();
});
if(cls == '' || cls == undefined){
$('.my_alert').attr('class','my_alert');
}else{
$('.my_alert').attr('class','my_alert ' + cls);
}
$('.my_alert').show();
},
myPrompt : function(title,text,btnTextY,btnTextN,fnY,fnN){
$('.my_prompt').hide();
$('.my_prompt_title').html(title);
//$('.my_prompt_text').html(text);
if(btnTextY == '') btnTextY = 'ok';
if(btnTextN == '') btnTextN = 'no';
$('.my_prompt_btnY').val(btnTextY).click(function(){
$('.my_prompt').hide();
fnY();
});
$('.my_prompt_btnN').val(btnTextN).click(function(){
$('.my_prompt').hide();
fnN();
});
$('.my_prompt').show();
}
}
win.disk = disk;
})(window)2）优化版（实际应用）
// JavaScript Document
(function(win){
var degDivide = 60;//各奖品旋转角度范围60°
var prizeName;//奖品名称
//奖品次序及奖品名称
var prizeTypeArr = ['继续加油！','二等奖','参与奖','三等奖','继续加油！','一等奖'];
//奖品编号
var prizeTypeArrType = [0,1,2,3,4,5];
//奖品范围开始度数
var prizeTypeDegArr = [[0],[60],[120],[180],[240],[300]];
//var prizeTypeDegArr = [[0,240],[60],[120],[180],[300]];
var disk = {//初始化插件参数
prizeType : 0,
nowDeg : 0,
willDeg : 0,
weixinId : null,
contentId : null,
turnFlag : true,
count : null,
init : function(id,contentid,count,flag){
var t = this;
//点击指定原生，触发抽奖方法
divPointer.onclick = function(){
t.lottery();
}
},
//抽奖方法实现
lottery: function(){
var t = this;
var url = '/award/choice-award';
$.post(url, {}, function(msg){
if(msg == 'false'){
alert('未中奖~');
return;
}
//赋值奖品编号
t.prizeType= msg;
t._judge();
});
},
//获取指针旋转角度数
_judge: function(){
var t = this,
judgeArr = prizeTypeDegArr[t.prizeType],
judgeArrLen = judgeArr.length;
if(judgeArrLen == 1){//设置旋转圈数
t.willDeg = 1800 + judgeArr[0] + 2 + (degDivide-4)*Math.random();
prizeName = prizeTypeArr[t.prizeType];
}else if(judgeArrLen > 1){
var judgeArrRan =Math.floor(judgeArrLen * Math.random());
t.willDeg = 1800 + judgeArr[judgeArrRan] + 2 + (degDivide-4)*Math.random();
prizeName = prizeTypeArr[t.prizeType];
}else{
return;
}
t._turn();
},
//实现转盘旋转效果
_turn : function(){
var t = this;
setTimeout(function(){
divPointer.style.webkitTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
divPointer.style.webkitTransitionDuration = '2s'
divPointer.style.webkitTransitionProperty = 'all';
divPointer.style.webkitTransform = 'rotate('+ t.willDeg +'deg)';
divPointer.style.msTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
divPointer.style.msTransitionDuration = '2s'
divPointer.style.msTransitionProperty = 'all';
divPointer.style.msTransform = 'rotate('+ t.willDeg +'deg)';
},100);
//转盘停止后操作
setTimeout(function(){
//未中奖显示
if (t.prizeType == 0 || t.prizeType == 4) {
alert('未中奖~');
return false;
} else {
alert('中奖了~');
}
},2100)
},
}
win.disk = disk;
})(window)以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。