第十三届蓝桥杯省赛：冬奥大抽奖

冬奥大抽奖

介绍

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

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

目标

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

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

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

 思路

1.由于转动总次数超过li的个数，所以单独设了一个参数num

let num = 0;

2.num 和 time 是非同步的，当time>8时，num 会再一次轮回，从1开始，所以在num>8时，用if函数来限制：

if(num > 8){

num = 1;

}

3.要将选中的li 背景改为黄色，其余不变，可用addClass（）、removeClass（）、siblings（）语法

语法：siblings(selector)

        用法：$(".frist").siblings(“li”)

说明：查找兄弟节点，不包括自身元素

注：想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

$('.li' + num).addClass('active').siblings().removeClass('active');

4.获奖提示必须包含奖项的名称，该名称需与题目提供的名称完全一致。

所以获取选中的li的active类  的 text（），此时只有选中的li 有active标签

$('#award').text("恭喜您抽中：" + $('.active').text() + "!!!!");

5.最后注意：当time = 0时，num也等于0

num = 0；

 答案代码

let rollTime; // 定义定时器变量用来清除定时器
let time = 0; // 转动次数
let speed = 300; // 转动时间间隔
let times; // 总转动次数
let num =0;


// 开始按钮点击事件后开始抽奖
$("#start").on("click", function () {
  $("#award").text(""); //清空中奖信息
  times = parseInt(Math.random() * (20 - 30 + 1) + 20, 10); // 定义总转动次数，随机20-30次
  rolling();
});

// TODO：请完善此函数
function rolling() {
  time++; // 转动次数加1
  num++;
  console.log(time,num);

  if(num > 8){
    num = 1;
  }
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);
  $('.li' + num).addClass('active').siblings().removeClass('active');

  
  $('#award').text("恭喜您抽中：" + $('.active').text() + "!!!!");
  // time > times 转动停止
  if (time > times) {
    clearInterval(rollTime);
    time = 0;
    num = 0;
    return;
  }
}