web蓝桥杯2022省赛真题:冬奥大抽奖

代码及注释:

javascript 复制代码
// TODO:请完善此函数
function rolling() {
  time++; // 转动次数加1
  let roll = time % 8 == 0 ? 8 : time % 8   //循环取1~8
  roll == 1 ? document.querySelector(`.li8`).classList.remove('active') : document.querySelector(`.li${roll-1}`).classList.remove('active') //取消掉前一个元素的active类名
  document.querySelector(`.li${roll}`).classList.add('active')  //当前元素添加的active类名
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);
  // time > times 转动停止
  if (time > times) {
    clearInterval(rollTime);
    time = 0;
    document.querySelector('#award').innerHTML = document.querySelector(`.li${roll}`).innerHTML    // 把当前元素内容放入
    return;
  }
}

知识点:

1.一个周期的循环数值:对周期取余

2.添加类名:element.classList.add('类名')

3.删除类名:element.classList.remove('类名')

4.获取元素document.querySelector('')

相关推荐
深蓝AI7 小时前
Meta 开源用了八年的设计系统 astryx:连坐两天 GitHub 总榜第一,组件库开始写给 agent 的说明书
前端·人工智能
IT_陈寒8 小时前
Vue的watch把我坑惨了,原来要这样用才靠谱
前端·人工智能·后端
1-1=08 小时前
Vue 3 模板语
前端·javascript·vue.js
用户7610304473718 小时前
【转战智能眼镜开发】ROKID AIUI 小游戏 亚马逊标枪项目实战讲解
前端
风卿8 小时前
看着AI写代码太孤独了,来欣赏星云吧:一个DSH 装饰插件
前端·javascript
牧艺8 小时前
弹层不用再手算坐标了:CSS Anchor Positioning 从原理到可上线
前端·javascript·css
用户老李8 小时前
YOLO 目标检测自学教程 07:YOLOv3——多尺度预测
前端
moshuying9 小时前
ESP32 墨水屏金价牌(上):从点亮到把图片推过去
前端
李剑一9 小时前
别再抬杠,前端岗已经没了!无论前后端,我们最终都要成“全干”工程师
前端·面试
Highcharts.js9 小时前
Highcharts 仪表盘与速度仪图表库介绍
前端·信息可视化·仪表板·highcharts·图表开发·图表库·仪表可视化