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

【前端】JavaScript入门及实战106-110

文章目录

  • 106 a的索引问题
  • 107 使用DOM操作CSS
  • 108 读取元素当前的样式
  • 109 getStyle()
  • 110 其他样式操作的属性
  • 滚动条练习

106 a的索引问题

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	<script type="text/javascript">	window.onload = function(){/*点击超链接以后,删除一个员工的信息			*/// 获取所有超链接var allA = document.getElementsByTagName("a");// 为每个超链接绑定一个单击响应函数for(var i = 0; i < allA.length; i++){/*for循环会在页面加载完成之后立即执行,而响应函数会在超链接被点击时才执行,当响应函数执行时,for循环早已执行完毕*/alert("for循环正在执行" + i);allA[i].onclick = function(){alert("响应函数正在执行" + i); // i = 3console.log(allA[i] == this); // false//alert(allA[i]);return false;			};}};				</script>	
</head>
<body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th>&nbsp;</th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName" /></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email" /></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary" /></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td></tr></table></div>
</body>
</html>

107 使用DOM操作CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	<style type="text/css">#box1 {width: 200px;height: 200px;background-color: red;<!--background-color: red !important;-->}</style><script type="text/javascript">	window.onload = function(){/*点击按钮之后,修改box1的大小*/// 获取box1var box1 = document.getElementById("box1");//为按钮绑定单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){/*通过JS修改元素的样式语法:元素.style.样式名 = 样式值注意:如果CSS样式中含有-,不合法,如background-color需要将这种样式名修改为驼峰命名法,去掉-,然后将-后的字母大写border-top-width:borderTopWidth通过style属性设置的样式都是内联样式,而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示,但是如果在样式中写了!important,则此时样式会有最高的优先级,即使通过JS也不能覆盖该样式,此时将会导致JS修改样式失效,所以尽量不要为样式添加!important*/box1.style.width = "300px";box1.style.height = "300px";box1.style.backgroundColor = "yellow";				};// 点击按钮2以后,读取元素的样式var btn02 = document.getElementById("btn02");btn02.onclick = function(){// 读取box1的样式/*语法:元素.style.样式名通过style属性读取和设置的都是内联样式,无法读取样式表中的样式*/alert(box1.style.width);};};</script>	
</head>
<body><button id="btn01">点一下1</button><button id="btn02">点一下2</button><div id="box1"></div>
</body>
</html>

108 读取元素当前的样式

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	<style type="text/css">#box1 {width: 100px;height: 100px;background-color: yellow;}</style><script type="text/javascript">	window.onload = function(){/*点击按钮之后,读取box1的样式*/// 获取box1var box1 = document.getElementById("box1");//为按钮绑定单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){/*获取元素的当前显示的样式语法:元素.currentStyle.样式名它可以用来读取当前元素正在显示的样式谁生效获取谁如果当前元素没有设置该样式,则获取默认值currentStyle只有IE浏览器支持,其他浏览器都不支持*///box1.currentStyle.width = "200px"; // 错误alert(box1.currentStyle.width);/*在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式这个方法是window的方法,可以直接使用需要两个参数:1. 要获取样式的元素2. 可以传递一个伪元素,一般都传null该方法会返回一个对象,对象中封装了当前元素对应的样式可以通过对象.样式名来读取样式,如果获取的样式没有设置,则会获取到真实的值,而不是默认值比如:没有设置width,他不会获取到auto,而是一个长度但是该方法不支持IE8及以下浏览器通过currentStyle和getComputedStyle()读取到的样式都是只读的,不能修改,如果要修改必须通过style属性*///var obj = getComputedStyle(box1, null);//alert(obj.width);//alert(getComputedStyle(box1, null).backgroundColor); // 正常浏览器//alert(box1.currentStyle.backgroundColor); // IE8的方式alert(getStyle(box1, "width"));};};/*定义一个函数,用来获取指定元素的当前的样式参数:1. obj 要获取的元素2. name 要获取的样式名*/function getStyle(obj, name){// 正常浏览器的方式//return getComputedStyle(obj, null)[name]; // 元素.style["属性"]// IE8的方式//return obj.currentStyle[name];//???}</script>	
</head>
<body><button id="btn01">点一下</button><div id="box1" style="width: 200px; background-color: red;"></div>
</body>
</html>

109 getStyle()

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	<style type="text/css">#box1 {width: 100px;height: 100px;background-color: yellow;}</style><script type="text/javascript">	window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){var v = getStyle(box1, "width");alert(v);};};/*定义一个函数,用来获取指定元素的当前的样式参数:1. obj 要获取的元素2. name 要获取的样式名*/function getStyle(obj, name){	// 变量没找到就报错,属性没找到是undefinedif(window.getComputedStyle){// 正常浏览器的方式,具有getComputedStyle()方法return getComputedStyle(obj, null)[name];}else{// IE8的方式,没有getComputedStyle()方法return obj.currentStyle[name];}		//return window.getComputedStyle? getComputedStyle(obj, null)[name]: obj.currentStyle[name];/*if(obj.currentStyle){// 正常浏览器的方式,具有getComputedStyle()方法return obj.currentStyle[name];}else{// IE8的方式,没有getComputedStyle()方法return getComputedStyle(obj, null)[name];}*/		}</script>	
</head>
<body><button id="btn01">点一下</button><div id="box1" style="width: 200px; background-color: red;"></div>
</body>
</html>

110 其他样式操作的属性

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	<style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;padding: 10px;border: 10px solid yellow;}# box2 {padding: 100px;background-color: #bfa;}# box4 {width: 200px;height: 300px;background-color: #bfa;overflow: auto;}# box5 {width: 150px;height: 600px;background-color: yellow;}</style><script type="text/javascript">	window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");var box4 = document.getElementById("box4");btn01.onclick = function(){/*clientWidthclientHeight这两个属性可以获取元素的可见宽度和高度,这些属性都是不带px的,返回都是一个数字,可以直接进行计算,会获取元素的宽度和高度,包括内容区和内边距,					这些属性都是只读的,不能修改*/alert(box1.clientWidth);alert(box1.clientHeight);//box1.clientHeight = 300; // 无用/*offsetWidthoffsetHeight获取元素的整个高度和宽度,包括内容区,内边距和边框*/alert(box1.offsetWidth);/*offsetParent可以用来获取当前元素和定位父元素会获取到离当前元素最近的开启了定位的祖先元素,如果所有的祖先元素都没有开启定位,则返回body*/var op = box1.offsetParent;alert(op.id); // box2/*offsetLeft当前元素相对于其定位父元素的水平偏移量offsetTop当前元素相对于其定位父元素的垂直偏移量*/alert(box1.offsetLeft); // 100/*scrollWeightscrollHeight可以获取元素整个滚动区域的宽度和高度*///alert(box4.clientHeight); // 300alert(box4.scrollHeight); // 600/*scrollLeft:可以获取水平滚动条滚动的距离scrollTop:可以获取垂直滚动条滚动的距离*/alert(box4.scrollLeft);alert(box4.scrollTop);//alert(box4.clientHeight); // 283alert(box4.scrollHeight); // 600//当满足scrollHeight - scrollTop = clientHeight时,说明垂直滚动条滚动到底了alert(box4.scrollHeight - box4.scrollTop); // 滚动条到底部:283//当满足scrollWidth - scrollLeft = clientWidth时,说明水平滚动条滚动到底了alert(box4.scrollHeight - box4.scrollTop); };};</script>	
</head>
<body><button id="btn01">点一下</button><br><div id="box4"><div id="box5"></div></div><br><div id="box3" style="position: relative;"><div id="box2" style="position: relative;"><div id="box1"></div></div></div>
</body>
</html>

