当前位置: 首页 > news >正文

蓝桥杯(Web大学组)2022省赛真题:冬奥大抽奖

思路:

使用模板字符串,借助time的值选择添加或移除样式的盒子,由于盒子的类名最多为li9,所以要将time的值取余,且判断余数为0时,就取1,否则会获取空值报错

`.ul .li${time%9!=0?time%9:1}`

代码:
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//添加黄色样式的类document.querySelector(`.ul .li${time%9!=0?time%9:1}`).classList.add('active');clearTimeout(rollTime);rollTime = setTimeout(() => {//移除类document.querySelector(`.ul .li${time%9!=0?time%9:1}`).classList.remove('active');window.requestAnimationFrame(rolling); // 进行递归动画}, speed);// time > times 转动停止if (time > times) {clearInterval(rollTime);//将结果显示在上面$("#award").text(`${document.querySelector(`.ul .li${time%9!=0?time%9:1}`).innerText}`); //清空中奖信息time = 0;return;}
}

http://www.lryc.cn/news/299867.html

相关文章:

  • 单调队列 单调栈
  • Java基础-泛型
  • Vue 全组件 局部组件
  • 几个经典金融理论
  • c++语言max函数的使用
  • c++阶梯之类与对象(下)
  • 机器学习--K-近邻算法常见的几种距离算法详解
  • <网络安全>《30 网络信息安全基础(1)常用术语整理》
  • Git远程仓库的使用(Gitee)及相关指令
  • vscode +markdown 的安装和使用
  • Python爬虫之自动化测试Selenium#7
  • 快速学习Spring
  • c语言操作符(上)
  • vue3 可视化大屏自适应屏幕组件
  • SpringCloud入门概述
  • 刷题计划_冲绿名
  • 【微信小程序开发】小程序版的防抖节流应该怎么写
  • 单片机学习笔记---蜂鸣器播放提示音音乐(天空之城)
  • 软件实例分享,茶楼收银软件管理系统,支持计时计费商品销售会员管理定时语音提醒功能
  • clang前端
  • ARM:AI 的翅膀,还能飞多久?
  • 【C语言】常见字符串函数的功能与模拟实现
  • pyGMT初步使用
  • 神经网络 | CNN 与 RNN——深度学习主力军
  • thinkphp6入门(20)-- 如何上传图片、文件
  • 【Linux技术宝典】深入理解Linux基本指令:命令行新手指南
  • C++:Level1阶段测试
  • autojs自动化刷视频脚本
  • 鲁南制药“健康幸福中国年”主题航班,开启探寻健康与幸福的旅程
  • CISA知识点