写个uni h5转盘抽奖的demo，可控制抽奖概率，开始抽奖时指针由快到慢减速

在H5页面上创建一个轮盘抽奖Demo，我们可以使用HTML、CSS和JavaScript来实现。以下是一个简单的步骤说明：

**HTML结构：**

<div id="roulette">
  <div class="wheel" style="--start-angle:0deg;"></div>
  <div class="pointer"></div>
  <button onclick="startLottery()">开始抽奖</button>
  <p>奖品列表:</p>
  <ul id="prizesList"></ul>
</div>

**CSS样式：**

#roulette {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
}

.wheel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: linear-gradient(to right, #F9A825 0%, #F6D76B 50%, #EAC87E 100%);
  background-size: 360deg 400px;
  transition: transform 1s ease-in-out;
}

.pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
}

**JavaScript逻辑：**

const wheel = document.querySelector('.wheel');
const pointer = document.querySelector('.pointer');
const prizesList = document.getElementById('prizesList');

function drawRandom() {
  const angles = Array.from({length: 12}, (_, i) => (i * 30 + Math.random() * 10) + 'deg');
  wheel.style.setProperty('--angle', angles[Math.floor(Math.random() * angles.length)]);
}

function startLottery() {
  let rotationSpeed = 5; // 初始旋转速度
  let targetAngle = getTargetAngle(); // 获取目标角度
  const intervalId = setInterval(() => {
    if (Math.abs(wheel.style.transformOrigin.split('-')[1] - targetAngle) < 1) {
      clearInterval(intervalId);
      drawResult();
    } else {
      wheel.style.transform = `rotate(${rotationSpeed}deg)`;
      rotationSpeed -= 0.1; // 每次减小旋转速度
    }
  }, 10); // 更新频率，可根据需要调整
}

// 获取奖品对应的起始角度
function getTargetAngle(prizeName) {
  return prizeNames.find(p => p === prizeName).split(':')[0];
}

// 抽奖结束后更新UI
function drawResult() {
  // 假设prizesList已经填充了奖品及其对应的角度
  const chosenPrize = prizesList[0].innerText; // 取第一个奖品作为示例
  pointer.style.transform = `translate(0, ${getPointerY(chosenPrize)})`;
  alert(`恭喜你抽到了：${chosenPrize}`);
}

// 根据奖品名称计算指针位置
function getPointerY(prizeName) {
  // 简化处理，实际应用中应从奖品列表中查找对应角度
  return '100px';
}

// 初始化奖品列表（这里仅作示例）
prizesList.innerHTML = `<li data-angle="0">一等奖</li><li data-angle="60">二等奖</li><li data-angle="120">三等奖</li>`;

这个示例只是一个基础框架，实际应用中你需要根据需求添加更多功能，如动态改变每个奖品的概率、用户交互等，并确保概率计算准确。