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

API-元素尺寸与位置

news 文章来源：https://blog.csdn.net/m0_64105917/article/details/140010604 2024/7/6 17:41:42

学习目标：

  • 掌握元素尺寸与位置

学习内容：

  1. 元素尺寸与位置
  2. 仿京东固定导航栏案例
  3. 实现bilibili点击小滑块移动效果

元素尺寸与位置：

  • 使用场景：

前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。

简单说，就是通过js的方式，得到元素在页面中的位置。

这样我们可以做，页面滚动到这个位置，就可以做某些操作，省去计算了。
在这里插入图片描述

  • 获取宽高：

获取元素的自身宽高、包含元素自身设置的宽高、padding、border 。

offsetWidth和offsetHeight。

获取出来的是数值，方便计算。

注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0。

  • 获取位置：
  1. offsetLeft和offsetTop 注意是只读属性。

获取元素距离自己定位父级元素的左、上距离。

在这里插入图片描述

 <title>offsetLeft</title><style>div {position: relative;width: 200px;height: 200px;background: pink;margin: 100px;}p {width: 100px;height: 100px;background: purple;margin: 50px;}</style>
</head><body><div><p></p></div><script>const div = document.querySelector('div')const p = document.querySelector('p')// console.log(div.offsetLeft)//检测盒子的位置  最近一级带有定位的祖先元素console.log(p.offsetLeft)</script></body>
  1. element.getBoundingClientRect()

方法返回元素大小及其相对于视口的位置。

在这里插入图片描述

 <title>获取元素大小位置的另外方法</title><style>body {height: 2000px;}div {width: 200px;height: 200px;background: pink;margin: 100px;}</style>
</head><body><div></div><script>const div = document.querySelector('div')console.log(div.getBoundingClientRect())</script></body>
  • 小结

  1. offsetWidth和offsetHeight是得到元素什么的宽高？

     内容 + padding + border

  2. offsetTop和offsetLeft得到位置以谁为准？

    带有定位的父级
如果都没有则以文档左上角为准
属性作用说明
scrollLeft和scrollTop 被卷去的头部和左侧配合页面滚动来用，可读写
clientWidth和clientHeight获得元素宽度和高度不包含border、margin，滚动条 ，用于js获取元素大小，只读属性
offsetWidth和offsetHeight获得元素宽度和高度包含border、margin，滚动条，只读
offsetTop和offsetLeft获取元素距离自己定位父级元素的左、上距离获取元素位置的时候使用，只读属性

