移动抽奖页面js写法

移动抽奖页面的 JS 写法可以分为以下几个步骤：

1. 获取页面元素：通过 DOM 操作获取抽奖页面的元素，如转盘、开始按钮、剩余次数等。

2. 定义抽奖规则：根据需求定义抽奖规则，如中奖概率、奖品种类等。

3. 编写转盘动画：通过 CSS3 的 transform 属性和 JS 的定时器实现转盘的旋转动画，让用户感受到抽奖的真实性。

4. 处理抽奖逻辑：在点击开始按钮时，判断用户是否还有抽奖次数，并根据抽奖规则随机生成中奖结果，展示在转盘上。

5. 更新页面显示：根据用户中奖情况更新页面显示，包括剩余抽奖次数、中奖提示等。

下面是一个简单的移动抽奖页面的 JS 实现代码示例：

// 获取页面元素
var turntable = document.querySelector('.turntable');
var startBtn = document.querySelector('.start-btn');
var remainNum = document.querySelector('.remain-num');

// 定义抽奖规则
var prizeList = ['一等奖', '二等奖', '三等奖', '谢谢参与'];
var prizeProb = [0.01, 0.1, 0.2, 0.69];

// 定义转盘动画
var angle = 0;
function rotate() {
  angle += 5;
  turntable.style.transform = 'rotate(' + angle + 'deg)';
  requestAnimationFrame(rotate);
}

// 处理抽奖逻辑
var remainTimes = 3;
var isRunning = false;
startBtn.addEventListener('click', function() {
  if (isRunning) return;
  if (remainTimes <= 0) {
    alert('您的抽奖次数已用完');
    return;
  }
  isRunning = true;
  remainTimes--;
  remainNum.innerHTML = remainTimes;
  var randomNum = Math.random();
  var sumProb = 0;
  for (var i = 0; i < prizeProb.length; i++) {
    sumProb += prizeProb[i];
    if (randomNum <= sumProb) {
      var resultIndex = i;
      break;
    }
  }
  var rotateDeg = resultIndex * 90 + 45;
  turntable.style.transform = 'rotate(' + rotateDeg + 'deg)';
  setTimeout(function() {
    alert('恭喜您获得' + prizeList[resultIndex]);
    isRunning = false;
  }, 5000);
});

// 启动转盘动画
rotate();

以上代码仅供参考，实际实现中需要根据具体业务需求进行调整。