本文最后更新于 740 天前,其中的信息可能已经有所发展或是发生改变。
介绍
效果
解题思路
CSS类.li1-8按顺时针排列,因此只需对time取模即可获取当前激活的图标位置,上代码:
function rolling() {
if (time === 0) {
for (let i = 1; i <= 8; i++) {
$('.li' + i).removeClass('active')
}
}
time++; // 转动次数加1
clearTimeout(rollTime);
rollTime = setTimeout(() => {
window.requestAnimationFrame(rolling); // 进行递归动画
}, speed);
let curIdx = time % 8;
let lastIdx = (time - 1) % 8;
if (curIdx === 0 && lastIdx === 7) curIdx = 8;
if (curIdx === 1 && lastIdx === 0) lastIdx = 8;
$('.li' + curIdx).addClass('active')
$('.li' + lastIdx).removeClass('active')
// time > times 转动停止
if (time > times) {
$('#award').text('恭喜您抽中了' + $('.li' + curIdx).text() + '!!!');
clearInterval(rollTime);
time = 0;
return;
}
}