1问题
第十三届蓝桥杯Web前端应用真题中的第五题《东奥大抽奖》要求通过完善完善js /index.js样式文件中的 TODO 部分。
目标要求：
1.点击开始后，以class 为 li1 的元素为起点，黄色背景(.active 类)在奖项上顺时针转动。
2.当转动停止后，将获奖提示显示到页面的id 为award元素中。获奖提示必须包含奖项的名称，该名称需与题目提供的名称完全一致。
3.转动时间间隔和转动停止条件已给出，请勿修改。
2方法
2.1解题思路
1.获取黄色背景效果的li标签，同时注意第8个li标签的取值。
2.去除所有li标签的active属性。
3.对黄色背景效果的li标签添加active属性。
4.在转动停止时，要将转动的值传给p标签。
5．最终效果图展示。
2.1完整代码
代码清单 1
| // TODO：请完善此函数 function rolling() { //获取标签，并且从.li1开始 let name = `.li${（time + 1 ） % 8}`; if (（time + 1 ） % 8 == 0) { name = `.li8`; } //去除所有active属性 $("li").removeClass('active'); //添加active样式 $(`${name}`).addClass('active'); time++; // 转动次数加1 clearTimeout(rollTime); rollTime = setTimeout(() => { window.requestAnimationFrame(rolling); // 进行递归动画 }, speed); // time > times 转动停止 if (time > times) { // 传值给p标签 let result = $('.active').text(); $("#award").text('恭喜您抽中了' + result + '!!!'); clearInterval(rollTime); time = 0; return; } } |
3结语
本次使用的是jQuery相关内容进行问题的解决。针对蓝桥杯真题中《灯的颜色变化》问题，关键点在于如何获取转到的标签值，其次对样式删减添加和在网页中显示则较为简单。同时对于jquery选择器的用法、设置内容和操作CSS等内容也有考察，当然对应的js也是考察了相似的内容。