仿京东固定导航栏案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习-仿京东固定导航栏案例</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.content {overflow: hidden;width: 1000px;height: 3000px;background-color: pink;margin: 0 auto;}.backtop {display: none;width: 50px;left: 50%;margin: 0 0 0 505px;position: fixed;bottom: 60px;z-index: 100;}.backtop a {height: 50px;width: 50px;background: url(./images/bg2.png) 0 -600px no-repeat;opacity: 0.35;overflow: hidden;display: block;text-indent: -999em;cursor: pointer;}.header {position: fixed;top: -80px;left: 0;width: 100%;height: 80px;background-color: purple;text-align: center;color: #fff;line-height: 80px;font-size: 30px;transition: all .3s;}.sk {width: 300px;height: 300px;background-color: skyblue;margin-top: 500px;}</style>
</head><body><div class="header">我是顶部导航栏</div><div class="content"><div class="sk">秒杀模块</div></div><div class="backtop"><img src="./images/close2.png" alt=""><a href="javascript:;"></a></div><script>const sk = document.querySelector('.sk')const header = document.querySelector('.header')//1.页面滚动事件window.addEventListener('scroll', function () {//当页面滚动到 秒杀模块的时候，就改变头部的top值//页面被卷去的头部 >= 秒杀模块的位置  offsetTopconst n = document.documentElement.scrollTop// if (n >= sk.offsetTop) {//   header.style.top = 0// } else {//   header.style.top = '-80px'// }header.style.top = n >= sk.offsetTop ? 0 : '-80px'})</script></body></html>

实现bilibili点击小滑块移动效果：

<style>.line {transition: all .3s;}</style><script>//1.获取父元素 添加事件委托const list = document.querySelector('.tabs-list')const line = document.querySelector('.line')//2.给a注册事件list.addEventListener('click', function (e) {//判断点击的是aif (e.target.tagName === 'A') {// console.log(11)//得到当前链接的  offsetLeft// console.log(e.target.offsetLeft)//让line 盒子来进行移动line.style.transform = `translateX(${e.target.offsetLeft}px)`}})</script>

相关文章：

API-元素尺寸与位置

学习目标&#xff1a; 掌握元素尺寸与位置 学习内容&#xff1a; 元素尺寸与位置仿京东固定导航栏案例实现bilibili点击小滑块移动效果 元素尺寸与位置&#xff1a; 使用场景&#xff1a; 前面案例滚动多少距离&#xff0c;都是我们自己算的&#xff0c;最好是页面滚动到某个…...

编程日记 2024/7/3 15:47:08

C语言中的基础指针操作

在C语言中&#xff0c;指针是一个非常重要的概念&#xff0c;它提供了直接访问内存地址的能力。指针变量用于存储内存地址&#xff0c;而不是数据值&#xff0c;在某种意义上和门牌号具有相似含义&#xff1a;指针是一个变量&#xff0c;其存储的是另一个变量的内存地址&#x…...

编程日记 2024/7/3 15:44:05

LabVIEW环境下OCR文字识别的实现策略与挑战解析

引言 在自动化测试领域&#xff0c;OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;技术扮演着重要角色&#xff0c;它能够将图像中的文字转换成机器可编辑的格式。对于使用LabVIEW约5个月&#xff0c;主要进行仪器控制与数据采集的你而言…...

编程日记 2024/7/3 15:43:03

中英双语介绍美国的州：堪萨斯州（Kansas）

中文版 堪萨斯州简介 堪萨斯州&#xff08;Kansas&#xff09;位于美国中部&#xff0c;以其广阔的平原、丰富的农业资源和多样的文化遗产而著称。以下是对堪萨斯州的详细介绍&#xff0c;包括其地理位置、人口、经济、教育、文化和主要城市。 地理位置 堪萨斯州位于美国中…...

编程日记 2024/7/3 15:42:02

信息收集---端口服务信息收集

1. 什么是端口 是设备与外界通讯交流的出口。端口可分为虚拟端口和物理端口&#xff0c;其中虚拟端口指计算机内部或交换机路由器内的端口&#xff0c;不可见。例如计算机中的80端口、21端口、23端口等。物理端口又称为接口&#xff0c;是可见端口&#xff0c;计算机背板的RJ45…...

编程日记 2024/7/3 15:36:56

Python知识点背诵手册，超详细知识梳理

一、手册介绍 《Python知识点背诵手册》是一份详尽的Python学习资料&#xff0c;旨在帮助学习者系统地掌握Python语言的基础知识和进阶技能。该手册将Python的所有关键语法和概念进行了精炼的总结&#xff0c;并以易于理解和记忆的方式呈现。以下是手册的主要特点和内容概述&a…...

编程日记 2024/7/3 15:35:55

【Pytorch实用教程】如何在多个GPU上使用分布式数据并行进行训练模型

文章目录 1. 代码（可直接运行，含随机生成的训练数据）2. 代码的详细解释2.1. 导入必要的库和模块2.2. 设置每个进程的初始设置2.3. 随机生成数据集类 `RandomDataset`2.4. 训练函数 `train`1. 代码（可直接运行，含随机生成的训练数据） 以下是一个基于PyTorch的多GPU分布式…...

编程日记 2024/7/3 15:33:51

PIL,OpenCV,Pytorch处理图像时的通道顺序(颜色,长宽深)

项目颜色通道顺序长宽通道顺序数据类型取值范围PILRGBHWCndarray0-255 (byte)OpenCVBGRHWCndarray0-255 (byte)PyTorchRGB/BGR (取决于如何读取)(N)CHWtensor0-1 (float, 标准化后); 0-255 (int, 未标准化) 注意以下几点&#xff1a; 颜色通道顺序&#xff1a;PIL默认使用RGB顺…...

编程日记 2024/7/3 15:32:50

经纬恒润亮相2024世界智能产业博览会

近日&#xff0c;以“智行天下 能动未来”为主题的2024世界智能产业博览会&#xff08;以下简称“智博会”&#xff09;在国家会展中心&#xff08;天津&#xff09;成功举办。本次智博会上&#xff0c;经纬恒润自主研发的汽车电子产品联合天津&#xff08;西青&#xff09;国家…...

编程日记 2024/7/3 15:29:46

Python序列化和反序列化

一.序列化和反序列化 在Python中&#xff0c;序列化&#xff08;Serialization&#xff09;和反序列化&#xff08;Deserialization&#xff09;是处理对象数据的过程&#xff0c;主要用于对象的存储或网络传输。 序列化&#xff08;Serialization&#xff09; 序列化是将Pyth…...

编程日记 2024/7/3 15:28:45

Stream toArray 好过collect

toArray 比collect 更好用&#xff0c;这样就不需要判断Null。 if(_user.getUserRole()!null) {_user.setRole(_roleList.stream().filter(_e->_e.getRoleId()_user.getUserRole()).toArray(Role[]::new)[0]); } if(_user.getUserRole()!null) {_user.setRole(_roleList.s…...

编程日记 2024/7/3 15:27:44

qt/c++/mysql教务管理系统

简介 qt/c/mysql教务管理系统 学生端&#xff0c;教师端&#xff0c;管理员端 演示 qt/c/mysql教务管理系统 源码获取 printf("白嫖勿扰,需要的加v%s","ywj17347418171");...

编程日记 2024/7/3 15:26:43

Echarts公共方法

Vue引入Echarts install 1.安装Echartsnpm install echarts --save 2.项目全局引入形式--#main.js 全局引入形式import * as echarts from "echarts"Vue.prototype.$echarts echarts 公共方法JS /*** author: wangjie* description: 通用echarts图表封装* date: …...

编程日记 2024/7/3 15:25:42

鸿蒙学习（二）

文章目录 1、弹窗2、走马灯&#xff08;实现轮播图效果&#xff09;3、注解6、多选框、单选框7、Stack8、TextTimer9、DatePicker 1、弹窗 显示提示信息或者用于用户交互 导入模块 prompt 接口 showToast:显示toast showDialog:显示对话框 showContextMenu:显示上下文菜单 sh…...

编程日记 2024/7/3 15:24:41

企业机构营销目前106短信群发还有用吗？此文告诉你该如何抉择！

在当今竞争激烈的企业营销环境中&#xff0c;106短信群发平台依然是众多企业机构青睐的营销工具之一。尽管互联网技术的发展带来了多样化的沟通方式&#xff0c;但106短信群发凭借其直达性强、成本低廉、覆盖广泛等优势&#xff0c;仍然保持着不错的营销效果。然而&#xff0c;…...

编程日记 2024/7/3 15:23:39

DJYGUI AI低代码图形编程开发平台：开启嵌入式软件图形编程新纪元

在科技高速发展的当今时代&#xff0c;软件开发行业对创新和高效的需求日益增长。DJYGUI AI低代码图形编程开发平台的出现&#xff0c;为智能屏、物联屏、串口屏等嵌入式显示设备领域带来了全新的机遇。该平台由都江堰操作系统 AI 代码自动生成平台研发&#xff0c;具有显著的优…...

编程日记 2024/7/3 15:21:36

为什么不能在foreach中删除元素

文章目录 快速失败机制&#xff08;fail-fast&#xff09;for-each删除元素为什么报错原因分析逻辑分析 如何正确的删除元素remove 后 breakfor 循环使用 Iterator 总结 快速失败机制&#xff08;fail-fast&#xff09; In systems design, a fail-fast system is one which i…...

编程日记 2024/7/3 15:20:34

python学习-tuple及str

为什么需要元组 定义元组 元组的相关操作 元组的相关操作 - 注意事项 元组的特点 字符串 字符串的下标&#xff08;索引&#xff09; 同元组一样&#xff0c;字符串是一个&#xff1a;无法修改的数据容器。 如果必须要修改字符串&#xff0c;只能得到一个新的字符串&#xff…...

编程日记 2024/7/3 15:19:33

Python深度理解系列之【排序算法——冒泡排序】

读者大大们好呀&#xff01;&#xff01;!☀️☀️☀️ &#x1f440;期待大大的关注哦❗️❗️❗️ &#x1f680;欢迎收看我的主页文章➡️木道寻的主页 文章目录 &#x1f525;前言&#x1f680;冒泡排序python实现算法实现图形化算法展示 ⭐️⭐️⭐️总结 &#x1f525;前…...

编程日记 2024/7/3 15:18:32

边界框在目标检测中的作用与应用

目标检测是计算机视觉领域的核心任务之一&#xff0c;旨在从图像或视频中识别和定位感兴趣的目标。边界框&#xff08;Bounding Box&#xff09;是目标检测中常用的一种表示方法&#xff0c;用于确定目标在图像中的确切位置。本文将详细探讨边界框的概念、它在目标检测中的角色…...

编程日记 2024/7/3 15:16:30

linux 环境报错：Peer reports incompatible or unsupported protocol version

出现问题的原因&#xff1a; curl 不兼容或不支持的协议版本。 解决方案&#xff1a; yum update -y nss curl libcurl如此继续之前的操作即可。...

编程日记 2024/7/3 15:15:29

深入解析：Java爬虫的本质是什么？

深入解析&#xff1a;Java爬虫的本质是什么&#xff1f; 引言&#xff1a; 随着互联网的快速发展&#xff0c;获取网络数据已成为许多应用场景中的重要需求。而爬虫作为一种自动化程序&#xff0c;能够模拟人类浏览器的行为&#xff0c;从网页中提取所需信息&#xff0c;成为了…...

编程日记 2024/7/3 15:12:26

【Matlab 六自由度机器人】机器人动力学之推导拉格朗日方程（附MATLAB机器人动力学拉格朗日方程推导代码）

【Matlab 六自由度机器人】机器人动力学概述 近期更新前言正文一、拉格朗日方程的推导1. 单自由度系统2. 单连杆机械臂系统3. 双连杆机械臂系统 二、MATLAB实例推导1. 机器人模型的建立2. 动力学代码 总结参考文献 近期更新 【汇总】 【Matlab 六自由度机器人】系列文章汇总 …...

编程日记 2024/7/3 15:09:23

线下生鲜蔬果店做小程序有什么方法

生鲜蔬果是生活所需&#xff0c;大小商家众多&#xff0c;零售批发各种经营模式&#xff0c;小摊贩或是超市门店都有着目标客户或准属性群体。竞争和获客转化也促进着商家寻找客源和加快线上进程。 尤其是以微信社交为主的私域场景&#xff0c;普客/会员都需要精细化管理营收和…...

编程日记 2024/7/3 15:08:22

几种linux开机自启脚本的方法

几种linux开机自启脚本的方法 1. 脚本添加到init.d目录中2. 创建服务service&#xff08;推荐&#xff09;3. /etc/profile & /etc/profile.d&#xff08;不推荐&#xff09;4. /etc/rc.local 本文以启动jenkins节点为例&#xff0c;需要持久连接&#xff0c;实现开机自启 …...

编程日记 2024/7/3 15:07:21

Qt开发笔记：Qt3D三维开发笔记（一）：Qt3D三维开发基础概念介绍

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://blog.csdn.net/qq21497936/article/details/140059315 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、O…...

编程日记 2024/7/3 15:06:20

Firewalld 防火墙基础

Firewalld 防火墙基础 一、Firewalld概述firewalld 简介firewalld 和 iptables 的关系firewalld 与 iptables service 的区别 二、Firewalld 网络区域区域介绍Firewalld数据处理流程 三、Firewalld 防火墙的配置方法firewall-config 图形工具“区域”选项卡“服务”选项卡改变防…...

编程日记 2024/7/3 15:03:15

针对 Windows 10 的功能更新，版本 22H2 - 错误 0xc1900204

最近想帮女朋友生win11发现她电脑安装更新总是卡到安装%10这里失败 原来是安装路径被修改过了&#xff0c;改回c盘 win R → 输入regedit 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion...

编程日记 2024/7/3 15:02:13

goframe框架规范限制（but it should be named with “Res“ suffix like “XxxRes“）

背景&#xff1a; 首页公司最近要启动一个项目&#xff0c;公司主要业务是用java开发的&#xff0c;但是目前这个方向的项目&#xff0c;公司要求部署在主机上&#xff0c;就是普通的一台电脑上&#xff0c;电脑配置不详&#xff0c;还有经常开关机&#xff0c;所以用java面临…...

编程日记 2024/7/3 14:59:10

格式化选NTFS还是exFAT 格式化NTFS后Mac不能用怎么办 移动硬盘格式化ntfs和exfat的区别

面对硬盘、U盘或移动硬盘的格式化决策&#xff0c;NTFS与exFAT作为主流的文件系统&#xff0c;用户在选择时可以根据它们的不同特点来选择适用场景。下面我们来看看格式化选NTFS还是exFAT&#xff0c;格式化NTFS后Mac不能用怎么办的相关内容。 一、格式化选NTFS还是exFAT 在数…...

编程日记 2024/7/3 14:57:08

中国桥梁空间分布数据

2020年中国桥梁空间分布数据&#xff0c;共包含102000余条数据。 数据属性表包括&#xff1a;地级市名、区县名、桥梁名称和经纬度。有shp和EXCEl两种格式数据。目前暂没有广西、广东和台湾三个省份数据。...

编程日记 2024/7/3 14:56:07

14-15 为什么我们现在对阅读如此难以接受

写出来感觉很奇怪&#xff0c;但最近我感觉自己失去了阅读能力。长篇文本对我来说尤其具有挑战性。句子很难读完。更别提章节了。章节有很多段落&#xff0c;而段落又由许多句子组成。 啊。 即使在极少数情况下&#xff0c;我读完了一章&#xff0c;下一页上已经有另一章等着…...

编程日记 2024/7/3 14:54:05

经典的卷积神经网络模型 - ResNet

经典的卷积神经网络模型 - ResNet flyfish 2015年&#xff0c;何恺明&#xff08;Kaiming He&#xff09;等人在论文《Deep Residual Learning for Image Recognition》中提出了ResNet&#xff08;Residual Network&#xff0c;残差网络&#xff09;。在当时&#xff0c;随着…...

编程日记 2024/7/3 14:53:03

【Git 学习笔记】1.3 Git 的三个阶段

1.3 Git 的三个阶段 由于远程代码库后续存在新的提交&#xff0c;因此实操过程中的结果与书中并不完全一致。根据书中 HEAD 指向的 SHA-1&#xff1a;34acc370b4d6ae53f051255680feaefaf7f7850d&#xff0c;可通过以下命令切换到对应版本&#xff0c;并新建一个 newdemo 分支来…...

编程日记 2024/7/3 14:52:02

华为DCN之：SDN和NFV

1. SDN概述 1.1 SDN的起源 SDN&#xff08;Software Defined Network&#xff09;即软件定义网络。是由斯坦福大学Clean Slate研究组提出的一种新型网络创新架构。其核心理念通过将网络设备控制平面与数据平面分离&#xff0c;从而实现了网络控制平面的集中控制&#xff0c;为…...

编程日记 2024/7/3 14:51:01

黑马头条-数据管理平台

目录 项目准备 验证码登录 验证码登录-流程 token 的介绍 个人信息设置和 axios 请求拦截器 axios 响应拦截器和身份验证失败 优化-axios 响应结果 发布文章-富文本编辑器 项目准备 技术&#xff1a; • 基于 Bootstrap 搭建网站标签和样式 • 集成 wangEditor 插件…...

编程日记 2024/7/3 14:50:01

API Object设计模式

API测试面临的问题 API测试由于编写简单&#xff0c;以及较高的稳定性&#xff0c;许多公司都以不同工具和框架维护API自动化测试。我们基于seldom框架也积累了几千条自动化用例。 •简单的用例 import seldomclass TestRequest(seldom.TestCase):def test_post_method(self…...

编程日记 2024/7/3 14:48:59

Python 爬虫：多进程，多线程爬虫＜提高爬取效率＞

关于多进程&#xff0c;多线程的知识&#xff0c;请自行查询资料补充 ~~~~~~~~~~~ 使用多进程&#xff1a; 在python中&#xff0c;使用多进程需要先导包&#xff1a; from threding import Threaddef work(name):for i in range(1000):print(f"我是线程&#xff1a;{n…...

编程日记 2024/7/3 14:42:54

什么是上拉电阻器？上拉和下拉电阻的典型应用

什么是上拉电阻器&#xff1f; 上拉电阻是逻辑电路中使用的电阻&#xff0c;用于确保引脚在所有条件下具有明确定义的逻辑电平。提醒一下&#xff0c;数字逻辑电路有三种逻辑状态&#xff1a;高、低和浮动&#xff08;或高阻抗&#xff09;。当引脚未被拉至高或低逻辑电平&…...

编程日记 2024/7/3 14:41:53

centos7安装python3.10

文章目录 1. 安装依赖项2. 下载Python 3.10源码3. 解压源码并进入目录4. 配置安装选项5. 编译并安装Python6. 验证安装7.创建软连接8. 安装pip39. 换源 1. 安装依赖项 sudo yum groupinstall -y "Development Tools" sudo yum install -y openssl-devel bzip2-devel…...

编程日记 2024/7/3 14:40:52

QT事件处理及实例（鼠标事件、键盘事件、事件过滤）

这篇文章通过鼠标事件、键盘事件和事件过滤的三个实例介绍事件处理的实现。 鼠标事件及实例 鼠标事件包括鼠标的移动、按下、松开、单击和双击等。 创建一个MouseEvent项目&#xff0c;通过项目介绍如何获得和处理鼠标事件。程序效果如下图所示。 界面布局代码如下&#xff…...

编程日记 2024/7/3 14:39:51

职场新人必备待办工具 高效待办工作更省心

作为一名初入职场的菜鸟&#xff0c;我曾被繁琐的工作任务压得喘不过气。每天&#xff0c;邮件、会议、项目任务像潮水般涌来&#xff0c;我常常感到力不从心&#xff0c;生怕遗漏了什么重要事项。那种焦虑&#xff0c;就像站在人来人往的地铁站&#xff0c;却不知道自己该搭乘…...

编程日记 2024/7/3 14:38:51

【创作纪念日】我的CSDN1024创作纪念

机缘 注册CSDN是很长时间了&#xff0c;但是上学时因为专业是电气工程&#xff0c;与编程打交道比较少&#xff0c;一直都是寻求帮助&#xff0c;而非内容输出。直到考研后专业改变&#xff0c;成为了主要跟软件编程、计算机知识相关的研究后&#xff0c;才逐步开启自己的CSDN…...

编程日记 2024/7/3 14:37:49

在AvaotaA1全志T527开发板上使用 UART 连接开发板

连接开发板 AvaotaA1提供两种连接串口输出方式&#xff0c;因为AvaotaA1需要DC 12V/2A/5.5-2.1电源适配器才可以启动系统&#xff0c;请先确保电源已接通。 方式一&#xff1a; 使用配套的 TyepC-SUB 转接板 40Gbps雷电线标准TypeC数据线&#xff0c;就可以同步实现 USB 串口…...

编程日记 2024/7/3 14:36:48

【Asterinas】Asterinas 进程启动与切换

Asterinas 进程启动与切换 进程启动 进程创建&#xff1a; Rust pub fn spawn_user_process( executable_path: &str, argv: Vec, envp: Vec, ) -> Result<Arc> { // spawn user process should give an absolute path debug_assert!(executable_path.starts_with…...

编程日记 2024/7/3 14:35:47

CVE-2024-6387 分析

文章目录 1. 漏洞成因2. 漏洞利用前置知识2.1 相关 SSH 协议报文格式2.2 Glibc 内存分配相关规则 3. POC3.1 堆内存布局3.2 服务端解析数据时间测量3.3 条件竞争3.4 FSOP 4. 相关挑战 原文链接&#xff1a;个人博客 近几天&#xff0c;OpenSSH爆出了一个非常严重的安全漏洞&am…...

编程日记 2024/7/3 14:34:45

STM32 ADC精度提升方法

STM32 ADC精度提升方法 Fang XS.1452512966qq.com如果有错误&#xff0c;希望被指出&#xff0c;学习技术的路难免会磕磕绊绊量的积累引起质的变化 硬件方法 优化布局布线&#xff0c;尽量减小其他干扰增加电源、Vref去耦电容使用低通滤波器&#xff0c;或加磁珠使用DCDC时尽…...

编程日记 2024/7/3 14:33:44

Redis为什么设计多个数据库

​关于Redis的知识前面已经介绍过很多了，但有个点没有讲，那就是一个Redis的实例并不是只有一个数据库，一般情况下，默认是Databases 0。 一 内部结构 设计如下： Redis 的源码中定义了 redisDb 结构体来表示单个数据库。这个结构有若干重要字段，比如： dict：该字段存储了…...

编程日记 2024/7/3 14:32:43

零基础学习MySQL---MySQL入门

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、什么是数据库 问&#xff1a;存储数据用文件就可以了&#xff0c;为什么还要弄个数据库呢&#xff1f; 这就不得不提…...

编程日记 2024/7/3 14:31:42

HUAWEI MPLS 静态配置和动态LDP配置

MPLS(Multi-Protocol Label Switching&#xff0c;多协议标签交换技术)技术的出现&#xff0c;极大地推动了互联网的发展和应用。例如&#xff1a;利用MPLS技术&#xff0c;可以有效而灵活地部署VPN(Virtual Private Network&#xff0c;虚拟专用网)&#xff0c;TE(Traffic Eng…...

编程日记 2024/7/3 14:30:42

分布式数据库HBase:从零开始了解列式存储

在接触过大量的传统关系型数据库后你可能会有一些新的问题: 无法整理成表格的海量数据该如何储存? 在数据非常稀疏的情况下也必须将数据存储成关系型数据库吗? 除了关系型数据库我们是否还有别的选择以应对Web2.0时代的海量数据? 如果你也曾经想到过这些问题, 那么HBase将是…...

编程日记 2024/7/6 15:25:39

Day05-03-Nexus仓库

Day05-03-Nexus仓库 05-nexus-仓库1. 概述2. 极速部署指南2.1 下载2.2 部署2.3 配置2.4 连接使用nexus2.4 编译与测试 3. 总结 05-nexus-仓库 1. 概述 背景: maven编译的时候&#xff0c;npm/cnpm编译&#xff0c;需要下载大量的依赖包。这些依赖包在每一次构建的时候都需要使…...

编程日记 2024/7/6 14:06:48

Qt 基础组件速学 鼠标和键盘事件

学习目标&#xff1a; 鼠标事件和键盘事件应用 前置环境 运行环境:qt creator 4.12 学习内容和效果演示&#xff1a; 1.鼠标事件 根据鼠标的坐标位置&#xff0c;做出对应的事件。 2.键盘事件 根据键盘的输入做出对应操作 详细主要代码 1.鼠标事件 #include "main…...

编程日记 2024/7/6 10:00:09

【云原生】Kubernetes资源配额+HPA+节点选择器+亲和性+污点

Kubernetes高级功能 文章目录 Kubernetes高级功能一、资源配额1.1、什么是资源配额1.2、资源配额应用1.2.1、针对Namespace设置资源配额1.2.2、针对Pod设置资源配额 二、HorizontalPodAutoscaler&#xff08;HPA&#xff09;2.1、什么是HorizontalPodAutoscaler2.2、Horizontal…...

编程日记 2024/7/6 9:17:45

伯克利、斯坦福和CMU面向具身智能端到端操作联合发布开源通用机器人Policy，可支持多种机器人执行多种任务

不同于LLM或者MLLM那样用于上百亿甚至上千亿参数量的大模型&#xff0c;具身智能端到端大模型并不追求参数规模上的大&#xff0c;而是指其能吸收大量的数据&#xff0c;执行多种任务&#xff0c;并能具备一定的泛化能力&#xff0c;如笔者前博客里的RT1。目前该领域一个前沿工…...

编程日记 2024/7/6 8:11:06

Python: 分块读取文本文件

在处理大文件时&#xff0c;逐行或分块读取文件是很常见的需求。下面是几种常见的方法&#xff0c;用于在 Python 中分块读取文本文件&#xff1a; 1、问题背景 如何分块读取一个较大的文本文件&#xff0c;并提取出特定的信息&#xff1f; 问题描述: fopen(blank.txt,r) quot…...

编程日记 2024/7/6 8:03:02

市场巨变，移动开发行业即将迎来“第二春”?

随着鸿蒙生态的不断壮大&#xff0c;越来越多的企业开始加入其中&#xff0c;对鸿蒙OS开发工程师的需求也越来越迫切。 年初时还只有200个APP宣布加入鸿蒙生态&#xff0c;而最近华为也已经官宣&#xff0c;已经有4000多个应用加入鸿蒙&#xff0c;短短三个月就增加了20倍。 …...

编程日记 2024/7/5 16:59:54

前端学习--React部分

文章目录 前端学习--React部分前言1.React简介1.1React的特点1.2引入文件1.3JSX&#x1f349;JSX简介与使用&#x1f349;JSX语法规则 1.4模块与组件&#x1f349;模块&#x1f349;组件 1.5安装开发者工具 2.React面向组件编程2.1创建组件&#x1f349;函数式组件&#x1f349…...

编程日记 2024/7/6 15:33:00

机器学习-4-模型评估和混淆矩阵和ROC曲线

通透！详解混淆矩阵和ROC曲线 一文彻底理解 ROC/AUC 概念（Python） 参考小白也能看懂的 ROC 曲线详解 参考分类模型的 ROC AUC 是 0.8266，啥意思？ 参考ROC曲线绘制(python+sklearn+多分类) 机器学习中的metrics.classification_report函数 1 ROC曲线 ROC曲线是一种坐标图式…...

编程日记 2024/7/5 22:38:11

搜维尔科技：Movella Xsens用于动画，CG，短视频制作案例

用户名称 广州百漫文化传播有限公司 应用场景 基于Xsens MVN Link 动作捕捉系统的动画制作、CG制作、短视频制作、快速动画MAYA插件、影视动漫实时合成预渲染。 现场照片 《西行纪》内容简介&#xff1a;在远古神明的年代&#xff0c;世间存在着天众、龙众、阿修罗等八部众…...

编程日记 2024/7/6 16:54:33

【RLHF个人笔记】RLHF:Reinforcement Learning from Human Feedback具体过程

【RLHF个人笔记】RLHF:Reinforcement Learning from Human Feedback具体过程 RLHF训练的三个步骤步骤1&#xff1a;收集数据与有监督训练策略步骤2&#xff1a;收集数据训练奖励模型步骤3&#xff1a;结合奖励模型利用强化学习算法如PPO算法来优化策略 参考内容 RLHF训练的三个…...

编程日记 2024/7/6 11:07:39

Excel中怎样将第一行建立好的规则套用到每一行？

考虑使用条件格式来完成&#xff0c;有两种方式可以尝试&#xff1a; 一、一次性创建条件格式 1.选中需要设置条件格式的区域&#xff0c;如果是不连续的区域&#xff0c;可以按住Ctrl键&#xff0c;然后用鼠标依次选中需要的数据区域 2.点击 开始选项卡&#xff0c;条件格式…...

编程日记 2024/7/6 2:13:56