js实现一个抽奖逻辑-前端教程-前军教程网

在日常生活中，我们经常会遇到各种抽奖活动，今天我们来实现一个小小的抽奖逻辑。话不多说，先上效果：

麻雀虽小，五脏俱全。各种细节东西可以自己另做修改。

html页面上，先用ul和li元素排列成一个九宫格。初始化的起点在1上，点击中间的“点击抽奖”，生成一个随机数，外面的方块根据生成的数字进行旋转，直到停留到指定的步数上，然后弹窗提示中奖情况。外面方块的变化是给对应发方块动态添加背景色实现的。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
      #tab{
        width:300px;
        height:300px;
        border:1px solid #ccc;
        margin: 100px auto;
      }
      li{
          list-style: none;
          width: 98px;
          height:98px;
          background-color: aqua;
          text-align: center;
          line-height: 100px;
          float:left;
          border: 1px solid #aaa;
      }
      .activeLi{
        background-color: orange; 
      }
    </style>
</head>
<body>
  <div id="tab">
      <ul>
         <li class="activeLi">1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li onclick="change()">点击抽奖</li>
         <li>6</li>
         <li>7</li>
         <li>8</li>
         <li>9</li>
      </ul>
  </div>
</body>
</html>
<script type="text/javascript">
var num=0;
var timer=null;
var uLi=document.querySelectorAll("li");
var newNum=null;
 function change(){
     newNum=parseInt(Math.random()*(24-17+1)+17); // 生成17-24之间的随机数
     const narr=[0,1,2,5,8,7,6,3];  // 从0开始，九宫格顺时针旋转一圈时对应的li的下标
     const arr=[1,2,5,8,7,6,3,0];   // 从1开始，九宫格顺时针旋转一圈时对应的li的下标
     timer=setInterval(function(){
        var pre=narr[num%8];  // 算出上一步的li下标
        var nest=arr[num%8]; // 算出当前所在的li下标
        uLi[pre].setAttribute("class","");   // 清除上一步的li的样式
        uLi[nest].setAttribute("class","activeLi");   // 添加当前所在li的样式
        num+=1;
        if(num+1===newNum){
          clearInterval(timer); // 步数到了随机数的时候，停止
          setTimeout(function(){
            // 弹窗告诉中奖情况，然后回归初始化样式
            alert(`恭喜中奖${nest+1}`);
            uLi[nest].setAttribute("class",""); 
            uLi[0].setAttribute("class","activeLi"); 
            num=0;
            newNum=null;
          },400)
        }
        },100)
 }

</script>

重点在上面的js中，复制完整代码即可实现上面的图片效果。实现中奖逻辑的方式还有很多，这是其中一种。喜欢的话欢迎收藏！

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

js实现一个抽奖逻辑