当前位置：首页 > news >正文

【蓝桥杯Web】2022年十三届省赛大学组真题冬奥大抽奖介绍蓝桥云课庆冬奥需要举行一次抽奖活动，我们一起做一个页面提供给云课冬奥抽奖活动使用。

news 来源：原创 2025/6/20 20:59:13

介绍

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

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
├── 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 是最终实现的效果图。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9791/05.zip && unzip 05.zip && rm 05.zip
在浏览器中预览 index.html 页面效果如下：

目标

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

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

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

effect.gif图如下所示。

规定

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

判分标准

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

答案：

解题思路：

移除所有li元素的active类。
根据转动次数time获取当前转动到的li，给当前li添加active类。
因为总共有8个li，且li的class设置的正好是转盘顺时针转动时.li加对应的序号：即.li1是第一次转动到的.li4是第四次转动到的 .li8是第八次转动到的，转到第九次时回到.li1。
所以我们可以利用转动次数对8取余来获取对应的DOM元素li 。
但time是8的整数倍时，按照逻辑我们需要获取.li8，但这时time对8取余等于0，所以这种情况我们需要单独讨论，获取到当前li后，再给当前li添加active类。
当转动停止，即当time===times的时候，给award元素显示当前li元素的内容加上字符串拼接就可以了。

// TODO：请完善此函数
function rolling() {
  time++; // 转动次数加1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    $("[class^=li]").removeClass('active')
    $(`.li${time%8?time%8:8}`).addClass('active')
    if(time===times){
      $('#award').html("恭喜您抽中了"+$(`.li${time%8?time%8:8}`).html()+"!!!")
    }
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);

HTML代码：

<!DOCTYPE html>
<html>
  <script src="./js/jquery.js"></script>

  <head>
    <meta charset="UTF-8" />
    <title>冬奥大抽奖</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <p id="award"></p>
    <div class="ul">
      <li class="li1">洗衣机</li>
      <li class="li2">蓝桥抱枕</li>
      <li class="li3">蓝桥公仔</li>
      <li class="li8">冰墩墩</li>
      <li id="start">开始</li>
      <li class="li4">雪融融</li>
      <li class="li7">html5进阶</li>
      <li class="li6">钥匙扣</li>
      <li class="li5">会员15天</li>
    </div>
    <script src="./js/index.js"></script>
  </body>
</html>

JavaScript代码：

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() {
  time++; // 转动次数加1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    $("[class^=li]").removeClass('active')
    $(`.li${time%8?time%8:8}`).addClass('active')
    if(time===times){
      $('#award').html("恭喜您抽中了"+$(`.li${time%8?time%8:8}`).html()+"!!!")
    }
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);

  // time > times 转动停止
  if (time > times) {
    clearInterval(rollTime);
    time = 0;
    return;
  }
}