用CSS实现一个抽奖转盘(附详细代码+思路)

let getEle = document.getElementsByClassName.bind(document);

let pointer = getEle(‘pointer’)[0];

let result = getEle(‘result’)[0];

let onRotation = false; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了

let reward = [‘谢谢参与’, ‘50积分’, ‘谢谢参与’, ‘100元话费’, ‘50积分’,

‘谢谢参与’, ‘100元话费’, ‘谢谢参与’, ‘50积分’, ‘10元话费’];

// 根据随机角度获取奖励

let getReward = (function() {

currentDeg = 0;

return function() {

// 转三圈到四圈

let rotateDeg = Math.random() * 360 + 1080;

currentDeg += rotateDeg;

let rewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)]

return {

deg: currentDeg,

text: rewardText === ‘谢谢参与’ ? ‘很遗憾，您没有获得奖品。’ : '恭喜获得: ’ + rewardText

}

}

})();

pointer.addEventListener(‘click’, () => {

if (onRotation) return;

console.log(‘开始抽奖’);

onRotation = true;

let nextStatus = getReward();

console.log(nextStatus)

result.innerText = nextStatus.text;

result.style.display = ‘none’;

pointer.style.transform = rotateZ(${nextStatus.deg}deg);

})

pointer.addEventListener(‘transitionend’, () => {

console.log(‘抽奖结束’);

onRotation = false;

result.style.display = ‘block’;

})

现在一个抽奖转盘基本完成了，最后一个需求，如果旁边的等能够亮起来就好了。

至于灯怎么亮，就需要用到CSS3的动画了，我还不太熟悉，先去学习一下>_<

我学完回来了，参考教程http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html，内容不是很多。

animation-name 指定动画名称，

animation-duration 指定动画持续时间，

animation-timing-function 指定动画函数，和transition的函数是一样的，

animation-delay 指定动画延迟多久后执行，

animation-iteration-count 指定动画执行多少次，默认为一次，可以指定为infinite，无限循环。

animation-direction 指定动画多次播放时，一次结束，下一次怎么接上一次，如图。

animation-fill-mode 指定动画结束后停在什么位置，默认回到起始状态，forwards表示让动画停留在结束状态，backwards让动画回到第一帧的状态，both根据animation-direction轮流应用forwards和backwards规则。

animation-play-state 动画执行状态，默认为running，可以设置为pause，动画将在当前状态停止，再改为running时，会接着上一次停止的位置继续执行动画。

使用关键字 keyframes 来定义一个动画。通过百分比指定其中任意几个状态。

尝试着写一下=。=

这是一个方块，先慢速闪三下，再快速闪三下，最后消失。

animation: 1s twinkling 3;

就相当于

animation-name: twinkling;

animation-duration: 1s;

animation-timing-function: ease;

animation-delay: 0s;

animation-iteration-count: 3;

animation-direction: normal;

animation-fill-mode: none;

animation-play-state: running;

效果

我觉得还可以:P 反正我只能写成这样了。

最后把动画加到转盘的灯上。完成代码（好像颜色变了，咳，那是因为我animation学了太久都掉色了）：

谢谢参与

5 0 积分

谢谢参与

100元话费

5 0 积分

谢谢参与

100元话费

谢谢参与

5 0 积分

10元话费

开始抽奖