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

【JavaScript】十五、事件对象与环境对象

news 来源：原创 2025/8/22 16:30:29

文章目录

1、事件对象
- 1.1 获取事件对象
- 1.2 常用属性
- 1.3 案例：回车发布评论
2、环境对象this
3、回调函数
4、案例：tab切换
5、案例：全选文本框📖

1、事件对象

事件对象：

也是个对象，object，里面存储了事件触发时的相关信息
比如鼠标点击事件中，可以获取鼠标点了哪个位置

使用场景：

从事件对象中获取数据，作出相应的操作
比如判断用户按下的键是回车的话，就发布评论

1.1 获取事件对象

在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e

在这里插入图片描述

1.2 常用属性

type：获取当前的事件类型
clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
key：用户按下的键盘键的值，现在不提倡使用keyCode

在这里插入图片描述

1.3 案例：回车发布评论

实现思路：

用键盘事件 keydown 或者 keyup ，但多用keyup，用keydown的话，按下不松手会一直多次触发事件
如果用户按下的是回车键盘，则发布信息
发布信息，这里没有后端接口create + list接口，用数据渲染到对应标签内部模拟

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>评论回车发布</title><style>.wrapper {min-width: 400px;max-width: 800px;display: flex;justify-content: flex-end;}.avatar {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;background: url(./images/avatar.jpg) no-repeat center / cover;margin-right: 20px;}.wrapper textarea {outline: none;border-color: transparent;resize: none;background: #f5f5f5;border-radius: 4px;flex: 1;padding: 10px;transition: all 0.5s;height: 30px;}.wrapper textarea:focus {border-color: #e4e4e4;background: #fff;height: 50px;}.wrapper button {background: #00aeec;color: #fff;border: none;border-radius: 4px;margin-left: 10px;width: 70px;cursor: pointer;}.wrapper .total {margin-right: 80px;color: #999;margin-top: 5px;opacity: 0;transition: all 0.5s;}.list {min-width: 400px;max-width: 800px;display: flex;}.list .item {width: 100%;display: flex;}.list .item .info {flex: 1;border-bottom: 1px dashed #e4e4e4;padding-bottom: 10px;}.list .item p {margin: 0;}.list .item .name {color: #FB7299;font-size: 14px;font-weight: bold;}.list .item .text {color: #333;padding: 10px 0;}.list .item .time {color: #999;font-size: 12px;}</style>
</head><body><div class="wrapper"><i class="avatar"></i><textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea><button>发布</button></div><div class="wrapper"><span class="total">0/200字</span></div><div class="list"><div class="item" style="display: none;"><i class="avatar"></i><div class="info"><p class="name">清风徐来</p><p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p><p class="time">2025-04-03 00:21:11</p></div></div></div><script>const tx = document.querySelector('#tx')const total = document.querySelector('.total')// 显示和隐藏文本字数统计结果tx.addEventListener('focus', function () {total.style.opacity = 1     // opacity,透明度样式，相比display，显示和隐藏更加柔和})tx.addEventListener('blur', function () {total.style.opacity = 0})// 文本事件，做字数统计并渲染tx.addEventListener('input', function () {// tx.value是获取到输入的字符串，后面.length获取字符串长度（包装类型）total.innerHTML = `${tx.value.length}/200字`})// 键盘事件const item = document.querySelector('.item')const text = document.querySelector('.text')  //评论内容tx.addEventListener('keyup', function (e) {// trim方法去除字符串左右两端端空格，中间的空格仍然保留不变if (e.key === "Enter") {if (tx.value.trim() !== '') {text.innerHTML = tx.valueitem.style.display = 'block'}// 清空刚才已发布的文字，不管你输入了是否为空，回车都清空文本框，并回复字符统计tx.value = ''total.innerHTML = '0/200字'}})</script></body></html>

效果：

在这里插入图片描述

2、环境对象this

环境对象，即函数内部的特殊变量this
this代表这个函数运行时所处的环境
函数调用方式不同，this指代的对象也不同，粗略判断为：谁调用这个函数，this就指代谁

<body><button>按钮</button><script>function fn() {console.log(this)}// 其实是window.fn()fn()// btn这个DOM对象在调用下面的function函数const btn = document.querySelector('button')btn.addEventListener('click', function () {console.log(this)})</script>
</body>

在这里插入图片描述
直接调用函数，其实相当于是 window.函数，所以 this 指代 window，而下面监听点击事件，则是button对象在调用，所以this就是这个DOM对象，因此，像实现点击按钮后按钮变色

在这里插入图片描述
以下两种写法等价：

在这里插入图片描述

3、回调函数

将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数

在这里插入图片描述
经常使用匿名函数做为回调函数

4、案例：tab切换

需求：鼠标经过不同的选项卡，底部可以显示不同的内容

在这里插入图片描述

实现思路：获取所有的a标签，遍历绑定鼠标移入事件，数据的切换，通过样式控制显示和隐藏

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>tab栏切换</title><style>* {margin: 0;padding: 0;}.tab {width: 590px;height: 340px;margin: 20px;border: 1px solid #e4e4e4;}.tab-nav {width: 100%;height: 60px;line-height: 60px;display: flex;justify-content: space-between;}.tab-nav h3 {font-size: 24px;font-weight: normal;margin-left: 20px;}.tab-nav ul {list-style: none;display: flex;justify-content: flex-end;}.tab-nav ul li {margin: 0 20px;font-size: 14px;}.tab-nav ul li a {text-decoration: none;border-bottom: 2px solid transparent;color: #333;}.tab-nav ul li a.active {border-color: #e1251b;color: #e1251b;}.tab-content {padding: 0 16px;}.tab-content .item {display: none;}.tab-content .item.active {display: block;}</style>
</head><body><div class="tab"><div class="tab-nav"><h3>每日特价</h3><ul><li><a class="active" href="javascript:;">精选</a></li><li><a href="javascript:;">美食</a></li><li><a href="javascript:;">百货</a></li><li><a href="javascript:;">个护</a></li><li><a href="javascript:;">预告</a></li></ul></div><div class="tab-content"><div class="item active"><img src="./images/tab00.png" alt="" /></div><div class="item"><img src="./images/tab01.png" alt="" /></div><div class="item"><img src="./images/tab02.png" alt="" /></div><div class="item"><img src="./images/tab03.png" alt="" /></div><div class="item"><img src="./images/tab04.png" alt="" /></div></div></div><script>// 全选所有的a标签const as = document.querySelectorAll('.tab-nav a')// 遍历给每个a标签鼠标经过，变成高亮并切换对应的数据for (let i = 0; i < as.length; i++) {as[i].addEventListener('mouseenter', function () {// 移除有高亮样式的，排它document.querySelector('.tab-nav .active').classList.remove('active')// 谁在调用这个匿名函数？是as[i]，所以as[i]就是这个匿名函数的thisthis.classList.add('active')// 修改数据document.querySelector('.tab-content .active').classList.remove('active')// 对应序号item对象的数据显示，数组序号从0开始，但item从1开始，所以+1document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')})}</script></body></html>

效果：

在这里插入图片描述

5、案例：全选文本框📖

需求1：大按钮控制所有小按钮，用户点击全选，则下面复选框全部选择，取消全选则全部取消
需求2：小按钮控制大按钮，下面某一项被取消选择了，则全选也要被取消

在这里插入图片描述

点击全选，下面每一项都选择，再点击全选，每一项都取消选择的实现思路是：

点击全选的复选框，获取checked属性
将下面所有小复选框的状态，统统更新成和全选复选框一致的

而第二个需求的实现，需要借助一个选择器：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* .ck是类选择器，对应我下面的class="ck"，而.ck:checked则是css复选框选择器，选择被勾选的复选框 ，因此，下面这个代码可以实现：勾选后，复选框变大*/.ck:checked {width: 40px;height: 40px;}</style>
</head><body><input type="checkbox" name="" id="" class="ck"><input type="checkbox" name="" id="" class="ck"><input type="checkbox" name="" id="" class="ck"><input type="checkbox" name="" id="" class="ck"></body></html>

效果：勾选后，被.ck:checked选中，样式生效，变大

在这里插入图片描述
借助这个选择器，获取小复选框的个数，和已被checked的小复选框的个数，相等则表示全选，否则，更新全选框的checked为false

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 500px;margin: 100px auto;text-align: center;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;height: 24px;}td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}.allCheck {width: 80px;}</style>
</head><body><table><tr><th class="allCheck"><input type="checkbox" name="" id="checkAll"> <span class="all">全选</span></th><th>商品</th><th>商家</th><th>价格</th></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米手机</td><td>小米</td><td>￥1999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米净水器</td><td>小米</td><td>￥4999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米电视</td><td>小米</td><td>￥5999</td></tr></table><script>// 需求1:// 获取全选复选框的DOM对象const tableHead = document.querySelector('#checkAll')// 下面每一项的DOM对象const cks = document.querySelectorAll('.ck')tableHead.addEventListener('click', function (e) {console.log(this.checked) //表单元素属性checked，输出是true或者false// 遍历所有的小复选框☑️，让小复选框的checked = 表头复选框的checkedfor (let i = 0; i < cks.length; i++) {cks[i].checked = this.checked}})// 需求2:// 给所有的小复选框添加点击事件，里面比较checked的小复选框的总数，来更新大复选框的状态for (let i = 0; i < cks.length; i++) {cks[i].addEventListener('click', function () {// 获取所有已勾选的小复选框const checkedCks = document.querySelectorAll('.ck:checked')if (checkedCks.length === cks.length) {tableHead.checked = true} else {tableHead.checked = false}// 当然也可以三元// tableHead.checked = checkedCks.length === cks.length})}</script>
</body></html>

