蓝桥第一期模拟总结

文章目录

  • 1.动态的 Tab 栏
  • 2.地球漫游
  • 3.迷惑的this
  • 4.燃烧卡路里
  • 5.魔法失灵了
  • 6.年龄统计

所有题目链接

1.动态的 Tab 栏

本题要实现一个tab栏固定效果,看见题目就想到css中的 position: fixed; 尝试了很久都没能实现效果,后来又想到了粘性定位 position: sticky,可见css基础还是差的很
所有的定位效果如下:

  • static
    HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
  • relative
    相对定位元素的定位是相对其正常位置。
  • fixed
    元素的位置相对于浏览器窗口是固定位置。
  • absolute
    绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于:
  • sticky
    粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
    它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

2.地球漫游

在这里插入图片描述
本题主要运用css3中的动画进行实现

@keyframes orbit { to { transform: rotate(360deg); } }

在这里插入图片描述
name:定义的动画名称
duration:完成所用周期
timing-function:动画的速度曲线
在这里插入图片描述
delay:规定动画何时开始
iteration-count:播放次数
在这里插入图片描述
direction:规定动画是否在下一周期逆向地播放。默认是 “normal”。
在这里插入图片描述
fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式

3.迷惑的this

本题主要涉及this方法调用以及事件添加

this.inputEl.addEventListener('input',(event) => this.handleInput(event))

dom事件完整列表

4.燃烧卡路里

在这里插入图片描述
本题主要业务是数组方法应用,数组排序和数组查找
arr.sort()

默认情况下,sort()会按照升序重新排列数组元素,即最小的值在前面,最大的值在后面。为此,sort()会在每一项上调用String()转型函数,然后比较字符串来决定顺序。即使数组元素都是数值,也会先把数组转换为字符串再比较、排序。

filter() 方法创建给定数组一部分的浅拷贝,其包含通过所提供函数实现的测试的所有元素。

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

5.魔法失灵了

在这里插入图片描述
本题涉及vue3响应式
需要把解构出来的数据换成响应式的

toRefs(data)

reactive丢失响应式原因:ref 定义数据(包括对象)时,都会变成 RefImpl(Ref 引用对象) 类的实例,无论是修改还是重新赋值都会调用 setter,都会经过 reactive 方法处理为响应式对象。
但是 reactive 定义数据(必须是对象),是直接调用 reactive 方法处理成响应式对象。如果重新赋值,就会丢失原来响应式对象的引用地址,变成一个新的引用地址,这个新的引用地

6.年龄统计

在这里插入图片描述
本题涉及的业务主要是对象的处理
把数组变为对象形式

//数组
var formArr =  [
{name: "张三", group: "1"},
{name: "李四", group: "1"},
{name: "王二", group: "2"},
{name: "麻子", group: "2"},
{name: "小明", group: "3"},
{name: "小红", group: "3"},
{name: "隔壁", group: "4"},
{name: "老王", group: "4"}
];//创建对象
let obj = {}//forEach循环
formArr.forEach(item => {if (!obj[item.group]) {obj[item.group] = [item]} else {obj[item.group].push(item)}})
console.log(obj) //控制台打印
  groupedPeople.value = groupByAge(data); //把请求回来的数据变成需要的数据格式// TODO: 设置 Echars X 轴数据 xAxisData 和 Y 轴数据 seriesDataconst xDataArr = Object.keys(groupedPeople.value);//获取key值const valueArr = Object.values(groupedPeople.value);const yDataArr = [];for (let i = 0; i < valueArr.length; i++) {yDataArr.push(valueArr[i].length);}//x 轴表示司龄,从小到大排序xAxisData.value = xDataArr;//y 轴表示司龄对应的人数个数seriesData.value = yDataArr;

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

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

相关文章

【.NET全栈】.net的微软API接口与.NET框架源码

