js小案例-九宫格抽奖

目录

一、案例介绍

二、效果展示

三、代码展示

四、源码下载地址

---

一、案例介绍

案例主要通过设置定时器setInterval和改变className值实现转动，设置延时器setTimeout清除定时器实现抽中。

二、效果展示

三、代码展示

HTML

      

        

        

        

        

        

        

        

        

        

      
      

        
奖品记录
        

      

CSS

  .container {
    width: 390px;
    margin: 0 auto;
    padding: 10px;
    background-color: red;
  }
  ul {
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
  }
  li {
    width: 120px;
    height: 120px;
    margin: 5px;
    position: relative;
    border-radius: 5px;
    list-style: none;
    background-size: cover;
    background-repeat: no-repeat;
  }
  li:nth-of-type(1) {
    background-image: url("../image/iphoneX.jpg");
  }
  li:nth-of-type(2) {
    background-image: url("../image/再来一次.jpg");
  }
  li:nth-of-type(3) {
    background-image: url("../image/vip.jpg");
  }
  li:nth-of-type(4) {
    background-image: url("../image/券.jpg");
  }
  li:nth-of-type(6) {
    background-image: url("../image/u盘.jpg");
  }
  li:nth-of-type(7) {
    background-image: url("../image/啤酒.jpg");
  }
  li:nth-of-type(8) {
    background-image: url("../image/谢谢参与.jpg");
  }
  li:nth-of-type(9) {
    background-image: url("../image/ps4.jpg");
  }
  #startBtn {
    width: 100%;
    height: 100%;
    background-color: white;
    border: 0px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../image/抽奖.jpg");
  }
  .active::after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    z-index: 1;
    opacity: 0.5;
    background-color: yellow;
  }
  #record {
    background-color: #fff;
    border-radius: 5px;
    height: 50px;
    overflow-y: scroll;
    padding-left: 10px;
  }

JS

//获取抽奖按钮
  let startBtn = document.getElementById("startBtn");
  //获取奖品项目的集合
  let items = document.getElementsByClassName("item");
  //获取奖品记录值
  let record = document.getElementById('record');
  //设置奖品滚动的顺序，即控制奖品转动的方向
  let directionArr = [0, 1, 2, 4, 7, 6, 5, 3];
  //抽奖的开关
  let flag = true;
  //抽到的奖品的数组下标
  let awardIndex = 0;
  //定义定时器标识符
  let timer = null;

  //1.点击抽奖按钮
  startBtn.onclick = () => {
    //2.当抽奖开关为true时，可以点击抽奖
    if (flag) {
      //当抽奖开关为false时，处于抽奖状态中
      flag = false;
      //更换抽奖的状态-禁止点击抽奖
      startBtn.disabled = true;
      //3.定义定时器，转动奖品
      timer = setInterval(() => {
        //未转到的奖品的样式
        items[directionArr[awardIndex]].className = "item";
        //对奖品下标进行自增，实现奖品连在一起转动
        awardIndex++;
        //当奖品的下标超过数组下标时，赋值为0重新开始转圈
        if (awardIndex >= 8) {
          awardIndex = 0;
        }
        //转到的奖品的样式
        items[directionArr[awardIndex]].className += " active";
      }, 100);
    }
    //4.定义一个延时器，到时间则停止转动
    setTimeout(() => {
      //5.清理定时器，停止转动
      clearInterval(timer);
      //解除按钮的禁止状态
      startBtn.disabled = false;
      //开关值赋值为true
      flag = true;
      //定义奖品字符串
      let award = "";
      //6.获取抽奖的奖品下标来判断获取的奖品
      switch (directionArr[awardIndex]) {
          case 0: award = 'iphoneX'
          break;
          case 1: award = '再来一次'
          break;
          case 2: award = '百度网盘VIP'
          break;
          case 3: award = '牛排券'
          break;
          case 4: award = '纪念U盘'
          break;
          case 5: award = '瓶酒一扎'
          break;
          case 6: award = '谢谢参与'
          break;
          case 7: award = 'PS4 pro'
          break;
      }
      //7.对抽中的奖品进行记录
      record.innerHTML += "你抽到了" + award + '
'
    }, Math.round(Math.random() * 3000) + 1000);
  };

四、源码下载地址

GitHub - Thomas9857/Nine-Palace-Lucky-DrawContribute to Thomas9857/Nine-Palace-Lucky-Draw development by creating an account on GitHub.https://github.com/Thomas9857/Nine-Palace-Lucky-Draw