抽奖

by 苹果熊

HTML

<div class="prize" id="prize">
  <ul>
    <li>自撸一晚</li>
    <li>自撸一晚</li>
    <li>小雅一晚</li>
    <li>自撸一晚</li>
    <li>自撸一晚</li>
    <li>自撸一晚</li>
    <li>自撸一晚</li>
    <li>自撸一晚</li>
    <li id="start">点我抽奖</li>
  </ul>
  <div class="rotate" id="rotate"></div>
</div>

CSS

.prize {
  width: 330px;
  height:330px;
  position: relative;
}
.prize .rotate {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0; top: 0; z-index: 10;
  border: 5px solid #f30;
  box-sizing: border-box;
  border-radius: 50%;
}
.prize li {
  width: 100px;
  height: 100px;
  border: 1px solid #390;
  position: absolute;
  box-sizing: border-box;
  text-align: center;
  line-height: 100px;
  color: #390;
  cursor: pointer;
  border-radius: 50%;
}
.prize li:nth-child(1) {
  left: 0; top: 0;
}
.prize li:nth-child(2) {
  left: 110px; top: 0;
}
.prize li:nth-child(3) {
  left: 220px; top: 0; color: red;
}
.prize li:nth-child(4) {
  left: 220px; top: 110px;
}
.prize li:nth-child(5) {
  left: 220px; top: 220px;
}
.prize li:nth-child(6) {
  left: 110px; top: 220px;
}
.prize li:nth-child(7) {
  left: 0; top: 220px;
}
.prize li:nth-child(8) {
  left: 0; top: 110px;
}
.prize li:nth-child(9) {
  left: 110px; top: 110px;
  color: #f30;
  font-weight: 700;
}

JavaScript

function rotate() {
	var posArr = [
  	{left: 0, top: 0},
    {left: '110px', top: 0},
    {left: '220px', top: 0},
    {left: '220px', top: '110px'},
    {left: '220px', top: '220px'},
    {left: '110px', top: '220px'},
    {left: 0, top: '220px'},
    {left: 0, top: '110px'},
  ]
  var prizeArr = ['自撸一晚', '自撸一晚', '自撸一晚', '小雅一晚', '自撸一晚', '自撸一晚', '自撸一晚', '自撸一晚']
  var i = 0
  var timer = null
  var loaded = false
  var time = 20
  var round = 4
  var start = document.querySelector('#start')
  var rotate = document.querySelector('#rotate')
  
  start.onclick = function() {
  	if(loaded) return
    var level = ~~(Math.random() * 8)
    console.log(level)
    prize(level)
  }
  
  function prize(level) {
  	var rounds = round * 8 - 1
  	loaded = true
  	timer = setInterval(function() {
    	if(i > rounds) {
        clearInterval(timer)
      	slow()
        return
      }
    	rotate.style.left = posArr[i % 8].left
      rotate.style.top = posArr[i % 8].top
      i++
    }, time)
    
    function slow() {
    	if(i > level + rounds + 8) {
      	clearTimeout(timer)
      	i = 0
        loaded = false
        alert(prizeArr[level])
        return
      }
      rotate.style.left = posArr[i % 8].left
      rotate.style.top = posArr[i % 8].top
      i++
    	timer = setTimeout(slow, time * 4)
    }
  }
}
rotate()