效果：

在这里插入图片描述

【JavaScript】十五、事件对象与环境对象

文章目录 1、事件对象1.1 获取事件对象1.2 常用属性1.3 案例：回车发布评论 2、环境对象this3、回调函数4、案例：tab切换5、案例：全选文本框📖 1、事件对象事件对象： 也是个对象，object，里面存…...

编程日记 2025/8/22 16:30:29

OJ--第N个泰波那契数列

1137. 第 N 个泰波那契数 - 力扣（LeetCode） 1 题干部分 2 拆解 1 状态表示：dp[i] 2 状态转移方程:dp[i]dp[i-1]dp[i-2]dp[i-3] 3 初始化:让dp[0]0,dp[1]dp[2]1 4 填表顺序:从dp[3]开始填从左往右填 5 返回值：dp[n]即为返回的…...

编程日记 2025/8/23 3:20:10

Python从入门到高手8.1节-元组类型详解

目录 8.1.1 理解元组类型 8.1.2 元组的类型名 8.1.3 元组的定义 8.1.4 元组的解包 8.1.5 元组是可迭代的 8.1.6 假期就这么结束了 8.1.1 理解元组类型元组与列表有着相同的数据结构，区别在于，元组是不可变的数据类型，而列表是可变的数…...

编程日记 2025/8/23 3:20:10

