蓝桥杯(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.mzph.cn/news/683417.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Dataframe型数据分析技巧汇总

Kaggle 如何针对少量数据集比赛的打法。 数据降维的几种方法 HF.075 | 时间序列趋势性分析方法汇总 机器学习必须了解的7种交叉验证方法(附代码) 这个图!Python也能一键绘制了,而且样式更多.. 散点图,把散点图画出花来…

Selenium折线图自动化测试

目录 获取折线图echarts实例 获取折线图实例锚点的坐标 通过echarts实例的getOption()方法获取坐标数据 将折线图坐标点转换为像素坐标值 整合折线图坐标数据 根据折线图坐标计算出锚点相对于浏览器中的坐标 计算canvas画布原点的坐标 计算折线图相对于浏览器的坐标 使用…

实现安全性

实现安全性 问题陈述 Chris希望阅读位于服务器上的电子邮件消息。他将自己的登录信息发送到服务器已进行验证。因此,Chris决定用基于表单的验证来验证他的登录信息。但是,他首先决定只用基于表单的验证测试登录页面 。 解决方案 要解决上述问题,Chris需要执行以下任务: 用…

2.14学习总结

1.区间嵌套 https://www.acwing.com/problem/content/description/5462/ 2.卡片 https://www.lanqiao.cn/problems/1443/learning/?page1&first_category_id1&second_category_id3&name%E5%8D%A1%E7%89%87 3.逆序对https://www.luogu.com.cn/problem/P1908 4.合唱…

不等式的证明之一

不等式的证明 证明下述不等式之一证明 证明下述不等式之一 设 a , b , c a,b,c a,b,c 是正实数&#xff0c;请证明下述不等式&#xff1a; 1 < a a 2 b 2 b b 2 c 2 c c 2 a 2 ≤ 3 2 1<\frac{a}{\sqrt{a^2 b^2}} \frac{b}{\sqrt{b^2 c^2}} \frac{c}{\sqrt{c…

从零开始做题:逆向 ret2shellcode jarvisoj level1

1.题目信息 BUUCTF在线评测 2.原理 篡改栈帧上的返回地址为攻击者手动传入的shellcode所在缓冲区地址&#xff0c;并且该区域有执行权限。 rootpwn_test1604:/ctf/work/9# gdb ./level1 GNU gdb (Ubuntu 7.11.1-0ubuntu1~16.5) 7.11.1 Copyright (C) 2016 Free Software Fou…

【C++航海王:追寻罗杰的编程之路】关于模板,你知道哪些?

目录 1 -> 泛型编程 2 -> 函数模板 2.1 -> 函数模板概念 2.2 -> 函数模板格式 2.3 -> 函数模板的原理 2.4 -> 函数模板的实例化 2.5 -> 函数参数的匹配原则 3 -> 类模板 3.1 -> 类模板的定义格式 3.2 -> 类模板的实例化 1 -> 泛型编…

分布式文件系统 SpringBoot+FastDFS+Vue.js【一】

分布式文件系统 SpringBootFastDFSVue.js【一】 一、分布式文件系统1.1.文件系统1.2.什么是分布式文件系统1.3.分布式文件系统的出现1.3.主流的分布式文件系统1.4.分布式文件服务提供商1.4.1.阿里OSS1.4.2.七牛云存储1.4.3.百度云存储 二、fastDFS2.1.fastDSF介绍2.2.为什么要使…

技术社区的三倍定律

技术社区的三倍定律&#xff0c;也被称为“技术社区三倍速定律”&#xff0c;是由CSDN社区的蒋涛提出的一个观察现象。这个定律基于这样一个观点&#xff1a;新技术的发展在开发者社区中的接纳速度&#xff0c;通常会比在大众中的接纳速度快三倍。这意味着&#xff0c;当新技术…

tuple的使用例题(三元组)

题目大意&#xff1a;给一定关系&#xff0c;判断后面给的跟前面的有无矛盾 一开始还在想一些构造的操作&#xff0c;后面实在想不出来看题解&#xff0c;就是暴力啊...... 但是这种数据结构tuple&#xff08;元组&#xff09;确实是没见过&#xff0c;于是写篇总结 见这篇ht…

【MySQL】外键约束的删除和更新总结

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-7niJLSFaPo0wso60 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

MyBatis之在mapper.xml文件中使用批量处理标签删除数据

MyBatis之_在xml中使用批量处理标签删除数据 文章目录 MyBatis之_在xml中使用批量处理标签删除数据1. Mybatis批量删除1.Controller2. service3. Mapper4. mapper.xml5. 传递的是List<String> 1. Mybatis批量删除 前端传递参数数组 var delIds [aaa,bbb,ccc];1.Controll…

六、Redis之数据持久化及高频面试题

6.1 数据持久化 官网文档地址&#xff1a;https://redis.io/docs/manual/persistence/ Redis提供了主要提供了 2 种不同形式的持久化方式&#xff1a; RDB&#xff08;Redis数据库&#xff09;&#xff1a;RDB 持久性以指定的时间间隔执行数据集的时间点快照。AOF&#xff0…

whisperspeech 英文TTS的实现

以下代码成功运行在 colab 中&#xff0c;需要修改运行时类型为 T4 GPU。 !pip install -Uqq WhisperSpeech def is_colab():try: import google.colab; return Trueexcept: return Falseimport torch # if not torch.cuda.is_available(): # if is_colab(): raise BaseEx…

浅谈Linux环境

冯诺依曼体系结构&#xff1a; 绝大多数的计算机都遵守冯诺依曼体系结构 在冯诺依曼体系结构下各个硬件相互配合处理数据并反馈结果给用户 其中控制器和运算器统称为中央处理器&#xff08;CPU&#xff09;&#xff0c;是计算机硬件中最核心的部分&#xff0c;像人类的大脑操控…

sql语句学习(二)--增删改

数据库的表结构 插入操作 添加操作分为分为单行添加和多行添加。 单行添加 语法格式①&#xff1a;INSERT INTO student(列表1,列表2,列表3,列表4,列表5,列表6) VALUES (值1,值1 , 值1 , 值1 , 值1 ,值1); INSERT INTO student(name,sex,age,sno,class_num) VALUES (hah,…

测试模型基线能力之有手就行PromptBench

以前我说过微软出的AI开源没几个有用的,deepspeed,Autogen算两个,今天我觉得有必要加一个promptbench 我相信我的读者,或多或少对模型训练是有概念的,再不济微调也是玩过的,同时我也相信百分之80以上的读者,是没有对模型进行基线能力评测的经验的 其实究其原因,方法论缺…

汽车零部件制造业MES系统解决方案

一、​汽车零部件行业现状 随着全球汽车产业不断升级&#xff0c;汽车零部件市场竞争日趋激烈&#xff0c;从上游的钢铁、塑料、橡胶等生产到下游的主机厂配套制造&#xff0c;均已成为全球各国汽车制造大佬战略目标调整的焦点&#xff0c;其意欲在汽车零部件行业快速开疆扩土&…

Days 32 ElfBoard GDT工作原理

GDT&#xff08;Gas Discharge Tubes&#xff09;&#xff0c;即陶瓷气体放电管。GDT是内部由一个或一个以上放电间隙内充有惰性气体构成的密闭器件。GDT电气性能取决于气体种类、气体压力、内部电极结构、制作工艺等因素。GDT可以承受高达数十甚至数百千 安培的浪涌电流冲击&a…

自定义Spring Boot Starter

引言 在Spring Boot的世界中&#xff0c;Starter 能够简化我们的开发过程&#xff0c;通过封装常见的依赖和自动配置。本篇旨在为有志于进一步简化Spring Boot应用配置的开发者提供指导&#xff0c;让我们一起创建一个自定义的Spring Boot Starter。 一、什么是 Spring Boot …