【蓝桥杯web】2022年第十三届web大学组省赛：冬奥大抽奖(真题解析)

本文链接：https://blog.youkuaiyun.com/weixin_52368011/article/details/129839999

文章描述了一个抽奖页面的问题，即点击开始按钮后，高亮旋转效果未出现，且中奖信息未显示。解决方案集中在index.js的rolling函数，需要使用jQuery更新li元素的active类以实现转动效果，并在停止转动后将中奖信息显示在id为award的元素中。已给出部分代码，需要完善以达到预期功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

题目介绍：

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

准备：

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

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

当前出现的问题是：

点击“开始”按钮没有出现高亮
旋转结束没有出现“中奖信息”

目标：

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

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

解题思路：

抽奖礼品是由8个<li>标签按顺时针排序，因此高亮也按照<li>标签依次进行，从1~8，一共8个，分别依次为<li class="li1">......<li class="li8">添加class="active"类，每次添加前，清除自身<li>标签外的class="active"类，从而实现转盘的顺时针高亮显示的效果。

当停止转动后，将<li>标签中的文本信息写入<p id="award"></p>标签内，从而显示中奖信息。

转盘旋转停止显示中奖信息：

// TODO：请完善此函数
function rolling() {
  time++; // 转动次数加1
  clearTimeout(rollTime);

  $(`.li${time%8?time%8:8}`).addClass('active').siblings().removeClass('active')//转盘轮转

  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);

  // time > times 转动停止
  if (time > times) {
    $('#award').text($(`.li${time%8?time%8:8}`).text()) //显示中奖信息
    clearInterval(rollTime);
    time = 0;
    return;
  }
}

成功完成！！

如有不合理的地方，欢迎各位大牛提出指正！

笔芯ღ( ´･ᴗ･` )