持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

前言

最近在公司做活动嘛，自己也学习开发了一些小功能，这次就先来一个简单的，就一个很简单的通过定时器控制，实现走马灯转盘抽奖，可以控制转圈的次数，走马灯的停留的速度，主要是学习一下定时器的使用。

效果

看似复杂，其实很简单

核心代码

其实这次的核心代码主要就是js，通过js判断，创建和清空定时器

// 开始游戏，防止多次点击
const start = function () {
  if (isRun.value) {
    console.log('正在抽奖中')
    return
  }
  run()
}

const clese = function () {
  console.log("游戏结束,用于动画结束之后处理弹出层")
}

这一块才是整个Demo的灵魂处

initCircle.value++ 记录当前游戏转圈的次数
currentIndex.value = 1 游戏从第一个开始转动
isRun.value = true 对于 start 方法，防止多次点击
currentIndex.value === targetIndex 当前转到的奖品是否是目标
initCircle.value === circle + 1 至于为什么需要加1，道理和分页一样，多的数据不满一页也需要用新的一页来装
currentIndex.value += 1 当前的一个商品数量加一
currentIndex.value >= prizeList.length + 1 旋转的商品大于了目标数量，则重新开始新的一圈
10 + initCircle.value * 150) 动态改变定时器的时间，造成一个动画效果，转圈的速度越来越慢。

const run = function () {

  // 记录所转的圈数
  initCircle.value++

  clearInterval(timer.value)
  // 进入新的一轮从第一个开始转动
  currentIndex.value = 1

  // 正在游戏中
  isRun.value = true
  timer.value = setInterval(() => {
    // 当前指定的索引等于目标，并且已转的全数等于指定圈数，那么就停止旋转
    if (currentIndex.value === targetIndex && initCircle.value === circle + 1) {
      clearInterval(timer.value)
      isRun.value = false
      initCircle.value = 0
      clese()
      return
    }

    // 通过定时器，每次累加旋转的索引
    currentIndex.value += 1

    // 转完一圈之后重新开始新的一圈
    if (currentIndex.value >= prizeList.length + 1) {
      run()
    }
  }, 10 + initCircle.value * 150)
}

总结

一个简单而有意义的小Demo，相信大家还可以在我的基础上继续优化，使demo更好用。

走马灯抽奖

前言

效果

核心代码

这一块才是整个Demo的灵魂处

总结