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('')

相关推荐
龙在天3 分钟前
vue 请求接口快慢 覆盖 解决方案
前端
可子是我的小猫12 分钟前
【JS】模块(一)
javascript
跟橙姐学代码20 分钟前
Python 类的正确打开方式:从新手到进阶的第一步
前端·python·ipython
Jagger_20 分钟前
SonarQube:提升代码质量的前后端解决方案
前端·后端·ai编程
Becauseofyou13723 分钟前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js
菜市口的跳脚长颌24 分钟前
前端大文件上传全攻略(秒传、分片上传、断点续传、并发控制、进度展示)
前端
不一样的少年_26 分钟前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js
草履虫建模30 分钟前
在 RuoYi 中接入 3D「园区驾驶舱」:Vue2 + Three.js + Nginx
运维·开发语言·javascript·spring boot·nginx·spring cloud·微服务
云枫晖33 分钟前
JS核心知识-数据转换
前端·javascript
xuyanzhuqing34 分钟前
代码共享方案-多仓库合并单仓库
前端