- 博客(151)
- 收藏
- 关注
RSS订阅原创 APIs之事件类型之焦点事件以及搜索框案例？
本文介绍了JavaScript中focus（获取焦点）和blur（失去焦点）事件的应用。通过获取文本框元素并添加focus和blur事件监听器，实现搜索框交互效果：当文本框获得焦点时显示结果列表并添加样式，失去焦点时隐藏列表。文章包含完整的HTML结构、CSS样式和JavaScript代码示例，演示如何创建一个类似小米官网的搜索框交互功能，包括边框颜色变化和下拉菜单的显示/隐藏控制。
2026-06-08 17:46:20
44
原创 APIs之事件类型除了点击click事件还有哪些？
本文简要介绍了四种常见的网页交互事件：1.鼠标事件（click点击、mouseenter经过、mouseleave离开）；2.焦点事件（focus获取焦点、blur失去焦点）；3.键盘事件（keydown按键按下、keyup按键释放）；4.文本事件（input输入时触发）。这些事件分别对应鼠标操作、表单焦点切换、键盘输入和文本输入等用户交互行为，是网页开发中实现动态交互的基础事件类型。
2026-06-08 16:59:12
215
原创 APIs之随机点名案例详解？
本文介绍了一个随机点名功能的实现方法。功能包括：点击开始按钮随机显示数组中的名字，点击结束按钮则停止并移除当前显示的名字。核心实现是使用定时器快速切换显示，当数组只剩一个名字时禁用两个按钮。HTML部分包含显示区域和开始/结束按钮，CSS设置了基本样式。实现步骤分为开始按钮模块（随机抽取并显示名字）和结束按钮模块（停止定时器并移除当前名字）。最终效果是每次点击结束会保留一个名字并从数组中移除，直到只剩一个名字时禁用所有操作。
2026-06-07 14:46:37
223
原创 APIs之什么是事件？什么是事件监听？
本文介绍了DOM事件监听的基本概念和应用。事件监听是通过addEventListener()方法为元素绑定特定事件（如click、mouseover）和响应函数，实现交互功能。文章包含两个案例：1）按钮点击弹窗；2）关闭广告（通过点击叉号隐藏父容器）。核心要点包括：事件三要素（事件源、类型、函数）、方法语法（注意引号使用）及通过修改display样式实现元素显隐控制。代码示例展示了从元素获取到事件绑定的完整流程。
2026-06-02 11:20:32
238
原创 APIs之定时器函数之轮播图定时器版案例详解？
本文实现了一个自动轮播图功能，主要特点包括：1）使用数组存储图片URL和标题信息；2）通过定时器实现1秒自动切换；3）同步更新图片、标题和小圆点高亮状态；4）实现无缝循环播放（最后一张自动跳转第一张）。代码结构清晰，包含HTML布局、CSS样式和JavaScript逻辑三部分，其中JS部分通过DOM操作动态修改图片、文字和小圆点样式，完成轮播效果。
2026-05-28 16:39:12
35
原创 APIs之定时器函数之阅读注册协议案例详解？
摘要：本文实现了一个注册协议阅读倒计时功能。初始状态下按钮禁用，通过JavaScript获取按钮元素并设置60秒倒计时。使用setInterval每秒更新按钮文字显示剩余秒数，当倒计时归零时清除定时器，将按钮文字改为"同意"并解除禁用状态。该功能确保用户必须阅读协议60秒后才能点击同意，符合注册流程要求。核心代码包括元素获取、定时器设置和状态变更逻辑。
2026-05-26 09:38:07
30
原创 APIs之定时器函数之间歇函数详解？
定时器间歇函数setInterval可用于网页自动执行重复代码，如倒计时功能。其基本用法为setInterval(函数,间隔时间)，时间单位为毫秒。定时器会返回唯一ID，可通过clearInterval(变量名)关闭指定定时器。使用时需注意每个定时器都是独立的，关闭时要确保操作正确的定时器。
2026-03-02 21:07:11
63
原创 APIs之操作元素属性之自定义属性？
HTML5中提供了标准属性（如class、id等）和自定义属性两种操作方式。标准属性可直接使用点语法操作，而自定义属性需以"data-"开头定义，并通过DOM对象的dataset属性获取。例如，获取一个div元素后，可通过one.dataset.id访问其data-id属性值，one.dataset.spm访问data-spm属性值。dataset会将所有自定义属性以对象形式返回，方便开发者操作。这种方法简化了自定义属性的获取过程，使前端开发更加便捷高效。
2026-03-02 13:51:22
76
原创 APIs之如何操作表单元素的属性？
本文介绍了表单元素的操作属性和布尔属性。在操作属性方面，通过DOM可以获取和设置表单的值(value)和类型(type)，如将文本框转换为密码框。需要注意的是，innerHTML无法获取表单内容。在布尔属性方面，checked、disabled等属性使用布尔值控制状态，true表示启用该属性，false表示移除。特别指出，checked='true'也能勾选复选框但不推荐使用，字符串中只有空字符串会被视为false。这些属性和方法为表单交互提供了灵活的控制方式。
2026-03-01 14:36:12
70
原创 APIs之如何通过 classList操作类控制css?
摘要：本文介绍了使用classList操作元素类名的方法，包括add()添加类、remove()删除类和toggle()切换类。通过获取DOM元素后，可以灵活地修改其样式类而不影响原有类名。相较于className属性，classList在修改多个样式时更方便，且不会覆盖已有类名。文中还提供了具体案例，展示如何对一个div元素进行类名的增删改操作。
2026-02-28 18:10:43
337
原创 APIs之修改DOM元素的属性？
摘要：本文介绍了通过JavaScript操作元素属性和样式的两种方法。第一种是直接操作元素属性（如src、href等），通过"对象.属性=值"的语法实现，示例展示了如何随机更换图片。第二种是操作样式属性，可通过style属性（如document.body.style.backgroundImage）或className修改CSS样式，后者适合批量修改样式时使用。文中提供了完整的HTML代码示例，演示了如何利用随机函数实现页面背景图片的随机切换功能。
2025-11-26 21:38:42
540
原创 APIs之如何修改DOM元素的内容？
摘要：本文介绍了使用DOM操作修改元素文本内容的两种方法：innerText和innerHTML。innerText用于纯文本更新，不解析HTML标签；innerHTML则支持标签解析。文章通过代码示例演示了两种方法的应用场景，并提供了一个年会抽奖案例的实现思路，包括随机选取数组元素并通过DOM操作显示获奖信息。案例展示了如何结合数组操作和DOM文本修改功能实现动态内容更新。
2025-11-26 16:12:27
236
原创 APIs之如何获取DOM元素？
本文介绍了通过JavaScript获取DOM元素的几种方法。重点讲解了使用document.querySelector()和document.querySelectorAll()根据CSS选择器获取元素的方式，前者返回匹配的第一个元素，后者返回所有匹配元素的集合。同时提及了其他传统方法：getElementById()、getElementsByTagName()和getElementsByClassName()。文章通过具体案例展示了如何操作获取到的DOM元素，并强调querySelectorAll()返
2025-11-24 21:29:33
501
1
原创 APIs之WEB API的基本认知是什么？
本文介绍了DOM（文档对象模型）的基本概念与应用。DOM是浏览器提供的API，用于操作HTML/XML文档内容，主要功能包括实现网页特效和用户交互。DOM树以树状结构展现HTML文档标签间的关系，DOM对象则是浏览器将HTML标签转换为的JS对象，其属性与标签属性一一对应。核心思想是将网页内容视为对象处理，其中document对象作为DOM的核心，提供了访问和操作网页内容的方法（如document.write()）。全文概括了DOM的定义、结构模型及其在网页开发中的重要作用。
2025-11-24 20:20:41
358
原创 打开VSCode的时候，提示该快捷方式无法正常工作应该怎么办？
VSCode快捷方式失效的解决方法：当快捷方式提示"Code.exe"指向项目已更改时，首先右键属性查看目标路径，找到安装目录下的带"_"文件夹，将其内容剪切到上级目录。删除原快捷方式后，重新创建Code.exe的桌面快捷方式即可恢复正常。该方法通过修正文件路径和重建快捷方式解决了图标变白、无法启动的问题。
2025-11-24 20:07:34
530
原创 APIs之声明变量const优先原则？
【摘要】JavaScript变量声明应优先使用const，其次考虑let，避免使用var。const适用于不会重新赋值的变量，对于数组和对象等引用类型，只要地址不变仍可修改内容。let用于需要重新赋值的基本类型或改变地址的引用类型。实际开发中建议：优先用const，发现需要修改时再改为let。案例显示，基本类型重新赋值必须用let，而引用类型内容修改可用const。数组和对象推荐用const声明，但重新赋值新数组/对象时仍需用let。
2025-11-19 18:22:07
261
原创 Javascript之基本数据类型和引用数据类型？
本文介绍了JavaScript中基本数据类型和引用类型的存储差异。基本数据类型（如number、string）直接存储在栈内存中，变量赋值时会创建独立副本；引用类型（如对象）存储在堆内存中，变量保存的是内存地址引用，赋值时传递的是引用而非副本。通过案例对比展示了修改基本类型变量不会影响原值，而修改引用类型变量会影响所有指向该对象的变量。理解这两种存储机制对避免编程错误至关重要。
2025-11-19 15:57:40
174
原创 Javascript对象之生成随机数案例？
文章摘要：本文包含三个编程练习：1) 猜数字游戏，用户有3次机会猜测1-10之间的随机数，程序会给出大小提示；2) 随机颜色生成函数，根据布尔参数返回十六进制或RGB格式的颜色值；3) 使用for循环重构原有《学成》在线页面的渲染方式。这些练习涉及条件判断、随机数生成、循环结构等JavaScript基础编程技能。
2025-11-18 19:03:04
192
原创 Javascript对象之内置对象都有哪些以及详解Math.random?
JavaScript内置对象Math提供了多种数学运算方法，包括生成随机数、取整、求绝对值等。Math.random()可生成0-1之间的随机小数，结合Math.floor()能实现任意范围的随机整数。通过公式Math.floor(Math.random()*(M-N+1))+N可生成N-M间的随机整数。文章还演示了随机点名案例，从数组中随机选取元素，并建议改进为不重复选取的方案。这些方法为开发者处理数学运算和随机选择需求提供了便利。
2025-11-18 17:13:59
461
原创 Javascript对象之遍历对象?
本文介绍了使用for...in循环遍历对象的方法。首先指出for循环不适用于对象遍历的原因：对象是无序键值对且没有length属性。然后详细说明for...in的用法，强调k变量代表属性名，必须使用obj[k]获取属性值。最后通过学生信息表格案例，演示如何将对象数组数据渲染成表格，其中使用传统for循环遍历数组，通过students[i].属性名方式获取每个学生的具体信息。案例包含完整的HTML和CSS代码，展示了前端数据渲染的典型应用场景。
2025-11-17 11:58:01
310
原创 Javascript对象之对象中的方法？
本文介绍了方法的定义及其在对象中的实现。方法本质上是函数，在对象内部称为方法，由方法名和函数通过":"分隔组成。对象中的方法可以通过点号调用，支持参数传递且调用时需加括号。方法名通常省略引号，仅在包含特殊字符时使用。对象中的方法与独立函数的区别在于归属关系，方法依附于特定对象。
2025-11-17 10:35:26
143
原创 Javascript对象之对象的操作增删改查？
本文介绍了JavaScript中对象属性的基本操作：1. 查询（对象.属性名）；2. 修改（对象.属性=新值）；3. 新增（对象.新属性=新值）；4. 删除（delete 对象.属性）。同时讲解了包含特殊字符属性的访问方法（对象['属性名']）。文章通过商品对象示例演示了这些操作的实际应用，包括修改商品名称、新增颜色属性等操作。最后指出了使用方括号访问属性是最常用的方法。
2025-11-13 17:37:02
220
原创 Javascript对象之什么是对象？以及对象的使用方法？
本文摘要：JavaScript中对象是一种无序的数据集合，用于描述特定事物。对象由属性和方法组成：属性描述特征（名词性），方法描述行为（动词性）。声明对象可使用let obj = {}或let obj = new Object()语法，属性以键值对形式出现，用冒号分隔，多个属性用逗号隔开。文章通过"person"和"goods"两个示例，分别展示了描述人物信息和商品信息的对象定义方法，其中商品对象需包含名称、编号、重量和产地等属性。（134字）
2025-11-12 16:27:02
370
原创 Javascript函数之封装计算时间函数以及逻辑中断和Bollean补充
本文主要介绍了JavaScript中的几个重要概念：1. 时间转换函数的封装，通过输入秒数计算时分秒，需要注意补零和默认值处理；2. 逻辑运算符的短路特性，&&和||在不同条件下会中断右边代码执行；3. 布尔类型转换规则，空字符串、0、undefined等会转换为false；4. 隐式类型转换的几种情况，包括字符串拼接、数学运算中的类型转换规则，以及null和undefined的特殊处理。这些概念对理解JavaScript类型系统和逻辑运算具有重要意义。
2025-11-12 15:40:24
656
原创 Javascript函数之匿名函数以及立即执行函数的使用方法？
JavaScript中的函数分为具名函数和匿名函数。匿名函数没有名称，需通过函数表达式或立即执行函数来使用。函数表达式将匿名函数赋值给变量，调用时需先声明后使用，与具名函数不同。立即执行函数无需调用自动执行，可避免全局污染，有两种写法：(function(){})()或(function(){}())，多个立即函数间需加分号分隔。
2025-11-09 11:08:40
371
原创 Javascript函数之函数的作用域是什么？
【摘要】作用域分为全局作用域（整个script/js文件）和局部作用域（函数内部）。全局变量随处可访问，局部变量仅在函数内有效。特殊情况下，函数内未声明直接赋值的变量会成为全局变量（不推荐）。变量访问遵循"就近原则"：优先查找局部变量，未找到再向上一级作用域查找。作用域机制能增强程序可靠性，减少命名冲突。典型错误包括在作用域外访问let定义的变量（如for循环计数器i或函数内局部变量num2）。
2025-11-09 10:08:43
461
原创 Javascript函数之函数的返回值？
摘要：函数返回值指函数执行后通过return关键字返回的结果值。使用return可将数据传递给外部调用，且return后的代码不会执行。若无return，函数默认返回undefined。注意避免函数重复定义和参数数量不匹配的问题。练习示例包括求数组极值并返回结果，以及通过数组返回多个值。函数调用时应将返回值赋给变量以便后续使用。
2025-11-08 19:27:47
554
原创 Javascript函数之函数的参数以及默认参数？
函数传参语法：function 函数名(参数列表){}，参数列表声明函数需传入的参数个数，多个参数用逗号分隔。形参是声明时的参数，实参是调用时传入的实际参数。函数调用时需传入对应数量的实参，未传入则形参默认为undefined（可设置默认值）。示例包括求和函数、计算学生总分（数组参数）等。实参可以是变量，调用时会优先使用传入的实参值。注意处理未传参时的默认值问题，避免出现NaN等异常结果。
2025-11-07 23:29:12
441
原创 Javascript函数之函数的基本使用以及封装？
函数是执行特定任务的代码块，通过封装重复逻辑提高代码复用性。使用函数需先声明（function 函数名(){函数体}）后调用（函数名()），命名建议采用小驼峰式并带有动作前缀（如get、set等）。函数可多次调用，每次都会执行函数体代码。为增强灵活性，函数可带参数，避免为不同需求重复编写相似代码（如计算不同范围的数值和）。
2025-11-07 19:06:56
326
原创 Javascript数组案例-生成柱形图
摘要：该代码实现了一个动态生成季度数据柱形图的功能。用户通过四次弹窗输入四个季度的数据，程序将数据存入数组后，利用循环创建对应的柱形图div元素。每个柱形图的高度由用户输入值决定，宽度固定50px，背景色为粉色，并标注季度编号和具体数值。图表采用flex布局，包含左、下边框，整体居中显示，实现了基础的数据可视化效果。
2025-11-06 17:56:45
159
原创 Javascript操作数组之增加，修改，删除
本文介绍了JavaScript数组的基本操作方法，包括增删改查四种操作：1）修改数组元素可通过直接赋新值；2）添加元素使用push()在数组末尾添加或unshift()在开头添加；3）删除元素可通过pop()删除末尾元素，shift()删除开头元素，或splice()删除指定位置元素。每种方法都配有简单示例说明其语法和使用效果，帮助理解数组基本操作的方式。
2025-11-06 15:59:21
1062
原创 Javascript数组是什么以及数组的基本使用
【摘要】数组是按顺序保存数据的集合，通过下标访问元素。声明方式有字面量和Array构造函数两种。数组元素可通过下标取值，常用术语包括元素、下标和长度(length)。遍历数组通常使用for循环。练习案例演示了计算数组元素和及平均值的方法，以及通过比较获取数组最大值的算法流程。这些基础操作是掌握数组应用的关键，为数据处理提供了便利。
2025-11-06 12:17:04
221
原创 Javascript循环语句之for循环嵌套
本文介绍了for循环嵌套的基本语法和执行流程，外层循环每次执行都会完整执行内层循环。通过三个案例演示了嵌套循环的应用：1)打印5×5星星图案；2)打印递增行数的直角三角形；3)实现九九乘法表。重点说明外层循环控制行数，内层循环控制每行具体内容，且两个循环变量应当不同。举例说明了每天记5个单词连续3天的计算过程，帮助理解嵌套循环的执行机制。
2025-11-06 11:12:44
529
原创 Javascript循环语句之for循环数组
本文介绍了JavaScript中for循环的几种常见用法：1）遍历数组时需要注意数组索引从0开始；2）空数组的打印结果为[]，访问不存在的元素返回undefined；3）使用continue跳过当前循环或break终止整个循环；4）通过while(true)或for(;;)创建无限循环，需配合break退出。文章还通过示例展示了不同循环控制语句的执行效果差异。
2025-11-05 16:34:23
198
原创 Javascript循环语句之for循环
本文介绍了JavaScript中for循环的基本语法和应用。for循环通过将变量初始化、条件判断和变量变化集中书写，使代码更加清晰易读。文章详细讲解了for循环的执行流程，并通过三个实例演示其应用：1）输出1-100岁年龄；2）计算1-100之间所有偶数的和；3）打印5颗星星。重点说明了循环体执行顺序和注意事项，如求和时需将输出语句放在循环外，避免重复打印。这些示例展示了for循环在遍历和条件计算中的常见用法。
2025-11-05 15:45:55
233
原创 Javascript循环语句之退出循环
摘要：本文介绍了循环控制语句break和continue的区别与应用。break用于完全退出循环，而continue仅跳过当前迭代继续下次循环。通过"你爱我吗"对话框案例演示了break的实际用法。此外，还提出了一个简易ATM取款机综合案例，该案例利用while循环结合switch语句实现存款、取款、查询余额等功能，当用户输入4时使用break退出循环系统。这些案例展示了循环控制语句在实际编程中的典型应用场景。
2025-11-05 11:23:00
263
原创 Javascript循环语句之while循环大练习
本文介绍了三个简单编程案例：1) 输出1-100的数字序列；2) 计算1-100的累加和并输出结果；3) 计算1-100间所有偶数的和。重点分析了案例三的实现方法：通过声明累加变量sum，使用if语句筛选偶数，并将符合条件的数累加到sum中。这些案例展示了基础循环结构和条件判断的应用。
2025-11-05 10:08:44
244
原创 Javascript循环语句之while循环
本文介绍了while循环的基本概念和使用方法。while循环是在满足条件时重复执行代码块的结构，其语法为"while(条件){循环体}"。文章重点阐述了while循环的三个关键要素：变量的起始值、终止条件和变量变化量，并强调缺少终止条件会导致死循环。通过一个具体示例演示了如何使用while循环在网页上输出10次"月薪过万"并换行，展示了变量初始化(i=1)、循环条件(i<=10)和变量递增(i++)的完整应用过程。
2025-11-04 16:50:23
351
原创 Javascript分支语句之三元运算符，switch语句
本文介绍了JavaScript中的三元运算符和switch语句的用法。三元运算符通过"条件?代码1:代码2"语法实现条件判断，可用于取值和简写if-else逻辑。switch语句则通过比较值与case的严格相等性来执行对应代码块，需配合break避免穿透，适用于等值判断场景。文章包含两个三元运算符案例（求最大值和数字补0），以及一个switch语句案例（实现简单计算器功能），展示了这两种条件语句的实际应用。
2025-11-04 15:26:45
252
原创 Javascript分支语句之if双分支语句，多分支语句
本文介绍了if语句的双分支和多分支结构。双分支if语句用于二选一的情况，语法为if(条件){代码}else{代码}，通过用户登录和闰年判断案例说明其应用。多分支if语句适用于多个结果的情况，语法为if(条件1){代码1}else if(条件2){代码2}...else{代码n}，以成绩评定案例展示其使用方法。两种结构均通过条件判断来控制程序执行流程，实现不同条件下的差异化处理。
2025-11-04 10:51:47
307
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人