用Javascript实现CSDN签到抽奖功能。。。。

前言

各位看官应该都在CSDN博客上抽过奖，但是我相信80%的人都是一无所获，最近看了些马士兵老师的一些算法视频，于是昨天晚上突发奇想就像做出一个类似博客抽奖的效果，于是我肝到了半夜12点（本宝宝习惯早睡，不太爱熬夜）就有了下面这个Gif图，大体上的交互和CSDN上基本上没有差别，就是UI显示有些随意，下面我就给大家详细说说我的实现思想：

生成奖池

点击生成奖池之后会从我设置的奖池中随机产生7个奖品，然后再给者数组中插入一个谢谢参与，在页面上循环产生出来围绕再开始按钮周围，这里就用到了洗牌算法主要思想如下：其中arr就是我们存放奖品的奖池，洗牌算法的核心就是每一次都会产生一个数组长度内的下标，然后和下标为i的元素进行交换，最后我会截取每次奖池的前7位作为页面展示的奖品循环。这样等于我们显示再页面上的奖品也是从奖池中随机产生的。

for(var i = 0;i<arr.length;i++){
 var index = Math.floor(Math.random() * arr.length)
 var temp = index
 arr[i] = arr[index]
 arr[temp] = arr[i]
 arr[index] = arr[temp]
 brr = arr.splic(0,7)
 return brr
}

改变奖品顺序

点击改变奖池做的操作就是，将用来存储页面展示数据的数组brr进行洗牌，重新展示，改变顺序。实现思路和上面随机产生奖品的逻辑类似

for(var i = 0;i<brr.length;i++){
 var index = Math.floor(Math.random() * brr.length)
 var temp = index
 brr[i] = brr[index]
 brr[temp] = brr[i]
 brr[index] = brr[temp]
 return brr
}

开始抽奖

点击抽奖之后会在页面展示的数组中进行顺时针旋转，点击开始之后会产生一个随机数，这个随机数字主要是用来控制旋转多少圈，接下来给大家介绍一下实现思想。

• 产生一个随机数（控制变化次数）
• 两个变量，一个记录下标，一个记录变化的次数
• 定义一个定时器，根据次数控制，定时器时间间隔达到加速的效果
• 开始之后i++，该表当前色块背景色，其余不变
• 当变化次数达到某个值的时候改变定时器
• 当产生的随机数于记录变化次数的值相同时停止
  下边是核心实现代码

 for (let j = 0; j < arr.length; j++) {
 	blocks[arr[j]].style.background = "white";
 }
 blocks[arr[i]].style.background = "red";
 i++; 
 if (i === arr.length) {
    i = 0;
 }
 count++; 
if (count === 5 || count === 45) {
    clearInterval(stopTimer);
    stopTimer = setInterval(around, 200);
}
if (count === 10 || count === 35) {
     clearInterval(stopTimer);
     stopTimer = setInterval(around, 100);
 }
if (count === 15) {
  clearInterval(stopTimer);
  stopTimer = setInterval(around, 50);
}
if (count === rand) {
  clearInterval(stopTimer);   
}