冬奥大抽奖

介绍

蓝桥云课庆冬奥需要举行一次抽奖活动，我们一起做一个页面提供给云课冬奥抽奖活动使用。

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

├── css
│   └── style.css
├── effect.gif
├── index.html
└── js├── index.js└── jquery.js

其中：

• css/style.css 是样式文件 。
• index.html 是主页面。
• js/jquery.js 是 jQuery 文件。
• js/index.js 是需要补充的 js 文件。
• effect.gif 是最终实现的效果图。

在浏览器中预览 index.html 页面效果如下：

目标

找到 index.js 中 rolling 函数，使用 jQuery 或者 js 完善此函数，达到以下效果：

1. 点击开始后，以 class 为 li1 的元素为起点，黄色背景（.active 类）在奖项上顺时针转动。
2. 当转动停止后，将获奖提示显示到页面的 id 为 award 元素中。获奖提示必须包含奖项的名称， 该名称需与题目提供的名称完全一致 。
3. 转动时间间隔和转动停止条件已给出，请勿修改。

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

规定

• 转动时间间隔和转动停止条件已给出，请勿修改。
• 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
• 请勿修改项目中提供的 id、class、函数名等名称，以免造成无法判题通过。

判分标准

• 本题完全实现题目目标得满分，否则得 0 分。

解答

我的解答

let rollTime; // 定义定时器变量用来清除定时器
let time = 0; // 转动次数
let speed = 300; // 转动时间间隔
let times; // 总转动次数// 开始按钮点击事件后开始抽奖
$("#start").on("click", function () {$("#award").text(""); //清空中奖信息times = parseInt(Math.random() * (20 - 30 + 1) + 20, 10); // 定义总转动次数，随机20-30次rolling();
});// TODO：请完善此函数
function rolling() {document.querySelector('.li1').classList.add('active')time++; // 转动次数加1clearTimeout(rollTime);rollTime = setTimeout(() => {window.requestAnimationFrame(rolling); // 进行递归动画}, speed);let liNum = 1if(time <= 8 ) liNum = time;else if(time >= 9 && time <= 17) liNum = time - 8;else if(time >= 18 && time <= 24) liNum = time - 16;else if(time >= 25&& time <= 36) liNum = time - 24;console.log(liNum,time);// 删除颜色
const list = document.querySelectorAll('li')
for(const imte of list) imte.classList.remove('active')// 添加document.querySelector(`.li${liNum}`).classList.add('active')// time > times 转动停止if (time > times) {clearInterval(rollTime);time = 0;return;}
}

问题一：对于liNum的控制不够灵活！！

因为这里的li的num只有1 ~ 8，但是这个time又一直是递增的，所以就需要进行重置操作

但是我这里仅仅只是从数学的角度考虑这个问题，虽然也能通过，但是这样的代码十分不好，一旦修改了对应的随机数，将需要添加代码逻辑

问题二：未使用jQuery对代码进行优化

因为我本人对于jQuery使用的较少，所以并没有直接一上手就开始用jQuery操作，而是采用JS的原生方法进行实现。存在优化空间

官方答案

let rollTime; // 定义定时器变量用来清除定时器
let time = 0; // 转动次数
let speed = 300; // 转动时间间隔
let times; // 总转动次数// 开始按钮点击事件后开始抽奖
$("#start").on("click", function () {$("#award").text(""); //清空中奖信息times = parseInt(Math.random() * (20 - 30 + 1) + 20, 10); // 定义总转动次数，随机20-30次rolling();
});// TODO：请完善此函数
let num = 0;
function rolling() {num ++;if(num >= 9){num = 1;}time++; // 转动次数加1clearTimeout(rollTime);rollTime = setTimeout(() => {window.requestAnimationFrame(rolling); // 进行递归动画}, speed);$('.li' + num).addClass('active').siblings().removeClass('active')console.log(num);// time > times 转动停止if (time > times) {clearInterval(rollTime);$('#award').text($('.active').text())time = 0;time = 0;return;}
}

巧妙点一：直接重置！！

上面我自己的代码对于这个num的控制十分粗糙，但是官方答案对于这个数的控制，直指本源！

我们仅需要让其自增，并在出界时及时拉回来即可（num = 1）

巧妙点二：通过siblings直接修改所有的兄弟节点

很巧妙的是，这里直接采用siblings删除兄弟节点，这样的代码会更加简洁、高效

虽然本质上就是循环删除，但是这里直接采用函数去remove还是值得学习的