九宫格抽奖

jQuery实现九宫格抽奖支持随机、指定奖品概率50%、指定奖品、设置各奖品概率
只实现了功能，还未组件化
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    ul, li{
      list-style: none;
      padding: 0
    }
    .wrapperbox {
      position: relative;
    }
    .wrapper {
      width: 300px;
      height: 300px;
    }
    .box {
      float: left;
      width: 99px;
      height: 99px;
      line-height: 99px;
      border: 1px solid #000;
      text-align: center;
      margin-left: -1px;
      margin-top: -1px;
    }
    .box-start {
      color: red;
      cursor: pointer;
    }
    .active {
      background-color: rgb(255, 255, 141);
    }
  </style>
</head>
<body>
  <div class="wrapperbox">
    <ul class="wrapper">
      <li id="box0" class="box" >华为</li>
      <li id="box1" class="box">iPhoneX</li>
      <li id="box2" class="box">谢谢</li>
      <li id="box7" class="box">手环</li>
      <li id="start" class="box box-start">开始</li>
      <li id="box3" class="box">抱枕</li>
      <li id="box6" class="box">冰箱</li>
      <li id="box5" class="box">电风扇</li>
      <li id="box4" class="box">音响</li>
    </ul>
  </div>
  <select id="select">
    <option value="prizeRandom">随机</option>
    <option value="prizeHalfPercent">指定奖品概率为50%</option>
    <option value="specifyPrize">指定奖品</option>
    <option value="specifyPrizePercent">指定各奖品概率</option>
  </select>
  <div>
    <input type="text" id="prizeIndex">
    <button id="confirm">确定</button>
    <p>除随机外其他选项必须填写，并点击确定才会生效。</p>
    <p>奖品id按顺时针为0-7。选择指定各奖品概率请填入各奖品概率（1-100的整数），以“,”分隔，各奖品概率总和为100。</p>
  </div>
</body>
<!-- <script src="./jquery-3.4.1.min.js"></script> -->
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
  var $start = $('#start')
  var $select = $('#select')
  var $prizeIndex = $('#prizeIndex')
  var $confirm = $('#confirm')
  var selectType = 'prizeRandom' // 选择类型
  var prizeIndex = '' // 输入的值

  var times = 0 // 转动次数
  var cycle = 32 // 转动次数 
  var index = -1 // 起点位置 当前位置
  var timer = 0 // 定时器ID
  var speed = 40 // 转动速度 初始值必须设为大于400
  var count = 8 // 奖品数量
  var clicked = false

  $start.on('click', () => {
    if (clicked) {
      return
    }
    cycle = getCycle()
    console.log('cycle:' + cycle)
    roll()
    clicked = true
  })
  $select.on('change', () => {
    clicked = false
  })
  $confirm.on('click', () => {
    selectType = $select.val()
    console.log(selectType)
    switch (selectType) {
      case 'specifyPrizePercent':
        prizeIndex = $prizeIndex.val().split(',')
        // 判断传入数组各值之和是否为100 
        var sum = 0
        for (var k = 0; k < prizeIndex.length; k++) {
          prizeIndex[k] = prizeIndex[k] !== '' ? parseInt(prizeIndex[k]) : 0
          sum += prizeIndex[k]
        }
        clicked = false
        if (sum !== 100) {
          clicked = true // 不允许点开始
          alert('输入概率之和必须为100')
          return
        }
        break
      case 'prizeHalfPercent':
        prizeIndex = Number($prizeIndex.val())
        break
      case 'specifyPrize':
        prizeIndex = Number($prizeIndex.val())
        break
      default:
        prizeIndex = 0
    }
    console.log(prizeIndex)
  })

  function getCycle () {
    switch (selectType) {
      case 'prizeRandom':
        return getRandomCycle()
        break
      case 'prizeHalfPercent':
        return getHalfPercentCycle(prizeIndex)
        break
      case 'specifyPrize':
        return getSpecifyCycle(prizeIndex)
        break
      case 'specifyPrizePercent':
        return getSpecifyPercentCycle(prizeIndex)
        break
      default:
        return getRandomCycle()
    }
  }

  function getRandomCycle () {
    return (32 + Math.floor(Math.random() * 8))
  }

  function getHalfPercentCycle (prizeIndex) {
    var random = Math.ceil(Math.random() * 100) // 1-100
    if (random <= 50) {
      cycle = 32 + prizeIndex
    } else {
      var temp = 32 + Math.floor(Math.random() * 8) // 32-39
      while (temp % 8 === prizeIndex) { // 如果是50%的那个奖品，重新生成随机数
        temp = 32 + Math.floor(Math.random() * 8)
      }
      cycle = temp
    }
    return cycle
    console.log(cycle)
  }

  function getSpecifyCycle (prizeIndex) {
    return (32 + prizeIndex)
  }

  function getSpecifyPercentCycle (arr) {
    var random = Math.ceil(Math.random() * 100) // 1-100
    var range = [] // [10, 25, 45, 60, 70, 85, 95, 100]
    for (var k = 0; k < arr.length; k++) {
      range[k] = getRangeValue(k)
    }
    function getRangeValue(n) {
      if (n === 0) {
          return arr[0]
      }
      return (arr[n] + getRangeValue(n-1))
    }
    console.log(range)

    // 判断随机数的区间
    var num
    for (var i = 0; i < range.length; i++) {
      var down = range[i-1] === undefined ? 0 : range[i-1]
      if (random > down && random <= range[i]) {
        num = 32 + i
        break
      }
    }
    return num
  }

  function init () {
    times = 0
    cycle = 32
    index = -1
    timer = 0
    speed = 40
    clicked = false
  }
  function roll () {   
    move()
    times += 1
    console.log('times:' + times)
    if (times > cycle) {
      clearTimeout(timer)
      alertPrize()
    } else {
      if (times < 10) { // 前10次逐渐加快
        speed -= 20
      } else if (times > cycle - 10) { // 后10次逐渐减缓
        speed += 20
      }
      if (speed < 40) {
        speed = 40
      }
      timer = setTimeout(roll, speed)
    }
  }
  // 移动，去掉上一个的样式，下一个增加样式
  function move(){
    var i = index
    $(`#box${i}`).removeClass('active')
    i++
    if (i >= count) {
      i = 0
    }
    $(`#box${i}`).addClass('active')
    index = i
  }

  function alertPrize () {
    setTimeout(() => {
      var prize = cycle % count
      console.log('cycle:' + cycle)
      console.log('prize:' + prize)
      var prizeText = $(`#box${prize}`).text()
      alert(`你抽中的奖品是：${prizeText}!`)
      init()
    }, 600)
  }
</script>
</html>
九宫格抽奖

CSep27

引用和评论

【笔记】JS异步编程-async/await

手写一个动态海洋和天空效果的vue hooks

你可能不知道的图片加载相关知识

原生JS大揭秘—JS代码执行原理解刨

原生electron起步-从零到一完成构建和打包

LRU算法，你别跑，我就要吃透你

亚像素渲染：浏览器如何处理小数像素的渲染？
