九宫格抽奖vue+html+css，看了就会~~~

实现效果为下面图片样子

lAHPD4d8p5ws18jNBobNAu4_750_1670.gif
因为代码太多，所以只说九宫格以及跑马灯的内容实现
整体的思路是，后台返回我们奖品的数组，数组中主要包括每个奖品的信息，其中有index,我们通过这个index我们来判断后台返回抽中的奖品与奖品列表对应上，然后通过一个current来和index对应，来显示抽中的是哪一个，通过speed来控制抽时转圈的速度。
首先说html代码结构，我们直接上代码

<!--
 * @Description:
 * @Author: @[lina]
 * @Date: 2020-07-17 13:53:06
 * @LastEditors: @[lina]
 * @LastEditTime: 2020-07-21 16:33:17
-->
     <div class="draw_box">
      <!--drawPrizes是奖品数组，其中包含奖品下标、名称等信息-->
        <div class="item" v-for="(draw,index) in drawPrizes" :class="['item'+index,{'active':index === current}]" :key="draw.prizeIndex">
          <div class="img" v-if="draw.prizeImgUrl"><img :src="draw.prizeImgUrl"></div>
          <div class="name">{{draw.title}}</div>
        </div>
        <div class="start" :class="{'active' : !isActive}" @click="start">
          <div class="start_btn">立即抽奖</div>
          <div class="start_num">今日剩余0次</div>
        </div>
      </div>

然后我们说这个css跑马灯的效果，这个图片需要注意，一定要是两种灯状态的两张图片

<!--
 * @Description:
 * @Author: @[lina]
 * @Date: 2020-07-17 13:53:06
 * @LastEditors: @[lina]
 * @LastEditTime: 2020-07-21 16:33:17
-->
 .draw_box{
        position relative
        width 656px
        height 668px
        background-repeat no-repeat
        background-size 100% 100%
        animation changeBg .5s ease infinite
  }
  @keyframes changeBg{
        0%{background-image:url(../../assets/img/draw/sk1.png)}
        100%{background-image:url(../../assets/img/draw/sk2.png)}
      }

九宫格的布局就非常的简单了，通过postion:absolute和left、top去改变

中间开始按钮的不同状态（抽奖机会、无抽奖机会）
.start{
          position absolute
          width 184px
          height 188px
          background-image url('../../assets/img/draw/picked.png')
          background-repeat no-repeat
          background-position center center
          background-size cover
          display flex
          flex-direction column
          align-items center
          justify-content flex-end
          &.active{
            background-image url('../../assets/img/draw/disable_picked.png')
            .start_btn,.start_num{
              opacity 0.4
            }
          }
          .start_btn{
            width 114px
            line-height 53px
            font-size 52px
            color #fff
            letter-spacing 3px
            font-weight 500
          }
          .start_num{
            font-size 20px
            color #FCF1CE
            font-weight 500
            letter-spacing 1px
            margin-bottom 14px
          }
        }
九宫格：
    .item{
          position absolute
          width 184px
          height 188px
          background-image url('../../assets/img/draw/no_picked.png')
          background-repeat no-repeat
          background-position center center
          background-size cover
          display flex
          flex-direction column
          align-items center
          justify-content center
          &.active{
            background-image url('../../assets/img/draw/picked.png')
            .name{
              color #fff
            }
          }
          .img{
            max-width 87px
            max-height 67px
            img{
              width 100%
              height 100%
            }
          }
          .name{
            color #83221D
          }
        }
        .item0,.item1,.item2{
          top 46px
        }
        .item4,.item5,.item6{
          bottom 48px
        }
        .item3,.item7,.start{
          top 238px
        }
        .item0,.item7,.item6{
          left 48px
        }
        .item2,.item3,.item4{
          right 48px
        }
        .item1,.item5,.start{
          left 238px
        }
      }

然后是js代码，逻辑就是通过setTimeout来控制时间，通过current来判断是第几个奖品

<!--
 * @Description:
 * @Author: @[lina]
 * @Date: 2020-07-17 13:53:06
 * @LastEditors: @[lina]
 * @LastEditTime: 2020-07-21 16:33:17
-->
    start () {
      // 每次抽完奖后，再次抽奖时，初始化
      this.time = Date.now()
      this.current = 0
      this.speed = 200
      this.biginDraw()
    },
    biginDraw () {
      // 请求接口
      setTimeout(() => {
        this.drawPrize = {
          title: '15元优惠券', // 奖品信息
          prizeIndex: 6, // 奖品编号
          prizeImgUrl: '@img/img/draw/card.png'
        }
      }, 2000)
      this.move()
    },
    move () {
      const _this = this
      window.timeout = setTimeout(() => {
        ++_this.current
        if (_this.current > 7) {
          _this.current = 0
        }
        // 若抽中的奖品index存在，那么转圈圈的速度减慢
        if (_this.drawPrize.prizeIndex && (Date.now() - _this.time) / 1000 > 2) {
          _this.speed += _this.diff // 转动减速
          if (_this.drawPrize.prizeIndex === _this.drawPrizes[_this.current].prizeIndex && (Date.now() - _this.time > 6)) {
            clearTimeout(window.timeout)
            setTimeout(() => {
              // 输出抽奖结果
              console.log(_this.drawPrize.title)
            }, 0)
            return false
          }
        } else {
          // 若抽中奖品不存在，那么转圈圈的速度加速
          _this.speed -= _this.diff
        }
        _this.move()
      }, _this.speed)
    }
  }