滚动条练习

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	<style type="text/css">#info {width: 300px;height: 500px;background-color: #bfa;overflow: auto;}</style><script type="text/javascript">	window.onload = function(){/*当垂直滚动条到底时,表单项可用onscroll:该事件会在元素的滚动条滚动时触发*/var info = document.getElementById("info");var inputs = document.getElementsByTagName("input");info.onscroll = function(){// 检查垂直滚动条是否滚动到底if(info.scrollHeight - info.scrollTop == info.clientHeight){//滚动条滚动到底,使表单项可用/*disabled属性可以设置一个元素是否禁用true是禁用,false是不禁用*/inputs[0].disabled = false;inputs[1].disabled = false;}};};</script>	
</head>
<body><h3>欢迎亲爱的用户注册</h3><p id="info">请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议,请阅读以下协议</p><!--如果为表单添加disabled="disabled"则表项将变为不可用的状态--><input type="checkbox" disabled="disabled" />我已仔细阅读协议,一定遵守<input type="submit" value="注册" disabled="disabled" />
</body>
</html>

相关文章:

【前端】JavaScript入门及实战106-110

文章目录 106 a的索引问题107 使用DOM操作CSS108 读取元素当前的样式109 getStyle()110 其他样式操作的属性滚动条练习 106 a的索引问题 <!DOCTYPE html> <html> <head> <title></title> <meta charset"utf-8"> <script typ…...