使用 Qt 和 OBS 工具检测系统硬件编码器支持情况（NVENC、QSV、AMF）

在开发涉及视频处理的软件时，判断系统是否支持硬件加速编码器（如 NVIDIA NVENC、Intel QSV、AMD AMF）对于性能优化至关重要。本文将介绍如何结合 Qt 与 OBS Studio 附带的小工具程序，实现一个完整、异步且不会卡住 UI 的硬件加速检测模块。一、背景与目标硬件加速编码器…...

编程日记 2025/8/23 3:27:23

Python爬虫生成CSV文件的完整流程

引言在当今数据驱动的时代，网络爬虫已成为获取互联网数据的重要工具。Python凭借其丰富的库生态系统和简洁的语法，成为了爬虫开发的首选语言。本文将详细介绍使用Python爬虫从网页抓取数据并生成CSV文件的完整流程，包括环境准备、网页请求、…...

编程日记 2025/8/23 3:24:26

图论：多源最短路

多源最短路 B3647 【模板】Floyd - 洛谷 #include<iostream> #include<cstring> using namespace std;const int N 110; int f[N][N]; int n, m;int main() {memset(f, 0x3f, sizeof(f));//对于重边的处理取较小值，所以要把全部都初始化成无穷大&…...

编程日记 2025/8/23 3:24:27

