九宮格抽獎

時間 2020-05-12

標籤九宮抽獎简体版

原文原文鏈接

jQuery實現九宮格抽獎支持隨機、指定獎品機率50%、指定獎品、設置各獎品機率
只實現了功能，還未組件化html

<!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>

1. 九宮格抽獎
2. JS九宮格抽獎
3. Android 九宮格抽獎
4. jq九宮格抽獎
5. 抽獎九宮格Demo
6. JS筆記：實現九宮格抽獎
7. jquery——九宮格大轉盤抽獎
8. 【javascript】九宮格抽獎組件設計
9. vue抽獎組件之九宮格
10. JavaScript實現基本九宮格抽獎
更多相關文章...
• jQuery Mobile 表格 - jQuery Mobile 教程
• ionic 網格(Grid) - ionic 教程
• RxJava操作符（九）Connectable Observable Operators
• IntelliJ IDEA代碼格式化設置

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。