文章目录 0 前言1 微软官方.net接口学习2 .NET框架源码总结 0 前言 如果浏览器打不开链接&#xff0c;换一个浏览器打开。 我是 打不开微软的链接&#xff0c;使用&#xff1a; 可以打开&#xff01;&#xff01;&#xff01; 1 微软官方.net接口学习 https://docs.microsoft…

【UE】UEC++获取屏幕颜色GetPixelFromCursorPosition()

目录 【UE】UE C 获取屏幕颜色GetPixelFromCursorPosition() 一、函数声明与定义 二、函数的调用 三、运行结果 【UE】UE C 获取屏幕颜色GetPixelFromCursorPosition() 一、函数声明与定义 创建一个蓝图方法库方法 GetPixelFromCursorPosition()&#xff0c;并给他指定UF…

面试就是这么简单,offer拿到手软(一)—— 常见非技术问题回答思路

面试系列&#xff1a; 面试就是这么简单&#xff0c;offer拿到手软&#xff08;一&#xff09;—— 常见非技术问题回答思路 面试就是这么简单&#xff0c;offer拿到手软&#xff08;二&#xff09;—— 常见65道非技术面试问题 文章目录 一、前言二、常见面试问题回答思路问…

Linux下的文件IO之系统IO

1. 知识点 读入写出&#xff0c;切记以我们程序为中心向文件或者别的什么东西读入写出&#xff08;输入流输出流&#xff09; 人话就是 文件向我们程序就是读入 程序向文件或者别的什么就是写出 2. open打开文件 open.c /****************************************************…

05_MySQL主从复制架构

任务背景 ##一、真实案例 某同学刚入职公司&#xff0c;在熟悉公司业务环境的时候&#xff0c;发现他们的数据库架构是一主两从&#xff0c;但是两台从数据库和主库不同步。询问得知&#xff0c;已经好几个月不同步了&#xff0c;但是每天会全库备份主服务器上的数据到从服务…

5G承载网和大客户承载的演进

文章目录 移动4/5G承载网联通和电信4/5G承载网M-OTN&#xff08;Metro-optimized OTN&#xff09;&#xff0c;城域型光传送网PeOTN&#xff08;packet enhanced optical transport network&#xff09;&#xff0c;分组增强型OTN板卡增强型PeOTN集中交叉型PeOTN VC-OTN&#x…

2023-12-01 LeetCode每日一题(找出叠涂元素)

