JS特效第90弹：jQuery年终转盘抽奖代码
以下是一个简化的jQuery年终转盘抽奖代码示例，用于实现点击按钮后在转盘上随机停止，并显示中奖信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Year-End Lottery Wheel</title>
<style>
#wheel {
width: 300px;
height: 300px;
border-radius: 50%;
background: #e3e3e3;
position: relative;
margin: 0 auto;
}
#wheel .segment {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
background: #f2f2f2;
}
#wheel .pointer {
width: 20px;
height: 60px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -10px;
background: #000;
border-radius: 5px;
transform: rotate(0deg);
transform-origin: center;
animation: spin 5s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<button id="spin">Spin the Wheel</button>
<div id="wheel">
<div class="pointer"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var segments = 360; // 一共有360个段
var randomNumber = 0; // 随机数初始化
$('#spin').click(function() {
// 停止之前正在进行的转动
$('#wheel .pointer').css('animation', 'none');
// 在下次重绘之后更新动画
setTimeout(function() {
randomNumber = Math.random() * segments; // 生成一个随机数
$('#wheel .pointer').css('animation', 'spin 5s linear infinite').css('transform', 'rotate(' + randomNumber + 'deg)');
}, 0);
});
});
</script>
</body>
</html>这段代码实现了基本的转盘抽奖功能，点击按钮后转盘会停在随机位置。这里使用了CSS动画来实现转盘旋转，并在JavaScript中通过修改转盘的旋转角度来让它停在指定的位置。
评论已关闭