真题解析)"/>
【蓝桥杯web】2022年第十三届web大学组省赛:冬奥大抽奖(真题解析)
题目介绍:
蓝桥云课庆冬奥需要举行一次抽奖活动,我们一起做一个页面提供给云课冬奥抽奖活动使用。
准备:
开始答题前,需要先打开本题的项目文件夹,目录结构如下:
├── 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++; // 转动次数加1clearTimeout(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;}
}
成功完成!!
如有不合理的地方,欢迎各位大牛提出指正!
笔芯ღ( ´・ᴗ・` )
更多推荐
【蓝桥杯web】2022年第十三届web大学组省赛:冬奥大抽奖(真题解析)
发布评论