git 版本回退-idea

1、选中项目&#xff0c;右键&#xff0c;打开 git历史提交记录 2、选中想要回退的版本&#xff0c;选择 hard&#xff08;不保留版本记录&#xff09; 3、最终选择强制提交&#xff08;必须强制&#xff09; OK&#xff0c;搞定...

[安洵杯 2019]easy_serialize_php

进入界面然后 <?php$function $_GET[f];function filter($img){$filter_arr array(php,flag,php5,php4,fl1g);$filter /.implode(|,$filter_arr)./i;return preg_replace($filter,,$img); } 这就是个正则if($_SESSION){unset($_SESSION); 销毁 }$_SESSION["use…...

2024年软件测试面试题大全【含答案】

一、面试基础题 简述测试流程: 1、阅读相关技术文档&#xff08;如产品PRD、UI设计、产品流程图等&#xff09;。 2、参加需求评审会议。 3、根据最终确定的需求文档编写测试计划。 4、编写测试用例&#xff08;等价类划分法、边界值分析法等&#xff09;。 5、用例评审(…...

返回倒数第 k 个节点 - 力扣(LeetCode)

面试题 02.02. 返回倒数第 k 个节点 - 力扣&#xff08;LeetCode&#xff09; /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/int kthToLast(struct ListNode* head, int k) {struct ListNode* fastnode head…...

12 前端工程化

组件化 1. 组件化理解 就是将页面的某一部分独立出来&#xff0c;将这一部分的数据层&#xff08;M&#xff09;、视图层&#xff08;V&#xff09;和控制层&#xff08;C&#xff09;用黑盒的形式全部封装到一个组件内&#xff0c;暴露出一些开箱即用的函数和属性供外部调用。…...

跨文档消息传递:WebKit中的Web通信新纪元

跨文档消息传递&#xff1a;WebKit中的Web通信新纪元 在现代Web应用中&#xff0c;跨文档消息传递&#xff08;Cross-document messaging&#xff09;是一种允许不同源的文档进行通信的机制。这种机制对于构建复杂的Web应用&#xff0c;如嵌入式框架&#xff08;iframes&#…...

面试题 33. 二叉搜索树的后序遍历序列

二叉搜索树的后序遍历序列 题目描述示例 题解递归单调栈 题目描述 输入一个整数数组&#xff0c;判断该数组是不是某二叉搜索树的后序遍历结果。如果是则返回 true&#xff0c;否则返回 false。假设输入的数组的任意两个数字都互不相同。 示例 参考以下这颗二叉搜索树&#…...

Web响应式设计———1、Grid布局

1、网格布局 Grid布局 流动网格布局是响应式设计的基础。它通过使用百分比而不是固定像素来定义网格和元素的宽度。这样&#xff0c;页面上的元素可以根据屏幕宽度自动调整大小&#xff0c;适应不同设备和分辨率。 <!DOCTYPE html> <html lang"en"> &l…...

ESP32开发进阶: 训练神经网络

一、网络设定 我们设定一个简单的前馈神经网络&#xff0c;其结构如下&#xff1a; 输入层&#xff1a;节点数&#xff1a;2&#xff0c;接收输入数据&#xff0c;每个输入样本包含2个特征&#xff0c;例如 {1.0, 0.0}, {0.0, 1.0} 等。 隐藏层&#xff1a;节点数&#xff1a;…...

全国区块链职业技能大赛国赛考题前端功能开发

任务3-1:区块链应用前端功能开发 1.请基于前端系统的开发模板,在登录组件login.js、组件管理文件components.js中添加对应的逻辑代码,实现对前端的角色选择功能,并测试功能完整性,示例页面如下: 具体要求如下: (1)有明确的提示,提示用户选择角色; (2)用户可看…...

直接插入排序算法详解

直接插入排序&#xff08;Straight Insertion Sort&#xff09;是一种简单直观的排序算法。它的工作原理是通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相应位置并插入。插入排序在实现上&#xff0c;通常采用in-place排…...

sql手动自增id

有时候在运维处理数据的时候&#xff0c;需要给某张表插入新的记录&#xff0c;那么需要知道最新插入数据的id,并在最新id的基础上加上id增长步长获取新的id,这个过程往往需要现将max出来加1,再手动补充到sql语句中&#xff0c;很麻烦&#xff0c;而且数据多的时候容易出错。有…...

10_TypeScript中的泛型

TypeScript中的泛型&#xff09; 一、泛型的定义二、泛型函数三、泛型类&#xff1a;比如有个最小堆算法&#xff0c;需要同时支持返回数字和字符串两种类型。通过类的泛型来实现四、泛型接口五、泛型类 --扩展 把类作为参数类型的泛型类1、实现&#xff1a;定义一个 User 的类…...

Unity3D之TextMeshPro使用

文章目录 1. TextMeshPro简介2. TextMeshPro创建3. TextMeshPro脚本中调用4. TextMeshPro字体设置及中文支持过程中出现的一些问题 1. TextMeshPro简介 【官网文档】https://docs.unity.cn/cn/2020.3/Manual/com.unity.textmeshpro.html TextMeshPro 是 Unity 的最终文本解决…...

K8S 上部署 Prometheus + Grafana

文章目录 一、使用 Helm 安装 Prometheus1. 配置源2. 下载 prometheus 包3. 安装 prometheus4. 卸载 二、使用 Helm 安装 Grafana1. 配置源2. 安装 grafana3. 访问4. 卸载 一、使用 Helm 安装 Prometheus 1. 配置源 地址&#xff1a;https://artifacthub.io/packages/helm/pro…...

雷军的逆天改命与顺势而为

雷军年度演讲前&#xff0c;朋友李翔提了一个问题&#xff1a;雷军造车是属于顺势而为还是逆势而为&#xff1f;评论互动区有一个总结&#xff0c;很有意思&#xff0c;叫“顺势逆袭”。 大致意思是产业趋势下小米从手机到IOT再切入汽车&#xff0c;是战略的必然&#xff0c;不…...

Leetcode 11. 盛最多水的容器

Leetcode 11. 盛最多水的容器 Leetcode 11. 盛最多水的容器 一、题目描述二、我的想法 一、题目描述 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成…...

Java笔试分享

1、设计模式&#xff08;写>3种常用的设计模式&#xff09; 设计模式是在软件工程中解决常见问题的经验性解决方案。以下是一些常用的设计模式&#xff1a; 单例模式&#xff08;Singleton&#xff09;&#xff1a; 意图&#xff1a;确保一个类只有一个实例&#xff0c;并…...

LeetCode:对称的二叉树(C语言)

1、问题概述&#xff1a;给一个二叉树&#xff0c;看是否按轴对称 2、示例 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#xff1a;false 3、分析 &#xff08;1&a…...

Postman中的API Schema验证:确保响应精准无误

Postman中的API Schema验证&#xff1a;确保响应精准无误 在API开发和测试过程中&#xff0c;验证响应数据的准确性和一致性是至关重要的。Postman提供了一个强大的功能——API Schema验证&#xff0c;它允许开发者根据预定义的JSON Schema来检查API响应。本文将详细介绍如何在…...

深入浅出WebRTC—GCC

GoogCcNetworkController 是 GCC 的控制中心&#xff0c;它由 RtpTransportControllerSend 通过定时器和 TransportFeedback 来驱动。GoogCcNetworkController 不断更新内部各个组件的状态&#xff0c;并协调组件之间相互配合&#xff0c;向外输出目标码率等重要参数&#xff0…...

leetcode日记(49)旋转链表

其实不难&#xff0c;就是根据kk%len判断需要旋转的位置&#xff0c;再将后半段接在前半段前面就行。 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : …...

InteliJ IDEA最新2024版下载安装与快速配置激活使用教程+jdk下载配置

第一步&#xff1a;下载ideaIC-2024.1.4 方法1&#xff1a;在线链接 IntelliJ IDEA – the Leading Java and Kotlin IDE (jetbrains.com) 选择社区版进行下载 方法2&#xff1a;百度网盘 链接&#xff1a;https://pan.baidu.com/s/1ydS6krUX6eE_AdW4uGV_6w?pwdsbfm 提取…...

【23】Android高级知识之Window(四) - ThreadedRenderer

一、概述 在上一篇文章中已经讲了setView整个流程中&#xff0c;最开始的addToDisplay和WMS跨进程通信的整个过程做了什么。继文章Android基础知识之Window(二)&#xff0c;这算是另外一个分支了&#xff0c;接着讲分析在performTraversals的三个操作中&#xff0c;最后触发pe…...

Java-根据前缀-日期-数字-生成流水号(不重复)

&#x1f388;边走、边悟&#x1f388;迟早会好 小伙伴们在日常开发时可能会遇到的业务-生成流水号&#xff0c;在企业中可以说是比较常见的需求&#xff0c; 可以采用"前缀日期数字"的方式&#xff08;ps:此方式是需要用到缓存的&#xff09;前缀&#xff1a;为了…...

跟李沐学AI:卷积层

从全连接层到卷积 多层感知机十分适合处理表格数据&#xff0c;其中行对应样本&#xff0c;列对应特征。但对于图片等数据&#xff0c;全连接层会导致参数过多。卷积神经网络&#xff08;convolutional neural networks&#xff0c;CNN&#xff09;是机器学习利用自然图像中一…...

使用RedisTemplate操作executePipelined

前言 RedisTemplate 是 Spring 提供的用于操作 Redis 的模板类&#xff0c;它封装了 Redis 的连接、连接池等管理&#xff0c;并提供了一系列的操作方法来简化 Redis 的使用。其中&#xff0c;executePipelined 方法是 RedisTemplate 中的一个高级特性&#xff0c;用于支持 Re…...

react-native从入门到实战系列教程一环境安装篇

充分阅读官网的环境配置指南&#xff0c;严格按照他的指导作业&#xff0c;不然你一直只能在web或沙箱环境下玩玩 极快的网络和科学上网&#xff0c;必备其中的一个较好的心理忍受能力&#xff0c;因为上面一点就可以让你放弃坚持不懈&#xff0c;努力尝试 成功效果 三大件 …...

【Gin】精准应用:Gin框架中工厂模式的现代软件开发策略与实施技巧(下)

【Gin】精准应用&#xff1a;Gin框架中工厂模式的现代软件开发策略与实施技巧(下) 大家好 我是寸铁&#x1f44a; 【Gin】精准应用&#xff1a;Gin框架中工厂模式的现代软件开发策略与实施技巧(下)✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言 本次文章分为上下两部分&…...

国科大作业考试资料-人工智能原理与算法-2024新编-第十二次作业整理

袋子里面有3个有偏差的硬币a、b和c,抛掷硬币正面朝上的概率分别是20%、60%和80%。从袋子里随机取出一个硬币(3个硬币被取出的概率是相等的),并把取出的硬币抛掷3次,得到抛掷结果依次是X1 , X2和 X3。 a. 画出对应的贝叶斯网络并定义必要的CPT表。 b. 如果抛掷结果是2次正…...

《0基础》学习Python——第二十一讲__网络爬虫/<4>爬取豆瓣电影电影信息

爬取网页数据&#xff08;获取网页信息全过程&#xff09; 1、爬取豆瓣电影的电影名称、导演、主演、年份、国家、评价 2、首先我们先爬取页面然后再获取信息 1、爬取网页源码 import requests from lxml import etree if __name__ __main__:#UA伪装head{User-Agent:Mozilla/…...

【C++初阶】string类

【C初阶】string类 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;C&#x1f96d; &#x1f33c;文章目录&#x1f33c; 1. 为什么学习string类&#xff1f; 1.1 C语言中的字符串 1.2 实际中 2. 标准库中的string类 2.1 string类 2.…...

RAS--APEI 报错解析流程(2)

RAS--APEI 报错解析流程(1) 除了APEI 中除了GHES会记录错误&#xff0c;在Post过程中的错误通常是通过BERT Table汇报 1.BERT Boot Error Record Table is used to report unhandled errors that occurred in a previous boot&#xff0c;it is reported as a ‘one-time polle…...

微软蓝屏事件对企业数字化转型有什么影响?

引言&#xff1a;从北京时间2024年7月19日&#xff08;周五&#xff09;下午2点多开始&#xff0c;全球大量Windows用户出现电脑崩溃、蓝屏死机、无法重启等情况。事发后&#xff0c;网络安全公司CrowdStrike称&#xff0c;收到大量关于Windows电脑出现蓝屏报告&#xff0c;公司…...

【Gin】精准应用:Gin框架中工厂模式的现代软件开发策略与实施技巧(上)

【Gin】精准应用&#xff1a;Gin框架中工厂模式的现代软件开发策略与实施技巧(上) 大家好 我是寸铁&#x1f44a; 【Gin】精准应用&#xff1a;Gin框架中工厂模式的现代软件开发策略与实施技巧(上)✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言 本次文章分为上下两部分&…...

浅谈Devops

1.什么是Devops DevopsDev&#xff08;Development&#xff09;Ops&#xff08;Operation&#xff09; DevOps&#xff08;Development和Operations的混合词&#xff09;是一种重视“软件开发人员&#xff08;Dev&#xff09;”和“IT运维技术人员&#xff08;Ops&#xff09;”…...

大文件分片上传(前端TS实现)

大文件分片上传 内容 一般情况下&#xff0c;前端上传文件就是new FormData,然后把文件 append 进去&#xff0c;然后post发送给后端就完事了&#xff0c;但是文件越大&#xff0c;上传的文件也就越长&#xff0c;如果在上传过程中&#xff0c;突然网络故障&#xff0c;又或者…...

unity2D游戏开发02添加组件移动玩家

添加组件 给PlayGame和EnemyObject添加组件BoxCollider 2D碰撞器&#xff0c;不用修改参数 给PlayGame添加组件Rigibody 2D 设置数据 添加EnemyObject&#xff0c;属性如下 Edit->project setting->Physics 2D 将 y的值改为0 给playerObject添加标签 新建层 将PlayerObj…...

设计模式 之 —— 单例模式

目录 什么是单例模式&#xff1f; 定义 单例模式的主要特点 单例模式的几种设计模式 1.懒汉式&#xff1a;线程不安全 2.懒汉式&#xff1a;线程安全 3.饿汉式 4.双重校验锁 单例模式的优缺点 优点&#xff1a; 缺点&#xff1a; 适用场景&#xff1a; 什么是单例模…...

深入浅出WebRTC—ULPFEC

FEC 通过在发送端添加额外的冗余信息&#xff0c;使接收端即使在部分数据包丢失的情况下也能恢复原始数据&#xff0c;从而减轻网络丢包的影响。在 WebRTC 中&#xff0c;FEC 主要有两种实现方式&#xff1a;ULPFEC 和 FlexFEC&#xff0c;FlexFEC 是 ULPFEC 的扩展和升级&…...

Python从0到100(四十三):数据库与Django ORM 精讲

前言&#xff1a; 零基础学Python&#xff1a;Python从0到100最新最全教程。 想做这件事情很久了&#xff0c;这次我更新了自己所写过的所有博客&#xff0c;汇集成了Python从0到100&#xff0c;共一百节课&#xff0c;帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…...

Redis-主从模式

目录 前言 一.主从节点介绍 二.配置redis主从结构 二.主从复制 四.拓扑结构 五.数据同步 全量复制&#xff08;Full Sync Replication&#xff09; 局部复制&#xff08;Partial Replication&#xff09; Redis的学习专栏&#xff1a;http://t.csdnimg.cn/a8cvV 前言 …...

加速决策过程:企业级爬虫平台的实时数据分析

摘要 在当今数据驱动的商业环境中&#xff0c;企业如何才能在海量信息中迅速做出精准决策&#xff1f;本文将探讨企业级爬虫平台如何通过实时数据分析加速决策过程&#xff0c;实现数据到决策的无缝衔接。我们聚焦于技术如何赋能企业&#xff0c;提升数据处理效率&#xff0c;…...

字典树(前缀树)数组实现(只能查26个单词)

这段代码实现了一个基于 Trie 树的字典树&#xff08;Trie&#xff09;数据结构&#xff0c;用于存储和检索字符串。其中包含以下几个方法. insert(String word): 向 Trie 树中插入一个单词。首先将单词转换为字符数组&#xff0c;然后遍历字符数组&#xff0c;逐个字符在 Trie…...

CTF-pwn-虚拟化-vmmware 前置

文章目录 参考vmware逃逸简介虚拟机和主机通信机制(guest to host)共享内存&#xff08;弃用&#xff09;backdoor机制Message_Send和Message_RecvGuestRPC实例RpcOutSendOneRawWork实例 vmware-rpctool info-get guestinfo.ip各个步骤对应的backdoor操作Open RPC channelSend …...

thinkphp8结合layui2.9 图片上传验证

<?php declare (strict_types 1);namespace app\index\validate;use think\Validate;class Upload extends Validate {/*** 定义验证规则* 格式&#xff1a;字段名 > [规则1,规则2...]** var array*/protected $rule [image > fileExt:jpg,png|fileSize:204800|fi…...

农村污水处理难题:探索低成本高效解决方案

农村污水处理难题&#xff1a;探索低成本高效解决方案 农村污水处理作为国家生态文明建设的重要一环&#xff0c;面临着诸多挑战&#xff0c;尤其是技术落后、管理分散、资源匮乏等问题。物联网技术的引入&#xff0c;为解决这些痛点提供了创新途径&#xff0c;实现了对污水处…...

lightningcss介绍及使用

lightningcss介绍及使用 一款使用 rust 编写的 css 解析器&#xff0c;转换器、及压缩器。 特性 特别快&#xff1a;可以在毫秒级别解析、压缩大量的 css 文件&#xff0c;而且比其他工具的打包结果更小给值添加类型&#xff1a;许多其他css解析器会将值解析成一个无类型的 …...

HTTP服务的应用

1、编辑json请求参数&#xff1b; 2、把json发送到服务url&#xff0c;接收服务的返回参数&#xff1b; 3、解析返回参数。 procedure TfrmCustomQuery.btnFullUpdateClick(Sender: TObject); varfrm: TfrmInputQueryConditionEX;b_OK: Boolean;sBeginDate, sEndDate, sJSON…...