2024年已备案大模型发展趋势分析

2024年已备案大模型发展趋势分析随着生成式人工智能技术的快速发展，其在各个领域的应用逐渐深入。为了规范和促进生成式人工智能服务的健康发展，国家互联网信息办公室发布了《生成式人工智能服务已备案信息》。本文将基于已备案信息，分析生成式人工智能服务的发展趋势，并…...

编程日记 2025/8/23 3:25:43

spring功能汇总

1.创建一个dao接口，实现类；service接口，实现类并且service里用new创建对象方式调用dao的方法 2.使用spring分别获取dao和service对象(IOC) 注意 2中的service里面获取dao的对象方式不用new的(DI) 运行测试： 使用1的方式创建servic…...

编程日记 2025/8/23 3:25:45

Transformer - Feed Forward前馈网络

一、数学原理 1. 前馈神经网络公式 2. Dropout公式二、代码实现 import math import torchimport torch.nn as nnclass FeedForward(nn.Module):def __init__(self, d_model, dff, dropout):super().__init__()self.W1 nn.Linear(d_model, dff)self.W2 nn.Linear(dff, d_mo…...

编程日记 2025/8/22 4:03:29

Compose Multiplatform+Kotlin Multiplatfrom 第五弹跨平台截图

截图功能 Compose MultiplatformKotlin Multiplatfrom下实现桌面端的截图功能，起码搞了两星期，最后终于做出来了，操作都很流畅，截取的文件大小也正常，可参考支持讨论！ 功能效果代码实现 //在jvmMain下创…...

编程日记 2025/8/23 3:23:14

算法题（119）：高精度减法

审题： 本题高精度减法主要是要区分正负号，然后进行模拟思路： 方法一：模拟法首先本题需要我们利用字符串进行大数相减第一步：区分s1和s2谁更大先从数的位数进行判断，然后再从高到低的位数进行判断第二步…...

编程日记 2025/8/23 3:23:13

使用成员函数指针数组简化C++类中的操作

使用成员函数指针数组简化C类中的操作在C编程中，我们常常会遇到需要对一组相似的操作进行处理的情况。例如，在一个游戏引擎中，你可能希望角色能够执行一系列的动作，如行走、跳跃或攻击等。为了简化这些操作的管理和调用&#xf…...

编程日记 2025/8/22 15:23:03

WebGL数学手记:矩阵基础

一、矩阵的定义矩阵，数学术语。在数学中，矩阵（Matrix）是一个按照长方阵列排列的复数或实数集合。 1.英文发音（Matrix） Matrix的发音类似于中文的[美吹克斯]，知道它的发音。方便后期看教程时…...

编程日记 2025/8/23 3:23:42

Python爬取数据（二）

一.example2包下的 1.re模块的compile函数使用 import repatternre.compile(r\d) print(pattern) 2.match的方法使用 import re patternre.compile(r\d) # m1pattern.match(one123twothree345four) #参数2：指定起始位置(包含),参数3：终止位置(包含),…...

编程日记 2025/8/21 17:52:25

我的NISP二级之路-01

目录一.SSE-CMM系统安全工程-能力成熟度模型（Systems Security Engineering - Capability Maturity Model）二.ISMS 即信息安全管理体系（Information Security Management System），是一种基于风险管理的、系统化的管理体系三.Kerberos协议 1. 用户登录与 AS 请求 2…...

编程日记 2025/8/17 23:39:45

自制简易 Shell：像搭建积木小屋一样打造命令交互小天地

目录准备工作：搭建小屋的材料打造小屋的 “身份牌” 接收指令：小屋的 “对讲机” 拆解指令：把大任务拆成小积木执行指令：小屋的 “行动队” 特殊指令：小屋的 “特色功能” 小屋的日常运转完整代码啥是 …...

编程日记 2025/8/17 20:34:23

WEB安全--内网渗透--利用Net-NTLMv2 Hash

一、前言在前两篇文章中分析了NTLM协议中Net-NTLMv2 Hash的生成、如何捕获Net-NTLMv2 Hash，现在就来探讨一下在内网环境中，如何利用Net-NTLMv2 Hash进行渗透。二、Net-NTLM Hash的破解工具：hashcat 原理：利用其内部的字典对…...

编程日记 2025/8/20 12:15:22

MySQL 数据库操作指南：从数据库创建到数据操作

关键词：MySQL；数据库操作；DDL；DML 一、引言 MySQL 作为广泛应用的关系型数据库管理系统，对于开发人员和数据库管理员而言，熟练掌握其操作至关重要。本文章通过一系列 SQL 示例，详细阐述 MySQL…...

编程日记 2025/8/20 20:25:42

从传递函数到PID控制器

在过程控制中，按偏差的比例（P，Proportional）、积分（I，Integral）和微分（D，Differential）进行控制的PID控制器（亦称PID调节器）是应用最为…...

编程日记 2025/8/17 23:55:51

抓wifi无线空口包之Ubuntu抓包（二）

一、设置网卡信道和频段，并抓包 1、使用iwconfig查看自己机器的无线网卡名称 wangwang-ThinkCentre-M930t-N000:~$ iwconfig lo no wireless extensions. eno1 no wireless extensions. enxc8a3624ab329 no wireless extensions. wlx90de80d1b5b1 IE…...

编程日记 2025/8/20 10:19:21

使用protobuf编译提示无法打开包括文件: ‘absl/log/absl_log.h’: No such file or directory

问题原因 Protobuf 依赖 Abseil： Protobuf 3.20 版本开始依赖 Abseil，但你的系统未正确安装或配置 Abseil。头文件路径未包含： 编译器找不到 absl/log/absl_log.h，可能是因为 Abseil 未正确安装或未在项目中设置包含路径。 …...

编程日记 2025/8/21 5:33:08

深入浅出Java 锁 | 源码剖析 | 万字解析

目录硬件内存结构&Java内存模型硬件内存结构 Java内存模型（JMM） JMM中三大特性：原子性、有序性、可见性 Java中有哪些锁？ Java中锁可以分成悲观锁和乐观锁的实现。乐观锁和悲观锁的区别，乐观锁一定好嘛&…...

编程日记 2025/8/17 23:32:07

java流程控制12：流程控制练习

流程控制练习打印三角型 package com.zheng.struct;public class TestDemo {public static void main(String[] args) {//打印三角形 5行for(int i1;i<5;i){for(int j5;j>i;j--){System.out.print(" ");}for(int j1;j<i;j){System.out.print("*&quo…...

编程日记 2025/8/17 10:11:14

JAVA：ByteBuddy 动态字节码操作库的技术指南

1、简述 ByteBuddy 是一个功能强大的 Java 字节码操作库，可以帮助开发者在运行时动态生成和修改类，而无需直接接触复杂的 ASM API。它被广泛应用于框架开发、AOP（面向切面编程）、代理类生成、性能监控等领域。 2、ByteBuddy 的优…...

编程日记 2025/8/22 7:17:50

C语言学习记录（13）自定义类型：结构体

一、结构体变量的声明、创建和初始化 1.结构体变量的声明结构体变量我们学操作符的时候就顺带讲了一点了，因为当时讲了结构体成员变量访问操作符.。结构体变量不像int、float这种内置类型的，一旦创建，系统就知道这是干啥的，结…...

编程日记 2025/8/19 23:10:04

rtthread 软件SPI驱动, 支持mode0~3,MSB,LSB

rtthread的软件模拟SPI用的上层PIN驱动写，由于经过层层封装，时钟频率并不会太高，200MHz的MCU跑不到1MHz的时钟频率。所以最好是在底层就模拟好，给上层用。头文件 struct io_poSOFT {gpio_type *port;uint16_t pin; }; typedef …...

编程日记 2025/8/17 23:01:38

C++自学笔记——动态创建对象

动态创建对象 1. 什么是动态创建对象？ 在学习之前的知识点时，我们知道有静态存储期和自动存储期。静态存储期的对象在程序的整个生命周期内都存在，全局变量和static修饰的局部变量都属于这一类。自动存储期的对象，这些对象在函…...

编程日记 2025/8/21 16:13:05

35.[前端开发-JavaScript基础]Day12-for循环中变量-华为商城-商品列表-轮播图

for循环中监听函数中打印变量 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"wi…...

编程日记 2025/8/20 5:13:45

详细描述以太坊的gas、gaslimit、gasPrice

目录一、Gas 是什么？ ✅ 简要定义： 🧠 举例理解：二、Gas Limit 是什么？ ✅ 简要定义：分两种：举例说明：三、Gas Price 是什么？ ✅ 简要定义：为什么它重要？示例：四、 EIP-1559 后的新机制（伦敦升级）三个要素：五、额外技巧（开发实用）本文…...

编程日记 2025/8/20 21:19:06

【Java】Maven

一、概念是一个项目管理和构建工具，它基于项目对象模型（POM）的概念，通过一小段描述信息来管理项目的构建。二、Maven坐标 <groupId>com.itheima</groupId><artifactId>maven-project01</artifactId>&…...

编程日记 2025/8/20 1:53:08

PageCache

目录一、PageCache的具体过程二、具体实现代码一、PageCache的具体过程页缓存主要解决的是内存外碎片问题，并且直接和系统调用打交道。申请过程如下： 当中心缓存中没有内存时,会去页缓存申请一个span结构,要经过下面几步: （1&#xf…...

编程日记 2025/8/17 22:09:56

Vue3实战五、面包屑，收缩菜单，高亮暗黑主题切换,全屏功能实现

目录面包屑，收缩菜单，黑夜白夜样式,全屏功能实现收缩菜单按钮结合pinia功能实现第一步、定义布局配置的数据类型第二步、创建布局状态管理文件第三步、使用布局配置状态第四步、进行展开/收起左侧菜单逻辑第五步、动态切换左侧菜单宽度样式第六步、动态…...

编程日记 2025/8/21 5:33:30

Linux内核设计——（二）进程调度

目录一、进程调度简介二、多任务三、调度器 3.1 I/O消耗型和处理器消耗型进程 3.2 进程优先级 3.3 CFS算法 3.4 实时调度策略 3.5 SCHED_FIFO 3.6 SCHED_RR 3.7 调度器入口四、上下文切换 4.1 睡眠和唤醒 4.2 need_resched标志 4.3 用户抢占 4.4 内核抢占一…...

编程日记 2025/8/22 10:52:42

【C++初阶】--- string类模拟实现

1.基础函数 1.1成员函数成员函数主要是_str、_size、_capacity这三个。npos是size_t 的最大值,用于当作后续成员函数的参数的缺省值。 class string { private:char* _str nullptr;//指向字符串的指针size_t _size 0;//字符串长度size_t _capacity 0;//空间大小static c…...

编程日记 2025/8/19 17:32:41

Pythia 使用说明

Pythia 是一个由非营利研究组织 EleutherAI 开发的开源语言模型套件，专注于透明性和可复现性。它是为了推动自然语言处理（NLP）领域的开放研究而设计，尤其在模型训练过程和性能分析方面提供了详尽的文档和数据。 Pythia 的核心特点…...

编程日记 2025/8/18 0:19:09

python：获取某路径下所有图片的名称

可以使用 Python 的 os 模块或者 pathlib 模块来获取指定路径下所有图片的名称。以下是使用这两种方法实现的代码示例： 使用 os 模块 import osdef get_image_names_os(path):image_extensions (.jpg, .jpeg, .png, .gif, .bmp)image_names []for root, dirs, f…...

编程日记 2025/8/20 15:27:31

一个开源的 VS Code 大模型聊天插件：Light-at

这篇文章是一个开发杂谈。对于有经验的开发者来说，可能这个项目并不算特别复杂或者高技术，只是对我个人来说算一个里程碑，因此写篇杂谈文章记录一下。也许也能给起步者一些参考。项目地址：https://github.com/HiMeditator/light-…...

编程日记 2025/8/20 19:29:08

图论学习笔记2

请先阅读图论学习笔记 1。在这篇文章里，我们将继续以前 tarjan 求解的强连通分量和双连通分量，讲解其缩点相关内容。也会讲解一些特殊的图：基环树与仙人掌图、最小树形图。缩点我们知道，将强连通分量、双连通分量缩点之后…...

编程日记 2025/8/17 23:23:49

蓝桥杯备赛---真题训练之15届省赛产品360度展示

题目介绍在电子商务网站中，用户可以通过鼠标或手势交互实现 360 度全方位查看产品，提升用户体验。现在需要你设计一个 Pipeline 管道函数，用于控制 360 度展示产品的动画序列，通过管道连接各个动画步骤，使产品以流畅…...

编程日记 2025/8/20 6:39:07

图论：单源最短路（BF算法+迪杰斯特拉算法+spfa算法）

单源最短路概念 dijkstra实现（解决不了负权值） P3371 【模板】单源最短路径（弱化版） - 洛谷 #include<iostream> #include<vector> #include<cstring> using namespace std;typedef pair<int, int> PII…...

编程日记 2025/8/18 23:52:13

嵌入式学习(35)-TTS语音模块FT-VBM-OS支持ModbusRTU

一、概述 FT-TTS-R-01 （下简简“模块”）是一款可将串口传入的文本信息转成语音播报的控制器。块”可下接收任意字符或者汉字，并通过 TTS 语音合成功能，清晰、准确、自然的合成并播放音频。该块”还带有 1 路继电器输出&#xff0…...

编程日记 2025/8/22 8:13:31

【Vue-组件】学习笔记

目录 <<回到导览组件1.项目1.1.Vue Cli1.2.项目目录1.3.运行流程1.4.组件的组成1.5.注意事项 2.组件2.1.组件注册2.2.scoped样式冲突2.3.data是一个函数2.4.props详解2.5.data和prop的区别 3.组件通信3.1.父子通信3.1.1.父传子（props）3.1.2.子传父…...

编程日记 2025/8/19 2:54:34

Github上一些使用技巧（缩写、Issue的Highlight）自用

1. GIthub中的一些缩写 LGTM ! 最近经常看到一些迷之缩写，感觉挺有意思的，但是有时候看到一些没见过的缩写还是有点懵逼，不过缩写确实也是很方便去review，这里就记录汇总一下；顺便加了一些git的基操单词（加…...

编程日记 2025/8/21 7:54:22

【团体程序涉及天梯赛】L1~L2实战反思合集（C++）

实战反思汇总记录仔细审题，想好再写 L1-104 九宫格 - 团体程序设计天梯赛-练习集易忽略的错误：开始习惯性地看到n就以为是n*n数组了，实际上应该是9*9的固定大小数组，查了半天没查出来 L1-101 别再来这么多猫娘了&#xff01…...

编程日记 2025/8/21 10:58:47

ubuntu下的node.js的安装

安装 node-v22.14.0-linux-x64.tar.xz 的步骤如下： 1. 下载和解压如果尚未下载文件，可以通过 wget 下载（替换为实际下载链接）： wget https://nodejs.org/dist/v22.14.0/node-v22.14.0-linux-x64.tar.xz解压文件&…...

编程日记 2025/8/19 1:27:35

VMware-workstation-full-12.5.2 install OS X 10.11.1(15B42).cdr

手把手虚拟机安装苹果操作系统 VMware_workstation_full_12.5.2 unlocker208 Apple Max OS X(M）-CSDN博客 vcpu-0:VERIFY vmcore/vmm/main/physMem_monitor.c:1180 FILE: FileCreateDirectoryRetry: Non-retriable error encountered (C:\ProgramData\VMware): Cann…...

编程日记 2025/8/21 16:40:16