冬奥大抽奖

介绍

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

准备

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

1
2
3
4
5
6
7
├── 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 是最终实现的效果图。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

1
2
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 完善此函数，达到以下效果：

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

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

规定

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

判分标准

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

总通过次数: 1086 | 总提交次数: 1114 | 通过率: 97.5%

难度: 中等 标签: 2022, 省赛, Web 前端, JavaScript

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
let rollTime; // 定义定时器变量用来清除定时器
let time = 0; // 转动次数
let speed = 300; // 转动时间间隔
let times; // 总转动次数

const list = document.querySelectorAll('.ul > li')
let count = 1

// 开始按钮点击事件后开始抽奖
$("#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);
  console.log('hello');
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 进行递归动画
    // 变动样式
    // 清除
    list.forEach(item => item.classList.remove('active'))
    // 添加
    list.forEach(item => {
      if(item.classList.contains(`li${count}`)) {
        item.classList.add('active')
      }
    })
    count++
    if (count === 9) {
      count = 1
    }
  }, speed);

  // time > times 转动停止
  if (time > times) {
    clearInterval(rollTime);
    time = 0;
    let result = ''
    list.forEach(item => {
      if (item.classList.contains('active')) {
        result = item.innerText
      }
    })
    document.getElementById('award').innerText = result
    return;
  }
}