- 博客(84)
- 收藏
- 关注
RSS订阅原创 JS 删除数组元素（5种方法）
filter() 方法的最大优势是它不会修改原数组，它会返回一个新的数组，包含通过测试的元素。splice() 方法可以从数组中添加或删除元素，它会修改原数组，直接改变数组的内容。选择合适的删除方法可以根据具体的需求，例如，是否需要修改原数组，是否需要返回新数组，是否要删除指定位置的元素等等。delete 操作符可以删除数组的某个元素，但它不会改变数组的长度，只会将该元素的值设置为 undefined。splice()：可以删除数组中的任意位置元素，并且可以删除多个元素，直接修改原数组。
2025-01-05 20:10:38
911
原创 无限级菜单遍历取值
很多情况下，我们会拿到一个n多层的数据对象，需要我们去遍历、取值、展示。我最近遇到的需求是，遍历无限极数据对象，如果对象有子菜单，则展示弹出框，弹出框中为子菜单的树形菜单，可点击跳转；版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.youkuaiyun.com/weixin_42812634/article/details/124021589。console.log(e, "获取路由失败");如此，便完成了，欢迎大家留言讨论！
2025-01-05 20:08:55
108
原创 js树形菜单
总体来说，这段 CSS 代码重点在于构建页面的基本布局结构，包括侧边栏、主体内容区等，同时通过设置各种元素的样式、交互效果来提升页面的视觉呈现和用户交互体验，营造出清晰、美观且易用的页面效果。元素构成，它们将页面划分为两部分，分别承担不同的功能，整体呈现出一种侧边栏与主体内容区的布局结构，很可能与前面提到的 CSS 样式代码配合使用来构建完整的页面效果。，可能用于在菜单中显示箭头图标（例如用于指示菜单的展开或收起方向等），使其在水平方向上处于合适的位置，配合菜单的整体布局呈现出相应的视觉效果。
2025-01-05 20:08:04
827
原创 通过递归实现多级联动
首先获取所有菜单值封装到集合中，然后将所有菜单数据传到构造多级菜单的方法中，在多级菜单的构造方法中我们首先确定最终返回的集合（其实也就是一个父亲菜单节点），然后遍历所有菜单找到根节点父菜单，设置子菜单的level层级，并根据顶层菜单利用所有菜单数据封装到最终集合中。//2.然后将子菜单中的id值取出来，封装到集合idList中，因为子菜单对于它的子菜单为父菜单，所以这里进行递归。其实很简单，也是找当前父菜单的子菜单，然后对子菜单进行递归就好了，所有的id添加到集合中，最后delete行删除。
2025-01-05 20:07:48
237
原创 js分页功能
总体而言，这段 CSS 代码重点在于对页面不同功能区域（如表格、底部操作区等）的元素进行样式设定，同时打造了一些具有特定视觉效果（如遮罩层、弹出框等）和交互暗示（如可点击的段落元素）的元素样式，为构建一个完整且功能丰富的页面视觉布局和交互体验奠定基础。的内容，重新构建和更新页面上与分页展示相关的各个部分，比如表格主体数据、页面底部信息以及分页按钮等，确保页面展示与当前的页面状态（是否成功切换到上一页或者处于首页提示状态）相匹配。它首先会对输入框中的值进行合法性验证，若输入的值在合理范围内（小于等于总页数。
2024-12-23 13:49:49
938
原创 js三级联动
事件处理函数，意味着当用户在下拉菜单中选择了不同的选项时，对应的 JavaScript 函数就会被触发执行，从而实现根据用户选择来更新后续下拉菜单内容或者进行其他相关操作的功能，例如通过 JavaScript 代码动态地填充下级下拉菜单的选项内容等。属性，它们是用于构建地区选择的级联下拉菜单结构，即先选择省份，然后根据所选省份动态加载并选择对应的市，再依据所选市来选择对应的县等，以此来精确获取用户所在的具体地区信息。变量关联）的选项内容，实现地区选择的级联效果，逐步精确地选择所在的具体县（或区）信息。
2024-12-23 09:42:55
734
原创 js简单购物车
这段 HTML 代码构建了一个简单购物车页面的基本结构，包含了购物车标题、商品信息展示表格（表头、主体内容及表尾）、添加商品相关的输入框与操作按钮以及用于显示成功提示等信息的固定提示栏，通过各个元素的组合实现了展示购物车中商品详情、对商品进行数量调整、编辑删除商品以及添加新商品等基本功能，同时能反馈操作结果相关信息。同时，还会根据商品的数量和价格信息计算出购物车中商品的总价和总数量，并更新相应页面元素的内容，实现购物车商品信息的完整展示以及总价、总数量的实时统计显示功能。它通过将与编辑相关的特定元素的。
2024-12-23 08:48:28
682
原创 js数据排序模糊搜索
这段代码定义了一个名为boss的函数，用于对data数据进行排序操作，并且通过一个布尔变量e来控制排序的顺序（升序或降序），每次点击调用该函数时，会切换排序顺序并重新渲染数据到页面上，实现根据销量数据对展示内容进行动态排序的交互功能。声明了一个布尔类型的变量e，用于标记当前的排序顺序状态，初始值为false，它将用于区分是按照升序还是降序对数据进行排序。e = false;});});条件判断切换排序顺序在boss函数内部，首先通过if条件语句判断变量e。
2024-12-22 11:20:11
662
原创 js之九宫格抽奖
元素的背景颜色来营造动态效果，根据计数情况调整每次操作的时间间隔，并且判断是否达到特定条件来决定停止定时器、给出中奖提示以及重置相关变量和恢复按钮点击功能等操作，整体控制着整个交互流程的进展和结束状态。这样做的目的是为了避免用户重复点击按钮导致逻辑混乱或者不符合预期的多次操作，确保整个交互流程按照既定的规则进行，一次点击启动后就进入相应的后续流程，不能再次通过点击按钮来干扰。函数，恢复按钮的点击功能，使得用户可以再次点击按钮来启动下一轮的交互流程。盒子内的不同位置，形成一种类似九宫格的布局效果，每个。
2024-12-22 08:43:59
662
原创 js之数字抽奖
用户输入年龄后点击提交，根据年龄范围进行不同提示，若年龄大于等于 65 则显示隐藏的输入框和按钮，并在 10 秒后执行抽奖结果判断函数。，方便后续通过 JavaScript 等方式来获取用户在此输入框中输入的值，常用于需要接收数字类型数据的场景，比如输入年龄、数量等信息。）重新隐藏起来，并且重置了相关变量的值以及清空对应输入框的内容，是抽奖相关操作结束后的一些清理和页面状态还原工作。，使其重新隐藏起来，恢复到抽奖操作前的隐藏状态，起到还原页面布局的作用。的值进行不同的提示操作，之后将页面上两个隐藏元素（
2024-12-22 08:12:11
687
原创 js猜数字游戏
函数获取用户输入），然后将用户输入的数字和一个预先设定好的随机数进行比较，如果猜的数字大于随机数，就弹出提示 “sorry，你猜大了”；如果猜的数字小于随机数，就弹出提示 “sorry，你猜小了”；要是猜的数字恰好等于随机数，就弹出 “恭喜你，你猜对了！对象提供的相关数学方法来实现随机数生成的功能，在很多需要随机取值的应用场景中（比如游戏中随机生成道具数量、抽奖系统中随机确定奖项等）都可能会用到这样的函数。它会在一个无限循环（）中，不断提示用户输入一个在 1 到 10 之间的数字（通过。
2024-12-22 07:44:10
118
原创 js隔行换色
通过为表格的奇数行和偶数行设置不同的背景颜色，能够让用户更清晰地区分每一行的数据，便于查看和浏览表格内容，尤其在表格行数较多时，这种视觉区分效果更加明显。元素添加了一个点击事件监听器，目的是实现当用户点击表格中某一行里的 “删除” 按钮时，能够将包含该按钮的这一整行表格数据从页面中移除，并且在删除行之后调用。（表格单元格）元素。，将该行的背景颜色设置为白色，从而和奇数行的粉色背景形成交替的视觉效果，使表格内容更加清晰、易于查看。函数时，都会更新表格中每一行的序号显示，使其能正确反映该行在表格中的顺序位置。
2024-12-21 20:06:16
493
原创 利用js实现轮播图效果
通过对 HTML、CSS 和 JS 代码的深入剖析，可以更好地理解轮播图功能的实现原理，同时针对重点和难点采取相应的解决措施，能够开发出性能优良、兼容性好且交互丰富的轮播图组件。这表示当`round_box_children`元素的`margin - left`属性发生变化时，会在0.5秒内平滑过渡.- 这样可以确保轮播图在一个固定大小的区域内展示，并且不会出现内容溢出的情况。- 在JavaScript代码中，有函数用于页面加载时获取数据。属性用于实现页面切换时的平滑动画效果。2. 轮播图页面样式。
2024-12-21 17:11:35
1116
原创 js 删除数组中指定元素——5种方式
如果我们需要删除数组中的元素，可以使用 splice() 方法。除了使用 splice() 方法，我们还可以使用 filter() 方法来删除数组中的元素。pop() 和 shift() 方法可用于删除数组的最后一个元素和第一个元素。如果我们想删除数组中的特定元素，可以使用这些方法与 indexOf() 方法结合使用。slice() 方法是一个纯函数，它不会改变原始数组，而是返回一个新的数组，该数组包含从开始到结束（不包含结束）的元素。ES6 中的 filter() 方法也可以用于删除数组中的元素。
2024-12-19 19:41:52
1806
原创 js（递归函数）实现树型菜单
str += `<p class="one" onclick="but(this)">${item.name}<img src="./img/下拉.png" style="height: 20px;"name":"三级菜单1-2-1""name":"三级菜单1-2-2""name":"三级菜单2-2-1""name":"三级菜单2-2-2""name":"三级菜单2-2-3""name":"三级菜单3-2-2""name":"三级菜单4-2-2""name":"三级菜单5-2-2"
2024-12-19 19:40:50
837
原创 详解js跨页面传参以及API的解释
同时，也可以通过调用第三方API，比如百度地图API、高德地图API、天气查询API等，来获取地图、天气等信息，丰富我们的应用功能。API（Application Programming Interface，应用程序编程接口）是一组定义了软件系统如何与其他系统进行交互的接口，提供给开发者使用的一些函数、类、方法、协议等，用于访问外部系统或服务的功能。比如微信提供的获取用户信息、发送消息、支付等功能，淘宝提供的搜索商品、下单、查询订单等功能，都是通过API向外部系统或服务发送请求，获取数据或执行操作。
2024-12-17 18:49:43
227
原创 js的递归函数——实现可收放的树形菜单
树形菜单的主要作用是将信息层次化，将复杂的信息结构变得更加清晰和直观。树形菜单是一种常见的网站导航方式，它通常由多个层级的菜单项组成，每个菜单项可以有子菜单项。树形菜单就是这样的东西，点击上一级，显示下一级，无限循环，一直逐层显示下一级。我们先取出这个元素，然后将生成的HTML代码插入到这个元素的innerHTML属性中，即可显示出树形菜单。首先，我们需要一个数据结构来表示树形菜单，通常可以使用嵌套的对象或数组来表示。层次化展示：树形菜单可以将信息按照层级展示，使用户能够更加清晰地理解信息之间的关系。
2024-12-17 18:48:46
140
原创 html5中按钮点击事件,javascript按钮点击事件
function myfun1(){//设置表单属性 //如果对[单选按钮]进行了选择就执行 if(myform2.button2.value){ myform.formname.value=myform.name;点击后执行start()，再次点击关闭start()，思路是在外面套一个父函数，var toggole = true;function start() { if (toggole) { // 单数次点击，你想干什么 } else { // 偶数次点击，你又想干什么 } toggole =。
2024-12-12 19:44:52
385
原创 前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
注册</button><button id="loginButton" class="button">登录</button><button id="loginButton" class="button">登录
2024-12-12 19:44:00
1039
原创 JavaScriptDOM节点操作与BOM
总结：firstChild、lastChild、previousSibling、nextSibling获取到的都是文本，如果没有就是文本节点名称#text， firstElementChild、lastElementChild、previousElementSibling、nextElementSibling获取到的都是标签，如果没有就是空。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。-- 协议（http/https）主机（域名。
2024-12-11 20:38:21
312
原创 JS BOM定时器的实现
/执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数.....<input type="button" value="停止" id="btn"/>//参数2:时间---毫秒---1000毫秒--1秒。//BOM中有两个定时器---计时器。//参数:要清理的定时的id的值。//返回值就是定时器的id值。//点击按钮,停止定时器。
2024-12-06 13:16:40
178
原创 js bom操作方法
BOM缺乏标准，javascript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部份。BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。location则是与地址栏内容相关，比如想要跳转到某个页面，或者通过URL获取一定的内容。2.它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。BOM部分主要是针对浏览器的内容，其中常用的就是window对象和location。
2024-12-06 13:16:03
184
原创 js给对象动态添加属性的2种方法
因为数据是动态渲染的，所以需要动态的给他添加一个flag标记，就得在数据渲染之前先拿到，然后再添加一个自己需要的比如isHover属性，然后就渲染处理之后的数据，从而就能够判断是否显示鼠标选中的效果。原文链接：https://blog.youkuaiyun.com/qq_45955391/article/details/121791615。// 第一种方法，给对象动态添加属性 for of 根据对象。type: "同步课程",grade: "一年级",type: "同步课程",grade: "一年级",
2024-12-06 13:13:37
250
原创 给JS对象添加属性和方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.youkuaiyun.com/yingleiming/article/details/114359622。方式三：通过 prototype (原型)添加。方式一：定义对象时，直接添加属性和方法。方式二：通过"对象.属性名"添加。
2024-12-06 13:12:38
360
原创 js给对象添加属性
/ 使用方括号表示法给对象添加属性。原文链接：https://blog.youkuaiyun.com/qq_67293098/article/details/136340873。// 使用点表示法给对象添加属性。方法四：使用 Object.defineProperties() 方法一次性添加多个属性。value: propertyValue, // 属性值。enumerable: true, // 是否可枚举。// 创建一个空对象。// 创建一个空对象。// 创建一个空对象。// 创建一个空对象。
2024-12-06 13:09:48
1261
原创 JS 之 DOM详解
div id="abc" class="box" title="box" age="18" height="1.88">我是box</div>tip : documentElement、body、head等都是document的属性，但是我们自己创建的元素就不是，所以不能直接获取。获取到一个元素（Element）后，可以根据这个元素去获取其他的元素，这称之为元素之间的导航。获取到一个节点（Node）后，可以根据这个节点去获取其他的节点，这称之为节点之间的导航。
2024-12-06 13:07:24
1451
原创 JavaScript的常用内置对象
使程序随机生成一个1~10之间的数字，并让用户输入一个数字，判断这两个数的大小，如果用户输入的数字大于随机数，那么提示“你猜大了”，如果用户输入的数字小于随机数，则提示“你猜小了”，如果两个数字相等，就提示“恭喜你，猜对了”，结束程序。JavaScript数组对象提供了添加或删除元素的方法，可以实现在数组的末尾或开头添加新的数组元素，或在数组的末尾或开头移出数组元素。push()和unshift()方法的返回值是新数组的长度，而pop()和shift()方法返回的是移出的数组元素。
2024-12-06 13:05:38
91
原创 JavaScript常用对象
该方法可以根据正则表达式，从一个字符串中将符合条件的内容提取出来，默认情况下我们的match()只会找到第一个符合要求的内容，找到以后就停止检索，我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容，可以为一个正则表达式设置多个匹配模式，且顺序无所谓，match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果。例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。
2024-12-06 13:04:38
245
原创 JS对象常用方法总结
Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。与Object.entries()相反。冻结对象是指那些不能添加新的属性，不能修改已有属性的值，不能删除已有属性，以及不能修改已有属性的可枚举性、可配置性、可写性的对象。Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。
2024-12-06 13:03:23
451
原创 javascript函数
与局部变量对应的就是局部函数,局部函数是在函数中定义的,外部函数可以直接调用其内部的函数,不是外部函数不可以调用其内部函数,所以只有当外部函数被调用时,内部函数才会被执行。javascript中的函数没有声明返回类型,当函数想要返回值的时候.直接在函数后面加return语句即可,假如不添加就表明该函数没有任何的返回值。//***************测试arguments。//*************变量名相同,局部变量会覆盖全局变量。//******************外部函数能调用其内部函数。
2024-12-06 13:00:00
693
原创 JavaScript变量-注意事项-for循环
/ var age;// 声明变量 没有赋值 默认就是undefined。// 提示用户输入姓名 年龄 点击的是取消按钮 值:null。var name = prompt('请输入姓名');var age = prompt('请输入年龄');// 把用户输入的姓名 年龄 和年龄打印出来。// 1. 使用var关键字吧声明一个变量。console.log('年龄', age);// 3. 弹框显示变量的值。// 2. 给变量赋值。// 声明变量且赋值。使用var关键字 声明一个变量。
2024-12-06 12:59:08
179
原创 js（递归函数）实现树型菜单
str += `<p class="one" onclick="but(this)">${item.name}<img src="./img/下拉.png" style="height: 20px;"name":"三级菜单1-2-1""name":"三级菜单1-2-2""name":"三级菜单2-2-1""name":"三级菜单2-2-2""name":"三级菜单2-2-3""name":"三级菜单3-2-2""name":"三级菜单4-2-2""name":"三级菜单5-2-2"">数据分类</h3>
2024-12-06 12:57:29
453
原创 js递归处理数据，并且渲染页面
/跨列数为 总列数 - 已存在数列数 + 自身1。原文链接：https://blog.youkuaiyun.com/qq_32318433/article/details/74273239。if(i >= arr_length){ //超出当前数组长度。i++){ //跨列长度。//数组深度,result,shuj。
2024-12-06 12:55:23
344
原创 JS中【命名函数】VS【匿名函数】 的区别
例子2：匿名函数调用！// 调用储存了匿名函数的fn2。// 调用储存了匿名函数的fn2。function 函数名（参数）{。function 函数名（参数）{。// 调用命名函数fn1。// 调用命名函数fn1。例子1：命名函数调用可以在函数体之后。例子2：命名函数调用可以在函数体之前。例子1：匿名函数调用可以在函数体之后。2.调用可以在函数体之前/之后。2.调用只能在函数体之后。
2024-12-05 21:00:41
310
原创 javaScript之箭头函数
它的引入为函数表达式提供了更简洁的语法，并且不绑定自己的this、arguments、super或new.target。但在箭头函数中，this的值始终指向定义函数时的上下文。// window 箭头函数this不能改变，call与apply只能调用箭头函数。总的来说，箭头函数提供了一种更简洁、更直观的方式来定义函数，并且解决了传统函数中this指向问题，使代码更加清晰和易于维护。5、箭头函数的this不能发生改变，call和apply能调用箭头函数。相比于传统的函数表达式，箭头函数语法更简洁，更易读。
2024-12-05 20:58:24
131
原创 js 箭头函数详解
原因箭头函数没有this，箭头函数的this是继承父执行上下文里面的this ，这里箭头函数的执行上下文是函数fn1()，所以它就继承了fn1()的this，obj1调用的fn1，所以fn1的this指向obj1， 所以obj1.num 为 22。es6 新增了使用胖箭头（=>）语法定义函数表达式的能力，很大程度上，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。使用大括号就说明包含“函数体”，可以在一个函数中包含多条语句，跟常规的函数一样。// 相当于 return a + b;
2024-12-05 19:45:15
106
原创 浅谈Javascript的闭包
上例中，每个函数返回值都是10.因为每个函数的作用域链中保存 createFunctions()活动对象。从此例中可以看出f1()是f2()的父函数，f2()被赋予全局变量，导致f2()始终在内存中，f2()依赖f1(),f1()始终在内存中。nAdd的一个值是匿名函数，匿名函数本身也是一个闭包。f2()读取f1()中的局部变量，将f2()作为返回值，我们可以在f1()读取它的内部变量。需要注意的是，函数内部声明变量的时候，一定要用var 命令。理解闭包，首先我们先要了解函数的作用域：内部函数与外部函数。
2024-12-05 19:43:39
262
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人