美文网首页
宫格抽奖思路

宫格抽奖思路

作者: 下凉风 | 来源:发表于2020-07-19 17:10 被阅读0次

    实现一个4*4d的宫格抽奖

    第一步:UI实现正方形,可以循环渲染然后掏空中间部分,每个方格设置data-set
    第二步:设置数组,根据上面的data-set排列方格的顺序,按照数组定义的顺序,渲染active的样式
    第三步:设置定时器,每次‘亮’一个格子,达到顺时针的效果
    第四步:设置速度,开始抽奖,速度由慢变快;当收到后端的奖品ids时(代码是手动点击使其结束,结束抽奖,速度减慢

    import React, { useRef } from 'react'
    import styles from './styles.module.scss'
    
    const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
    //调整顺序
    const currentIndex = [0, 1, 2, 3, 7, 11, 15, 14, 13, 12, 8, 4]
    let timer = ''
    //格子数量
    let num = 0
    //定时器间隔
    let speed = 500
    
    export default () => {
      const prize = useRef()
    
      const onStart = () => {
        onDuring('start')
      }
    
      const onStop = () => {
      //手动设置奖品为第五格
        prize.current = 5
        onDuring('end')
      }
    
      const onDuring = type => {
        if (timer) clearTimeout(timer)
        const items = document.querySelectorAll('.item')
        if (num > 11) num = 0
        items.forEach(el => {
        //设置active样式
          el.dataset.index * 1 === currentIndex[num]
            ? (el.style.backgroundColor = 'yellow')
            : (el.style.backgroundColor = 'pink')
        })
    
        if (type === 'start') {
          //加速
          if (speed > 100) speed -= 40
          timer = setTimeout(() => {
            onDuring('start')
          }, speed)
        } else {
          timer = setTimeout(() => {
            onDuring('end')
          }, speed)
          //减速
          speed += 40
          if (speed > 500 && num === prize.current) {
            clearTimeout(timer)
          }
        }
        num++
      }
    
      return (
        <div>
          <div className={styles.lottery}>
            {arr.map((v, i) =>
              [5, 6, 9, 10].indexOf(i) !== -1 ? (
                <span key={i} className={styles.blank} />
              ) : (
                <span key={i} className={`item ${styles.item}`} data-index={i}>
                  {v}
                </span>
              )
            )}
            <span className={styles.btn} onClick={onStart}>
              抽奖
            </span>
          </div>
          <span className={styles.stop} onClick={onStop}>
            停止
          </span>
        </div>
      )
    }
    
    

    相关文章

      网友评论

          本文标题:宫格抽奖思路

          本文链接:https://www.haomeiwen.com/subject/gpqrkktx.html