「兔了个兔」——兔年抽大奖

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

开篇

今天是元宵节了，先祝大家元宵佳节，团团圆圆！左右逢"圆"，广进财源！人缘福缘，"圆圆"不断！今天也是幸运抽奖满6000的时候，结果好巧不巧抽到了个口罩，淦，我这一个月的签到矿石就换了个口罩，人都麻了。于是乎，我准备复现一下这个抽奖，放点大奖，安慰一下自己。

首先，依然是放一下效果图。

附上码上掘金的调试源码：

下面开始实现它

思路

先是得把布局给搞出来，一看这些小格子整整齐齐的，九宫格一样，当然得用flex了，顺便在上面加个标题，下面加个中奖栏。样式的话就看自己的个人喜好了，随便改。抽奖逻辑就是，先预先设置一个active类，然后设个定时器，间隔一定时间给格子加上这个属性，并给其他盒子去掉这个属性，最后删除定时器就好了。原理是这样，接下来就是实现了。

实现过程

HTML

这个很简单，就基本布局

<div id="info">V我5块，在线抽奖，童叟无欺</div>
    <div id="award">中奖栏：</div>
    <div class="ul">
      <li class="li1">兔飞猛进</li>
      <li class="li2">前兔似锦</li>
      <li class="li3">大展宏兔</li>
      <li class="li8">兔步青云</li>
      <li id="start">抽奖</li>
      <li class="li4">扬眉兔气</li>
      <li class="li7">兔出贡献</li>
      <li class="li6">谈兔不凡</li>
      <li class="li5">兔谋大业</li>
    </div>

CSS

布局的话也没啥好说的，就是常用的flex布局，相信大家一眼就知道了

.ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 400px;
  height: 380px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);
}

.ul li.active {
  background: rgb(255, 153, 0);
  color: #ffffff;
}

JS

先设置好几个全局变量，然后随机数出来一个移动步数，然后设置定时器递归动画，当超过步数的时候暂停并清除定时器重置全局变量，把该li里得内容放到中奖栏里面。

let rollTime; 
let time = 0; 
let speed = 300; 
let times; 
let num = 0;

$("#start").on("click", function () {
  $("#award").text("中奖栏："); 
  times = parseInt(Math.random() * (20 - 30 + 1) + 20, 10); 
  rolling();
});

function rolling() {
  time++; 
  num++;
  num > 8? num = 1: num;
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); 
  }, speed);
  $('.li' + num).addClass('active').siblings().removeClass('active')
  if (time > times) {
    clearInterval(rollTime);
    $('#award').text('中奖栏：祝您' + $('.li' + num).text() + '~')
    num = 0;
    time = 0;
    return;
  }
}

到此，兔年抽大奖就基本完成了。

我也同步在码上掘金上发布了这个代码，喜欢的话可以去看看。code.juejin.cn/pen/7196506…

最后，一个小请求，麻烦各位看官动动手指点个赞吧！！！