Spaces:

silencewing
/

server

Sleeping

File size: 10,161 Bytes

50408e8

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>转盘抽奖</title>
  <style>
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      height: 100%;
      background: #264563;
    }

    .luckdraw {
      width: 300px;
      height: 300px;
      position: relative;
      margin: 100px auto;
      border-radius: 50%;
      overflow: hidden;
    }

    .luckpanel {
      position: relative;
      width: 100%;
      height: 100%;

      transition: transform 3s ease-in-out;
    }

    #canvas {
      position: relative;
      width: 100%;
      height: 100%;
    }

    #canvas .sector-item {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 50%;
      transform-origin: right bottom;
      overflow: hidden;
    }

    /* #canvas .sector-item:nth-child(odd) {
      background: pink;
    }

    #canvas .sector-item:nth-child(even) {
      background: skyblue;
    } */


    .prize {
      position: absolute;
      top: 0;
      left: 50%;
      width: 50%;
      height: 50%;
      transform: translateX(-50%);
    }

    .prize-item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-origin: center bottom;
    }

    .prize-item__name {
      position: absolute;
      top: 20px;
      left: 10px;
      width: calc(100% - 20px);
      font-size: 12px;
      text-align: center;
      color: #ff572f;
    }

    .prize-item__img {
      position: absolute;
      top: 50px;
      left: calc(50% - 30px /2);
      width: 30px;
      height: 30px;
    }

    .prize-item__img img {
      width: 100%;
      height: 100%;
      vertical-align: bottom;
    }

    /* 抽奖 */
    .pointer {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 90px;
      height: 90px;
      background-color: orange;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      font-weight: bold;
      cursor: pointer;
      user-select: none;
    }

    .pointer::after {
      content: '';
      position: absolute;
      top: -70px;
      border: 40px solid orange;
      border-left-width: 10px;
      border-right-width: 10px;
      border-left-color: transparent;
      border-top-color: transparent;
      border-right-color: transparent;
    }
  </style>
</head>

