当前位置: 首页 > 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;}
}

相关文章:

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

思路: 使用模板字符串,借助time的值选择添加或移除样式的盒子,由于盒子的类名最多为li9,所以要将time的值取余,且判断余数为0时,就取1,否则会获取空值报错 .ul .li${time%9!0?time%9:1} 代码…...

单调队列 单调栈

单调队列 一种下标单调,值也单调的队列。 以长度为 k k k 的区间内最大值为例,在一个数进队时,可以知道在他之前的肯定下标比他小,所以如果前面的数比他小,那么前面的数肯定不能成为最大值,直接出队,如果前面的数比他大,因为前面的数下标靠前,所以这个数有可能在以…...

Java基础-泛型

泛型: 泛型,就是允许在定义类、接口时通过一个标识表示类中某个属性的类型或者是某个方法的返回值或参数的类型。这个类型参数将在使用时(例如,继承或实现这个接口、创建对象或调用方法时)确定(即传入实际的…...

Vue 全组件 局部组件

一、组件定义和使用 1、全局组件 定义 <template> <div> <h1>This is a global component</h1> </div> </template> <script lang"ts"> </script> <style></style> 导入 全局组件在main.ts&#xff…...

几个经典金融理论

完整EA&#xff1a;Nerve Knife.ex4黄金交易策略_黄金趋势ea-CSDN博客 一、预期效用理论 预期效用理论是描述人们在做出决策时如何考虑风险和不确定性的一种理论。该理论最初由经济学家冯诺伊曼&#xff08;John von Neumann&#xff09;和奥斯卡摩根斯坦恩&#xff08;Oskar…...

c++语言max函数的使用

目录 头文件包含 使用语法 注意事项 头文件包含 首先&#xff0c;在使用std::max函数之前&#xff0c;需要包含头文件 <algorithm>。 #include <algorithm> 使用语法 std::max函数有两种重载形式&#xff0c;一种用于比较两个值&#xff0c;另一种用于比较多…...

c++阶梯之类与对象(下)

前文&#xff1a; c阶梯之类与对象&#xff08;上&#xff09;-CSDN博客 c阶梯之类与对象&#xff08;中&#xff09;-CSDN博客 c阶梯之类与对象&#xff08;中&#xff09;&#xff1c; 续集 &#xff1e;-CSDN博客 1. 再谈构造函数 1.1 构造函数体赋值 在创建对象时&a…...

机器学习--K-近邻算法常见的几种距离算法详解

文章目录 距离度量1 欧式距离(Euclidean Distance)2 曼哈顿距离(Manhattan Distance)3 切比雪夫距离 (Chebyshev Distance)4 闵可夫斯基距离(Minkowski Distance)5 标准化欧氏距离 (Standardized EuclideanDistance)6 余弦距离(Cosine Distance)7 汉明距离(Hamming Distance)【…...

<网络安全>《30 网络信息安全基础(1)常用术语整理》

1 肉鸡 所谓“肉鸡”是一种很形象的比喻&#xff0c;比喻那些可以随意被我们控制的电脑&#xff0c;对方可以是WINDOWS系统&#xff0c;也可以是UNIX/LINUX系统&#xff0c;可以是普通的个人电脑&#xff0c;也可以是大型的服务器&#xff0c;我们可以象操作自己的电脑那样来操…...

Git远程仓库的使用(Gitee)及相关指令

目录 1 远程仓库的创建和配置 1.1 创建远程仓库 1.2 设置SSH公钥 2 指令 2.1 git remote add 远端名称(一般为origin) 仓库路径 2.2 git remote 2.3 git push [-f] [--set-upstream] [远端名称 [本地分支名][:远端分支名]] 2.3 git clone url 2.4 git fetch 2.5 git p…...

vscode +markdown 的安装和使用

文章目录 前言一、vscode markdown 是什么&#xff1f;1.vscode是什么&#xff1f;2.markdown 是什么&#xff1f; 二、安装步骤1.下载2.安装 三、安装插件1.安装 Markdown All in One2.安装 Markdown Preview Enhanced3. Paste Image v1.0.44.LimfxCodeExv0.7.105.Code Spell …...

Python爬虫之自动化测试Selenium#7

爬虫专栏&#xff1a;http://t.csdnimg.cn/WfCSx 前言 在前一章中&#xff0c;我们了解了 Ajax 的分析和抓取方式&#xff0c;这其实也是 JavaScript 动态渲染的页面的一种情形&#xff0c;通过直接分析 Ajax&#xff0c;我们仍然可以借助 requests 或 urllib 来实现数据爬取…...

快速学习Spring

Spring 简介 Spring 是一个开源的轻量级、非侵入式的 JavaEE 框架&#xff0c;它为企业级 Java 应用提供了全面的基础设施支持。Spring 的设计目标是简化企业应用的开发&#xff0c;并解决 Java 开发中常见的复杂性和低效率问题。 Spring常用依赖 <dependencies><!-…...

c语言操作符(上)

目录 ​编辑 原码、反码、补码 1、正数 2、负数 3、二进制计算1-1 移位操作符 1、<<左移操作符 2、>>右移操作符 位操作符&、|、^、~ 1、&按位与 2、|按位或 3、^按位异或 特点 4、~按位取反 原码、反码、补码 1、正数 原码 反码 补码相同…...

vue3 可视化大屏自适应屏幕组件

首先定义了一个名叫ScreenContainerOptions的组件&#xff0c;需要传的参数如下 export type ScreenContainerOptions {width?: string | numberheight?: string | numberscreenFit?: boolean // 是否开启屏幕自适应&#xff0c;不然会按比例显示 } 组件的主要代码如下 …...

SpringCloud入门概述

1. 介绍 Spring Cloud 1.1 什么是 Spring Cloud Spring Cloud 是一个基于 Spring Boot 的微服务架构开发工具集&#xff0c;它为开发者提供了一系列开箱即用的工具和库&#xff0c;用于构建分布式系统中的微服务架构。Spring Cloud 提供了诸如服务发现、配置中心、负载均衡、…...

刷题计划_冲绿名

现在 rating 是 1104 准备刷 100道 1200的题&#xff0c;把实力提升到 1200 &#xff0c;上一个绿名 每一个分数段的题都写一百道&#xff0c;争取早日上蓝 现在 虽然 cf 里面显示写了一些这个分数段的题&#xff0c;但是自己训练的时候&#xff0c;其实是没有训练一道这个分…...

【微信小程序开发】小程序版的防抖节流应该怎么写

由于微信小程序与普通网页的开发、编译、运行机制都有所不同&#xff0c;在防抖节流的方法使用上也就需要我们做一些比较棘手的适配操作。常见的H5开发的防抖节流此处就不再分享了&#xff0c;网上有太多的教程&#xff0c;或者直接问那群AI即可。 OK&#xff0c;言归正传&…...

单片机学习笔记---蜂鸣器播放提示音音乐(天空之城)

目录 蜂鸣器播放提示音 蜂鸣器播放音乐&#xff08;天空之城&#xff09; 准备工作 主程序 中断函数 上一节讲了蜂鸣器驱动原理和乐理基础知识&#xff0c;这一节开始代码演示&#xff01; 蜂鸣器播放提示音 先创建工程&#xff1a;蜂鸣器播放提示音 把我们之前模块化的…...

软件实例分享,茶楼收银软件管理系统,支持计时计费商品销售会员管理定时语音提醒功能

软件实例分享&#xff0c;茶楼收银软件管理系统&#xff0c;支持计时计费商品销售会员管理定时语音提醒功能 一、前言 以下软件教程以 佳易王茶社计时计费管理系统软件V18.0为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 问&#xff1a;这个软…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...