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

冬奥大抽奖

介绍

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

准备

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

├── 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.jsrolling 函数,使用 jQuery 或者 js 完善此函数,达到以下效果:

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

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

规定

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

判分标准

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

JQ 实现

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
  $('.li' + String(time % 8 + 1)).addClass('active').siblings().removeClass('active')
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);

  // time > times 转动停止
  if (time > times) {
    clearInterval(rollTime);
    $('#award').text(`恭喜您抽中了${$('.li' + String(time % 8 + 1)).text()}!!!`)
    time = 0;
    return;
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值