<body>
  <div class="luckdraw">
    <div class="luckpanel">
      <div id="canvas"></div>
      <div class="prize">
        <!-- <div class="prize-item">
          <div class="prize-item__name">奖品</div>
          <div class="prize-item__img">
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.it168.com%2Fn%2F640x480%2F6%2F6414%2F6414197.jpg&refer=http%3A%2F%2Fimage.it168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640667263&t=18bb80a694a5ff966713191b4a81745d"
              alt="">
          </div>
        </div> -->
      </div>
    </div>
    <div class="pointer">抽奖</div>
  </div>
  <script>
    const consts = {
      // 奖品清单
      prizeList: [
        // {
        //   prizeName: '休息多5分钟',
        //   // prizeImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.it168.com%2Fn%2F640x480%2F6%2F6414%2F6414197.jpg&refer=http%3A%2F%2Fimage.it168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640667263&t=18bb80a694a5ff966713191b4a81745d',
        //   count: 10,
        // },
        // {
        //   prizeName: '休息多10分钟',
        //   // prizeImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.it168.com%2Fn%2F640x480%2F6%2F6414%2F6414197.jpg&refer=http%3A%2F%2Fimage.it168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640667263&t=18bb80a694a5ff966713191b4a81745d',
        //   count: 5,
        // },
        {
          prizeName: '托马斯1集',
          // prizeImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.it168.com%2Fn%2F640x480%2F6%2F6414%2F6414197.jpg&refer=http%3A%2F%2Fimage.it168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640667263&t=18bb80a694a5ff966713191b4a81745d',
          count: 6,
        },
        {
          prizeName: '丁丁1集',
          // prizeImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.it168.com%2Fn%2F640x480%2F6%2F6414%2F6414197.jpg&refer=http%3A%2F%2Fimage.it168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640667263&t=18bb80a694a5ff966713191b4a81745d',
          count: 3,
        },
        {
          prizeName: '小熊15分钟',
          // prizeImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.it168.com%2Fn%2F640x480%2F6%2F6414%2F6414197.jpg&refer=http%3A%2F%2Fimage.it168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640667263&t=18bb80a694a5ff966713191b4a81745d',
          count: 5,
        },
        {
          prizeName: '读书写字画画10分钟',
          // prizeImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.it168.com%2Fn%2F640x480%2F6%2F6414%2F6414197.jpg&refer=http%3A%2F%2Fimage.it168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640667263&t=18bb80a694a5ff966713191b4a81745d',
          count: 2,
        }
      ],
      // 每一块扇形的背景色
      prizeBgColors: [
        'rgb(255,231,149)',
        'rgb(255,247,223)',
        'rgb(255,231,149)',
        'rgb(255,247,223)',
        'rgb(255,231,149)',
        'rgb(255,247,223)',
        'rgb(255,231,149)',
        'rgb(255,247,223)',
      ],
      // 每一块扇形的外边框颜色
      borderColor: '#ff9800'
    }

    const prizeNum = consts.prizeList.length
    let itemAngle = 360 / prizeNum     // 每个扇形区域的角度
    const offsetAngle = itemAngle / 2
    let isRotating = false
    const circleCount = 3 // 旋转圈数
    const rotateDuration = 3 // 持续时间
    const panel = document.querySelector('.luckpanel')

    // 画出扇形骨架
    function drawPanel() {
      let fragMent = document.createDocumentFragment()
      consts.prizeList.forEach((item, index) => {
        let itemDom = document.createElement('div')
        itemDom.setAttribute('class', 'sector-item')
        itemDom.style.background = `${consts.prizeBgColors[index]}`
        itemDom.style.borderBottom = `1px solid ${consts.borderColor}`
        itemDom.style.transform = `rotate(${itemAngle * (index + 1)}deg) skewY(${90 - itemAngle}deg)`
        fragMent.appendChild(itemDom)
      })
      document.getElementById('canvas').appendChild(fragMent)
    }

    function getPrizeItem({ name, src }) {
      const el = document.createElement('div')
      let tpl = ''
      if(src){
        tpl = `
          <div class="prize-item">
            <div class="prize-item__name">${name}</div>
            <div class="prize-item__img">
              <img
                src="${src}"
                alt="">
            </div>
          </div>
        `
      }
      else{
        tpl = `
          <div class="prize-item">
            <div class="prize-item__name">${name}</div>
            <div class="prize-item__img">
            </div>
          </div>
        `
      }
      el.innerHTML = tpl
      return el.firstElementChild
    }
    // 填充奖品内容
    function fillPrize() {
      const container = document.querySelector('.prize')
      consts.prizeList.forEach((item, i) => {
        const el = getPrizeItem({
          name: item.prizeName,
          src: item.prizeImg
        })
        // 旋转
        const currentAngle = itemAngle * i + offsetAngle
        el.style.transform = `rotate(${currentAngle}deg)`
        container.appendChild(el)
      })
    }
    // 获得哪一个奖品
    function getPrizeIndex(prizeList) {
      // 中奖的是哪一个奖品
      let index = 0
      // 当前奖品总数量
      let prizeTotalNum = 0
      for (let i = 0; i < prizeList.length; i++) {
        prizeTotalNum += prizeList[i].count
      }
      if (prizeTotalNum === 0) {
        alert('奖品已抽完');
        return index = -1
      }
      // 产生一个随机数 0-总数
      let random = parseInt(Math.random() * prizeTotalNum)
      // 当前奖品的概率区间
      let currentWeight = 0
      for (let i = 0; i < prizeList.length; i++) {
        currentWeight += prizeList[i].count
        if (random < currentWeight) {
          index = i
          prizeList[i].count--
          break
        }
      }
      return index
    }
    // 抽奖事件
    function bindEvent() {
      document.querySelector('.pointer').addEventListener('click', function () {
        if (isRotating) {
          return
        } else {
          isRotating = true
        }
        const index = getPrizeIndex(consts.prizeList)
        console.log('index', index);
        if (index === -1) {
          isRotating = false
        } else {
          console.log('奖品名称', consts.prizeList[index].prizeName);
          rotate(index)
        }
      })
    }
    // 旋转转盘
    let statrtRotatAngle = 0
    function rotate(index) {
      // statrtRotatAngle % 360 上一次旋转到index的度数
      // statrtRotatAngle - statrtRotatAngle % 360  得到一个度数为 360*n
      // 旋转到索引index商品的度数
      let angleToIndex = 360 - (offsetAngle + itemAngle * index)
      const rotateAngle = statrtRotatAngle - statrtRotatAngle % 360 + circleCount * 360 + angleToIndex
      statrtRotatAngle = rotateAngle
      panel.style.transform = `rotate(${rotateAngle}deg)`
      panel.style.transitionDuration = `${rotateDuration}s`
      setTimeout(() => {
        isRotating = false
      }, 1000)
    }


    function init() {
      // 画出扇形骨架
      drawPanel()
      // 填充奖品内容
      fillPrize()
      // 抽奖事件
      bindEvent()
    }
    document.addEventListener('DOMContentLoaded', init)

  </script>
</body>

</html>