转盘抽奖js实现
来源：互联网 发布：多源异构数据融合 编辑：程序博客网 时间：2024/05/16 23:37
效果：点击抽奖按钮，转盘开始旋转数圈后停止
示例：
抽奖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)阅读全文
2 0
- 转盘抽奖js实现
- Cocos2d js 实现转盘抽奖
- Js实现简易大转盘抽奖代码
- 转盘抽奖.JS
- 抽奖大转盘 js
- java实现转盘抽奖；
- SurfaceView 实现 转盘抽奖
- SurfaceView 实现 转盘抽奖
- Android实现抽奖转盘
- 抽奖转盘实现 surfaceView
- COCOS抽奖转盘实现
- JS利用CSS3 transform rotate 实现旋转转盘或背景（大转盘抽奖）
- 利用jqueryRotare实现抽奖转盘
- 利用jqueryRotare实现抽奖转盘
- 借助CCAction实现转盘抽奖
- 利用jqueryRotare实现抽奖转盘
- 利用SurfaceView实现转盘抽奖
- untiy3d实现简单转盘抽奖
- Java设计模式之单例模式
- socket网络编程
- windows 用virtualenv创建不同python版本的虚拟环境
- 单列模式实现
- virt-manager无法启动的问题
- 转盘抽奖js实现
- 一种小封装485芯片
- ContentReslover获取通讯录
- HDU 1689 Just a HooK(线段树+延迟标记)
- AndroidContrentProvider 获取系统联系人数据。
- 442C
- NOIP2016提高组day1
- java方法的调用和数组
- 由字符串生成数组-《数据结构与算法》
