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)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js HTML5 Canvas绘制转盘抽奖
本文实例为大家分享了js转盘抽奖的具体代码,供大家参考,具体内容如下 1.实现的基本效果 2.主要的内容 •html5中canvas标签的使用 •jQueryRotate.js旋转插件 3.主要html代码 <body> <div class="content"> <div class="wheel"> <canvas class="item" id="wheelCanvas" wi
-
javascript+HTML5 Canvas绘制转盘抽奖
之前做过的项目中,有需要抽奖转盘功能的.项目已经完工一段时间了,也没出现什么严重的bug,所以现在拎出来分享给大家. 功能需求 1.转盘要美观,转动效果流畅. 2.转盘上需要显示奖品图片,并且奖品是后台读取的照片和名字. 3.转动动画完成后要有相应提示. 4.获取的奖品具体算法在数据库里操作,前端只提供最后的效果展示. 知识要点 1.引用了一个jq插件:awardRotate,用来实现更智能化的转动(插件下载:http://www.jqcool.net/jquery-jqueryrotate.h
-
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
需求: 最多可以抽奖5次,而且,每次只会中"2000元理财金"或者"谢谢参与",其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-content"> <div class="g-lottery-case"> <div class="g-left"> <h2>您已拥有<span class="play
-
js实现大转盘抽奖游戏实例
本文实例讲述了js实现大转盘抽奖游戏.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea
-
Vue.js实现大转盘抽奖总结及实现思路
大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放大转盘动画并给用户弹出中奖提示. 中奖结果弹窗,为抽奖组件服务. 实现步骤如下: 构建api奖品配置信息和抽奖接口,vuex全局存放奖品配置和中奖结果数据信息. api: export default { getPrizeList () { let priz
-
利用Javascript实现简单的转盘抽奖
首先来看看接口说明: var _rotate = new iRotate('#div',{ start : 0, //开始角度,可不写,默认0 end :45, //结束角度 time :5000, //持续时间,可不写,默认1000 easing : 'easeOut', //动画形式,目前只有'linear'和'easeOut'两种,可不写,默认'easeOut' callback : function(){ //回调函数 //this为当前对象 } }); _rotate.stop(fu
-
JS旋转实现转盘抽奖效果
本文实例为大家分享了JS旋转实现转盘抽奖效果的具体代码,供大家参考,具体内容如下 闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域 比如,我选择了"区域2",结果就是这样 具体可以见下面的源码:(注意,这里JQ文档没有贴出来,需要自行引入) HTML文件: <!DOCTYPE html> <html> <head> <meta charset=
-
js实现转盘抽奖功能
本文实例为大家分享了js实现转盘抽奖功能的具体代码,供大家参考,具体内容如下 效果:点击抽奖按钮,转盘开始旋转数圈后停止 示例: 抽奖html代码: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&q
-
jQuery+PHP实现微信转盘抽奖功能的方法
本文实例讲述了jQuery+PHP实现微信转盘抽奖功能的方法.分享给大家供大家参考,具体如下: 本文结合实例将使用jQuery和PHP来实现转盘抽奖程序. 准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div class="demo"> <div id="disk"></div> <div
-
php+lottery.js实现九宫格抽奖功能
php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <script type="text/javascript" src="js/lottery.js"></script> 开始抽奖函数start_lottery() function start_lottery(){ if(flag){ //alert('正在抽奖
-
js实现简单抽奖功能
本文实例为大家分享了js实现简单抽奖功能的具体代码,供大家参考,具体内容如下 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #box{ border: 1px solid aqua; height: 100px; width: 200px; text-align: center; lin
-
jquery转盘抽奖功能实现
一.用到的素材 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery九宫格大转盘抽奖</title> <style> #lottery{width:570px;height:510
-
vue实现简单转盘抽奖功能
本文实例为大家分享了vue实现简单转盘抽奖的具体代码,供大家参考,具体内容如下 样式请大家忽略(自己调),主要看JS代码实现,点击按钮后调用start方法,判断是否在转动状态,如果没转动则调用go方法,go方法主要封装了一次性定时器,是个递归函数,调用go函数后即可实现抽奖转盘的效果了,详细代码如下: 注释清晰哦 <template> <div class="home"> <button @click="start">
-
vue实现大转盘抽奖功能
本文实例为大家分享了vue实现大转盘抽奖的具体代码,供大家参考,具体内容如下 效果图如下 中奖提示 代码如下 <template> <div class="dial" v-wechat-title="$route.meta.title"> <div class="times">抽奖次数{{LuckyClick}}</div> <!-- 转盘包裹 --> <
-
Android自定义View实现QQ运动积分转盘抽奖功能
因为偶尔关注QQ运动, 看到QQ运动的积分抽奖界面比较有意思,所以就尝试用自定义View实现了下,原本想通过开发者选项查看下界面的一些信息,后来发现积分抽奖界面是在WebView中展示的,应该是在H5页面中用js代码实现的,暂时不去管它了. 这里的自定义View针对的是继承自View的情况,你可以将Canvas想象为画板, Paint为画笔,自定义View的过程和在画板上用画笔作画其实类似,想象在画板上作画的过程,你要画一个多大图形(对应View的测量 onMeasure方法),你要画什么样的图
-
使用jQuery Rotare实现微信大转盘抽奖功能
很多公司到了年底都会做一些抽奖活动来刺激.吸引.粘住客户,比如抽奖转盘活动. 前几天用一个jqueryRotate插件实现了转盘的效果.比起那些很炫丽的flash是稍逊点,但也基本实现了需求 效果图: 实现这个其实蛮简单的,转动的效果用的jqueryRotate插件,所以只要判断每个奖荐对应的角度,然后设置指针的转动角度就可以了.比如关键的是jqueryRotate这个插件的用法. jqueryRotate的资料: 支持Internet Explorer 6.0+ .Firefox 2.0 .S
-
jquery实现转盘抽奖功能
实现这个其实蛮简单的,转动的效果用的jqueryRotate插件,所以只要判断每个奖荐对应的角度,然后设置指针的转动角度就可以了.比如关键的是jqueryRotate这个插件的用法. jqueryRotate的资料: 支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现 google code地址:http://code.google.com/p