幸运大转盘
2019-01-18 本文已影响7人
w_wx_x
新年伊始，各种年会抽奖，那我们就来做一个简单版的大转盘，蹭一蹭节日的热闹气氛吧
效果如下：
效果图.gif
所需素材如下：
pointer.png
turntable.png
turntable-bg.jpg
我们开始吧！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>抽奖</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 这里是css部分 -->
<style>
#bg {
width: 650px;
height: 600px;
margin: 0 auto;
background: url(img/turntable-bg.jpg) no-repeat;
position: relative;
}
img:nth-of-type(1) {
position: absolute;
z-index: 10;
top: 155px;
left: 247px;
}
img:nth-of-type(2) {
position: absolute;
z-index: 5;
top: 60px;
left: 116px;
}
</style>
</head>
<body>
<!-- 这里是HTML结构部分 -->
<div id="bg">
<img src="img/pointer.png" alt="pointer" id="pointer" />
<img src="img/turntable.png" alt="turntable" id="turntable" />
</div>
<!-- 这里是js部分 -->
<script>
// 拿到两个img
var oPointer = $('#pointer')
var oTurntable = $('#turntable')
var cat = 360 / 7 // 旋转过每个奖项大约的角度
var offOn = true // 点击按钮后旋转没结束不允许第二次旋转
var temp = 0 // 记录上一次旋转的角度
// 点击开始抽奖
oPointer.click(function() {
if (offOn) {
offOn = !offOn
ratating()
}
})
// 转盘旋转
function ratating() {
var rdm = Math.floor(Math.random() * 3600) + 3600 // 随机计算出旋转的角度
// 旋转动画
oTurntable.css({
transition: 'all 4s',
transform: 'rotate(' + (rdm + temp) + 'deg)'
})
// 旋转后，根据角度判断对应的奖项
setTimeout(function() {
offOn = !offOn
temp = (rdm + temp) % 360 // 求余，算出在哪个奖项
if (temp <= cat * 1) {
alert('4999元')
} else if (temp <= cat * 2) {
alert('免单50元')
} else if (temp <= cat * 3) {
alert('免单10元')
} else if (temp <= cat * 4) {
alert('免单5元')
} else if (temp <= cat * 5) {
alert('免分期服务费')
} else if (temp <= cat * 6) {
alert('提高白条额度')
} else if (temp <= cat * 7) {
alert('未中奖')
}
oTurntable.css({
transition: 'all 0s',
transform: 'rotate(' + temp + 'deg)'
})
}, 4000)
}
</script>
</body>
</html>
你们还有什么好的实现方式分享一下，一起学习