2023-12-01每日一题 一、题目编号 2661. 找出叠涂元素二、题目链接 点击跳转到题目位置 三、题目描述 给你一个下标从 0 开始的整数数组 arr 和一个 m x n 的整数 矩阵 mat 。arr 和 mat 都包含范围 [1&#xff0c;m * n] 内的 所有 整数。 从下标 0 开始遍历 arr 中的每…

750mA Linear Charger with Power Path Management

一、General Description YHM2711 is a highly integrated, single-cell Li-ion battery charger with system power path management for space-limited portable applications. The full charger function features Trickle-charge, constant current fast charge and const…

Linux中的UDEV机制与守护进程

Linux中的UDEV守护进程 udev简介守护进程守护进程概念守护进程程序设计守护进程的应用守护进程和后台进程的区别 UDEV的配置文件自动挂载U盘 udev简介 udev是一个设备管理工具&#xff0c;udev以守护进程的形式运行&#xff0c;通过侦听内核发出来的uevent来管理/dev目录下的设…

CPU 使用率和负载Load

优质博文&#xff1a;IT-BLOG-CN 一、CPU 使用率 CPU使用率是 CPU处理非空闲任务所花费的时间百分比 。例如单核CPU 1s内非空闲态运行时间为0.8s&#xff0c;那么它的CPU使用率就是80%&#xff1b;双核CPU 1s内非空闲态运行时间分别为0.4s和0.6s&#xff0c;那么&#xff0c;…

MySQL之锁

MySQL之锁 锁是计算机在执行多线程或线程时用于并发访问同一共享资源时的同步机制&#xff0c;MySQL中的锁是在服务器层或者存储引擎层实现的&#xff0c;保证了数据访问的一致性与有效性 MySQL锁可以按模式分类为&#xff1a;乐观锁与悲观锁。 按粒度分可以分为全局锁、表级锁…

Pandas教程06:DataFrame.merge数据的合并处理

DataFrame.merge() 是 pandas 库中用于合并两个DataFrame数据的方法。该方法主要用于根据一个或多个键&#xff08;键可以是列名或索引&#xff09;将两个 DataFrame 连接在一起&#xff0c;这个过程类似于 SQL 中的 JOIN 操作。 #我的Python教程 #微信公众号&#xff1a;wdPy…

opencv知识库:利用cv2.resize()函数进行图像缩放

引言 在numpy知识库&#xff1a;深入理解numpy.resize函数和数组的resize方法中&#xff0c;小编较为详细地探讨了numpy的resize函数背后的机理。从结果来看&#xff0c;numpy.resize函数并不适合对图像进行缩放操作。而opencv中的resize函数虽然和numpy的resize函数同名&…

高校学生宿舍公寓报修维修生活管理系统 微信小程序b2529

本课题要求实现一套基于微信小程序宿舍生活管理系统&#xff0c;系统主要包括&#xff08;管理员&#xff0c;学生、维修员和卫检员&#xff09;四个模块等功能。 使用基于微信小程序宿舍生活管理系统相对传统宿舍生活管理系统信息管理方式具备很多优点&#xff1a;首先可以大幅…

AI与控制(二)从优化到最优控制,从动态规划到强化学习--1

优化问题&#xff0c;尤其静态优化问题&#xff0c;在控制系统设计中随处可见&#xff0c;例如基于燃油经济性和驾驶体验的多目标优化的汽车发动机 MAP 标定&#xff0c;基于性能指标优化的飞行器结构设计参数优化&#xff0c;以实验数据与模型输出匹配为目标的电池 RC 等效电路…

hbase Master is initializing

问题如下&#xff1a; ERROR: org.apache.hadoop.hbase.PleaseHoldException: Master is initializing ERROR: org.apache.hadoop.hbase.PleaseHoldException: Master is initializingat org.apache.hadoop.hbase.master.HMaster.checkInitialized(HMaster.java:2452)at org.…

C++二维数组名到底代表个啥

题目先导 int a[3][4]; 则对数组元素a[i][j]正确的引用是*(*(ai)j)先翻译一下这个*(*(ai)j)&#xff0c;即a后移i解引用&#xff0c;再后移j再解引用&#xff0c;这么看来a就应该是个二维数组&#xff0c;第一层存储行向量&#xff0c;一次解引用获得行向量的地址&#xff0c;…

PaddleOCR学习笔记

Paddle 功能特性 PP-OCR系列模型列表 https://github.com/PaddlePaddle/PaddleOCR#%EF%B8%8F-pp-ocr%E7%B3%BB%E5%88%97%E6%A8%A1%E5%9E%8B%E5%88%97%E8%A1%A8%E6%9B%B4%E6%96%B0%E4%B8%AD PP-OCR系列模型列表&#xff08;V4&#xff0c;2023年8月1日更新&#xff09; 配置文…

【阿里云】图像识别 智能分类识别 增加网络控制功能点(三)

一、增加网络控制功能 实现需求TCP 心跳机制解决Soket异常断开问题 二、Linux内核提供了通过sysctl命令查看和配置TCP KeepAlive参数的方法。 查看当前系统的TCP KeepAlive参数修改TCP KeepAlive参数 三、C语言实现TCP KeepAlive功能 四、setsockopt用于设置套接字选项的系…

基于STM32的四轴飞行器的控制系统(论文+源码)

1.系统设计 本次基于stm32单片机的四轴飞行器控制系统主要包括硬件和软件这两大部分&#xff0c;其中硬件部分是基于单片机的四轴飞行器控制系统实现的基石&#xff0c;其中主要STM32单片机负责整个系统功能的实现&#xff1b;NRF24L01无线模块负责对四轴飞行器的远程控制&…