实现滚动功能
在这一步中,你将使用 jQuery 或 JavaScript 在 index.js
中实现 rolling
函数。按照以下步骤完成此步骤:
-
在 index.js
中找到 rolling
函数。
-
完善 rolling
函数以满足以下要求:
- 当你点击开始按钮时,以
li1
的 class
元素为起点,奖品上的黄色背景(类 .active
)顺时针旋转。
- 当旋转停止时,在页面
id
为 award
的元素中显示中奖提示。中奖提示必须包含奖品名称,该名称必须与标题中的名称完全相同。
- 给出旋转间隔和旋转停止条件。
在与 rolling
函数同级的位置定义一个变量 num
,并将其默认值设置为 -1。将 num
以及 rolling
函数中的具体代码设置如下:
//...
// 待办事项:请完成此函数
let num = -1; // 旋转后所在的元素索引
function rolling() {
time++; // 旋转次数加1
clearTimeout(rollTime);
rollTime = setTimeout(() => {
window.requestAnimationFrame(rolling); // 执行递归动画
}, speed);
num++; // 索引加1
if (num > 8) {
// 如果索引大于7,重置为0,因为有8个奖品
num = 1;
}
// 给中奖的li添加active类
$(".li" + num)
.addClass("active")
.siblings()
.removeClass("active");
// 如果旋转次数大于总旋转次数,则停止旋转并清除定时器
if (time > times) {
clearInterval(rollTime);
console.log(num, "索引");
console.log($(".li" + num).text());
// 显示中奖信息
$("#award").text(`恭喜你中奖获得 ${$(".li" + num).text()}!!!`);
time = 0;
num = -1;
return;
}
}