js实现转盘抽奖功能

2022-04-18 09:24:44 来源：易采站长站作者：

本文实例为大家分享了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(){               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)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。