蓝桥杯(Web大学组)2022国赛真题:水果消消乐

思路:

记录点击次数,点击次数为1时,记录点击下标(用于隐藏or消除)、点击种类,点击次数为2时,判断该下标所对应种类与第一次是否相同

相同:两个都visibility:hidden (占位)

不同:两个都display:none

遇到的bug:

一开始移除相同盒子之后会出现这个情况,以为是下标搞错了从而导致删成最后两个,后来转念一想,应该是因为每次删完后面所有盒子都会向前移动,所以不需要把外面盒子元素移除,只需要把外面盒子占位隐藏(使用visibility:hidden)

// TODO:请补充代码
function startGame() {//总分let score = document.querySelector('#score');   //存放分数的spanlet count = 0;  //分数let btn = document.querySelector('.btn');btn.style.opacity='0'//按钮隐藏let imgBox = document.querySelectorAll('.img-box');//装图片的盒子let img = document.querySelectorAll('img');//图片//题目的目标是图片出现后隐藏,一开始以为还要实现淡出淡入还有变大变小的效果,,(后面花太多时间没实现,去看了题目才发现。。。// img.forEach((item,index) => {//     item.style.transform = `transform: scale(${0})`//     item.style.transition = 'all 1s'// })img.forEach((item,index) => {item.style.display = 'block'// item.style.transform = `transform: scale(${1})`// item.style.opacity = 1//图片一开始出现后隐藏setTimeout(() =>{// item.style.transform = `transform: scale(${0})`item.style.display = 'none'},1000)// item.style.display = 'none'// item.style.transform = `transform: scale(${1})`})let cli = 0 //点击次数let preIndex = null  //上一次点击下标//遍历所有盒子for(let i = 0;i<imgBox.length;i++){let k = i   //记录所点击下标imgBox[i].addEventListener('click',()=>{img[i].style.display = 'block'  //图片出现cli++   //点击次数+1//判断点击次数,实现相应操作if(cli === 1){//记录第一次点击下标preIndex = k}if(cli === 2){//第二次判断是否相同if(img[i].alt === img[preIndex].alt){setTimeout(() =>{//相同:移除(×)// container.removeChild(imgBox[preIndex])// container.removeChild(imgBox[k])//这里如果直接移除dom元素,会导致后面所有盒子都向前移动//所以只需把外面盒子隐藏(占位)imgBox[preIndex].style.visibility = 'hidden'imgBox[k].style.visibility = 'hidden'},1000)//点击次数复原cli = 0//加2分count+=2score.innerHTML = count;}else{setTimeout(() =>{img[k].style.display = 'none';img[preIndex].style.display = 'none'},1000)//点击次数复原cli = 0//减2分count-=2score.innerHTML = count;}}})}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/675320.shtml

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

相关文章

【数据分享】1929-2023年全球站点的逐月平均风速(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、能见度等指标&#xff0c;说到气象数据&#xff0c;最详细的气象数据是具体到气象监测站点的数据&#xff01; 有关气象指标的监测站点数据&#xff0c;之前我们分享过1929-2023年全球气象站…

Redis事务和Redis管道

文章目录 1.Redis事务1.1 Redis事务是什么&#xff0c;能干嘛&#xff1f;1.2 Redis事务和数据库事务的差异1.3 Redis事务的相关命令 2.Redis管道2.1 Redis管道是什么2.2 管道与原生批量命令对比2.3 管道与事务对比2.4 使用管道注意事项 1.Redis事务 1.1 Redis事务是什么&…

ssh和sftp服务分离

目录 一、增加sftp的deamon二、增加sftp的service三、其他配套文件四、修改配置文件五、分别重启两个服务&#xff1a; 由于安全需要&#xff0c;客户这边想把sftp使用的端口与ssh使用的端口分开。 我们知道sftp没有自己的服务器守护进程&#xff0c;它需要依赖sshd守护进程来…

数学建模-灰色预测最强讲义 GM(1,1)原理及Python实现

目录 一、GM&#xff08;1&#xff0c;1&#xff09;模型预测原理 二、GM&#xff08;1&#xff0c;1&#xff09;模型预测步骤 2.1 数据的检验与处理 2.2 建立模型 2.3 检验预测值 三、案例 灰色预测应用场景&#xff1a;时间序列预测 灰色预测的主要特点是模型使用的…

django安装使用

Django 是一个高级的 Python Web 框架&#xff0c;用于构建安全和可维护的网站。以下是如何安装和使用 Django 的步骤。 一&#xff1a;安装 确保你安装了 Python 在 Django 3.x 中&#xff0c;官方支持 Python 3.6, 3.7, 3.8, 3.9, 和 3.10。你可以使用 python --version 或…

扩展说明: 指令微调 Llama 2

这篇博客是一篇来自 Meta AI&#xff0c;关于指令微调 Llama 2 的扩展说明。旨在聚焦构建指令数据集&#xff0c;有了它&#xff0c;我们则可以使用自己的指令来微调 Llama 2 基础模型。 目标是构建一个能够基于输入内容来生成指令的模型。这么做背后的逻辑是&#xff0c;模型如…

基于OpenCV灰度图像转GCode的斜向扫描实现

基于OpenCV灰度图像转GCode的斜向扫描实现基于OpenCV灰度图像转GCode的斜向扫描实现 引言激光雕刻简介OpenCV简介实现步骤 1.导入必要的库2. 读取灰度图像3. 图像预处理4. 生成GCode5. 保存生成的GCode6. 灰度图像斜向扫描代码示例 总结 系列文章 ⭐深入理解G0和G1指令&…

Python 深入理解 os 和 sys 模块

Python 深入理解 os 和 sys 模块 OS 介绍代码智能连接&#xff08;拼接&#xff09;路径创建目录展示&#xff08;列出目录&#xff09;删除文件重命名文件或目录 sys 介绍代码命令行参数处理 (sys.argv)标准输入输出重定向 (sys.stdin, sys.stdout, sys.stderr)&#xff1a;解…

数据结构 - 线索树

一、 为什么要用到线索二叉树&#xff1f; 我们先来看看普通的二叉树有什么缺点。下面是一个普通二叉树&#xff08;链式存储方式&#xff09;&#xff1a; 乍一看&#xff0c;会不会有一种违和感&#xff1f;整个结构一共有 7 个结点&#xff0c;总共 14 个指针域&#xff0c…

WordPress函数wptexturize的介绍及用法示例,字符串替换为HTML实体

在查看WordPress你好多莉插件时发现代码中使用了wptexturize()函数用来随机输出一句歌词&#xff0c;下面boke112百科就跟大家一起来学习一下WordPress函数wptexturize的介绍及用法示例。 WordPress函数wptexturize介绍 wptexturize( string $text, bool $reset false ): st…

Ubuntu搭建计算集群

计算机硬件和技术的发展使得高性能模拟和计算在生活和工作中的作用逐渐显现出来&#xff0c;无论是计算化学&#xff0c;计算物理和当下的人工智能都离不开高性能计算。笔者工作主要围绕计算化学和物理开展&#xff0c;亦受限于自身知识和技术所限&#xff0c;文中只是浅显地尝…

HarmonyOS class类对象基础使用

按我们之前的写法 就是 Entry Component struct Dom {p:Object {name: "小猫猫",age: 21,gf: {name: "小小猫猫",age: 18,}}build() {Row() {Column() {// ts-ignoreText(this.p.gf.name)}.width(100%)}.height(100%)} }直接用 Object 一层一层往里套 这…

C++进阶(十三)异常

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、C语言传统的处理错误的方式二、C异常概念三、异常的使用1、异常的抛出和捕获2、异常的重新…

java之spring AOP

AOP 面向切面编程&#xff0c; 切入点&#xff0c;就是你写的函数&#xff0c;装饰器&#xff0c;装饰到那些函数上 在哪里生效 引入依赖<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifact…

网络学习:数据链路层VLAN原理和配置

一、简介&#xff1a; VLAN又称为虚拟局域网&#xff0c;它是用来将使用路由器的网络分割成多个虚拟局域网&#xff0c;起到隔离广播域的作用&#xff0c;一个VLAN通常对应一个IP网段&#xff0c;不同VLAN通常规划到不同IP网段。划分VLAN可以提高网络的通讯质量和安全性。 二、…

MySQL进阶查询篇(5)-事务的隔离级别与应用

数据库事务(Transaction)是指作为一个单元执行的一系列操作&#xff0c;要么全部成功完成&#xff0c;要么全部失败回滚。数据库事务具有四个特性&#xff0c;即原子性(Atomicity)、一致性(Consistency)、隔离性(Isolation)和持久性(Durability)。本文将重点介绍MySQL数据库中的…

2024年华为OD机试真题-螺旋数字矩阵-Java-OD统一考试(C卷)

题目描述: 疫情期间,小明隔离在家,百无聊赖,在纸上写数字玩。他发明了一种写法: 给出数字个数n和行数m(0 < n ≤ 999,0 < m ≤ 999),从左上角的1开始,按照顺时针螺旋向内写方式,依次写出2,3...n,最终形成一个m行矩阵。 小明对这个矩阵有些要求: 1.每行数字的…

跟着小德学C++之TCP基础

嗨&#xff0c;大家好&#xff0c;我是出生在达纳苏斯的一名德鲁伊&#xff0c;我是要立志成为海贼王&#xff0c;啊不&#xff0c;是立志成为科学家的德鲁伊。最近&#xff0c;我发现我们所处的世界是一个虚拟的世界&#xff0c;并由此开始&#xff0c;我展开了对我们这个世界…

红队打靶练习:GLASGOW SMILE: 1.1

目录 信息收集 1、arp 2、nmap 3、nikto 4、whatweb 目录探测 1、gobuster 2、dirsearch WEB web信息收集 /how_to.txt /joomla CMS利用 1、爆破后台 2、登录 3、反弹shell 提权 系统信息收集 rob用户登录 abner用户 penguin用户 get root flag 信息收集…

flutter 国内源

Flutter 在中国由于网络原因&#xff0c;从官方默认的国外源下载Dart包和Flutter SDK可能会比较慢或者不稳定。为了加速依赖包的获取与Flutter SDK的安装&#xff0c;可以使用国内镜像源。以下是一些国内常用的Flutter和Dart包镜像源&#xff1a; 清华大学开源软件镜像站 Flu…