html抽奖盘相邻块颜色不一样,实战实现一个h5转盘抽奖页面，谈谈代码实现，顺便谈一下优化和数据处理...

javascript

前言

这个组件是我写过的关于移动端h5活动转盘抽奖的页面，当时写完以后肯定挺好看、挺炫的，因此就把它单独出来了，之后再写相似的页面，能够参考其中的一些实现原理！css

主要用到的技术

用Math.random()方法实现一个区间的随机数，用于实现每次用户点击抽奖的时候，随机获得转盘须要所转的盘数。代码原理以下：

//获取一个介于某两个数之间的

function getRandomNumber(min,max){

return Math.floor(Math.random() * (max - min)) + min;

};复制代码

在实现转盘的时候，用到了两个随机数，一个较小，一个较大，主要用来分别控制指针和奖品转盘以不一样的速度旋转，用以给用户实现视差！html

转盘旋转以前，用不一样的初始角度表明不一样的不一样的奖品，那么最后转盘要转的角度就是:随机数n 360。好比“xx奖品”的默认角度相对于转盘是45度，抽奖的时候，获得的随机数是2，那么转盘就应该转2 360 + 45 = 765度。这样就能把每次转盘所转的角度跟产品对应起来了！java

动画实现方面主要用到了setTimeout和window.requestAnimationFrame，可是主要在用setTimeout的时候，为了防止动画的抖动，应该保证1s中绘制60帧页面，也就是说，转盘要转3圈，用时3秒的话，那么每调一次setTimeout方法，转盘所转的角度就是：git

var perAngle = 3 * 360 / 3 * 60;//6°复制代码

写完这段代码，是在pc上查看效果的，在手机上产看效果的时候，会出现抽奖页面图片加载慢以及旋转闪烁灯有点卡顿的问题，咱们能够分别采用下面的方法解决：

一、图片加载慢的问题，咱们能够采用一种最原始、最笨、最省钱的方法(其它方法可使用cdn等等，这里不介绍)——预加载解决，方法就是在进入本页面以前，在同一个服务器的其它页面把对应的图片加载一遍，这样当进入到当前的页面，须要加载的图片已经在缓存中了，因此此时再加载这些图片就会快从缓存中直接拿图片，速度就会杠杠的！如(须要在b页面图片1，咱们能够在a页面中先加载一次，记住，a页面和b页面在同一个服务器下)：github

复制代码

二、闪烁灯卡顿的，问题，能够调节响应图片的动画的更新频率解决ajax

另外，为了防止用户屡次点击抽奖，屡次向后台发送数据，对ajax请求进行了必定的处理，固然了，也为了防止连续点击抽奖按钮，屡次动画，也进行了响应的处理，主要思路就是点击抽奖的时候，显示一个遮罩层，这个遮罩层的z-index大于抽奖按钮，这样就阻止了用户再次点击抽奖按钮，最后抽奖成功以后，再把这个遮罩层隐藏。主要原理代码以下：

var isRequesting = false;

function getData(){

//若是当前用户正在进行抽奖，那么就返回

if(isRequesting)return false;

isRequesting = true;

//显示遮罩层

$("._mask").css('display','block');

//其他代码省略

$.ajax({

url:server_api_address,

type:'GET',

success : function(data){

isRequesting = false;

//其他代码省略

//当前转盘动画完成以后

//再隐藏遮罩层

animationComplate(function(){

$("._mask").css('display','none');

});

},

error:function(data){

//代码省略

}

});

};复制代码

须要改进的地方

目前来看，我以为惟一有点欠缺的地方就是：转盘和指针的旋转速度老是匀速的，很难带给用户那种惊心动魄、期待的真实抽奖的感受。因此转盘的速度算法方面应该作一些改进！让抽奖更接近真实感受！算法

固然其它一些地方问题，这里就不注重谈了，由于涉及到具体的先后台对接问题！api