- 博客(36)
- 收藏
- 关注
RSS订阅原创 前端框架对比和选择
Next.js 提供了开箱即用的体验，特别是在 React 基础上增强了服务器端渲染（SSR）和静态站点生成（SSG）的能力，使得开发者可以轻松创建高性能、SEO 友好的应用。尽管如此，Angular 依赖的 RxJS 和模板中的双向数据绑定，仍需要开发者针对具体场景进行调优，如避免过多的数据订阅和解除不必要的绑定。不过，随着应用复杂度的增加，开发者仍需要手动优化性能，比如通过memoization 避免不必要的重新渲染、使用React.memo 缓存组件、优化状态管理等。React 的未来依然非常明朗。
2024-09-27 20:05:10
1134
原创 做一个能适配「手机」的网站需要注意什么
像现在主流会采用 H5 响应式布局，仅涉及前端的开发工作，代码量少，效果佳，是一种性价比比较高的选择，如果题主有意要进行网站建站，特别是想要手机浏览也有一定效果，可以选择这种~当然还有一种类似的方式叫自适应布局，俗称 AWD（AdaptiveWebDesign），同样是检测视口分辨率，判断不同尺寸和分辨率是什么设备，从而返回不同布局页面。最根本的区别在于，响应式页面的代码量少，但质量要求高，根据不同分辨率自动调整排版，而自适应页面需要根据不同设备准备不同的页面，这样前期的开发工作就大了很多。
2024-09-27 20:02:56
291
原创 排行榜思路
首先获取input框，然后给input添加一个监听事件，先获取到用户输入里面的值，声明一个变量命名为arr的空数组，for循环遍历data的所有数据，用于筛选出包含input框的值。首先命名i的值为1的变量，在函数里面判断，当i == 1的时候说明是第一次点击，需要升序，然后将i的值赋为2，else说明是第二次点击，需要降序，然后将值设为1。判断data里面的数据是否包含input框的值，如果有就添加到新数组里面，如果没有就显示暂无数据，然后刷新页面，也就是调用一下渲染函数。
2024-08-04 23:22:42
182
原创 分页功能分析
首先先获取到每个option框里面的值，然后根据点击选择的value值，将值赋给num，然后将数据渲染到页面上，绑定一个onchange事件，然后在函数里面切记先将str的值和里面的页码的值也要清空，然后获取选中项的索引，然后将值赋给num。然后用if判断，我这里判断的时候总页数小于等于10的时候将页码全部显示出来，，然后接着else if判断，当总页数大于10的时候且当前页数远离总页数的时候，for循环渲染i的整条数据。input框，这里面用的是键盘的点击事件，enter键，键盘码为13。
2024-08-04 23:17:52
424
原创 树状菜单分析
将添加好的数组作为下面创建函数的实参的值，用于渲染页面，然后for循环遍历数组里面所有的数据，判断里面是否有子集，若有就递归渲染子节点并且字符串拼接箭头，若没有则渲染当前节点。然后在获取假数据里面判断的时候添加一个函数，for循环遍历里面所有的数据，然后判断pid等于0的数据，然后添加到新创建的空数组里面。添加点击事件，判断点击父节点的时候将子节点显示出来，将箭头旋转180度，并且给箭头添加过渡时间。首先先用ajax获取假数据。
2024-08-04 23:15:12
260
原创 ajax请求方式
设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行。10）complete：请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；该方法用于执行Ajax请求，常用于其他jQuery Ajax方法不能完成的请求，也许我们可以把它称为"jQuery中Ajax系列方法之母"。2）data：需发送到服务器的数据，GET与POST都可以，格式为{A: '...', B: '...'}4）timeout：请求超时时间，单位为毫秒，数值表示。
2024-08-04 23:13:15
113
原创 js轮播图制作思路
想要让小圆点对应图片的下标进行改变颜色，首先获取所有小圆点，小圆点的个数是图片个数减一，所以完全可以取用一个一样的下标，在计时器的判断里面用index.style.backgroundColor去改变相对应的图片的小圆点的颜色，但是前面的那个总要变回去，index - 1.style.backgroundColor将颜色改为原本的颜色。左箭头就是将图片向左移动，第一行添加清除左箭头的函数，也是为了防抖，首先要判断的是当index小于0的时候，将图片跳转到最后一张去，要添加定时器，也是为了用极短的时间过去。
2024-07-28 13:06:05
323
原创 页面传参功能
使用window.location.assign()进行页面跳转：与window.location.href类似，也可以用来进行页面跳转。使用window.location.href进行页面跳转：在源页面使用该方法，并指定目标页面的URL来实现跳转。在源页面，构建一个包含参数的URL，并使用window.location.href进行页面跳转。在源页面，设置window.location.hash属性为带有参数的字符串，并进行页面跳转。在目标页面，通过解析URL的查询字符串部分，获取参数值。
2024-07-28 13:05:10
394
原创 分页制作思路
首先先获取到每个option框里面的值，然后根据点击选择的value值，将值赋给num，然后将数据渲染到页面上，绑定一个onchange事件，然后在函数里面切记先将str的值和里面的页码的值也要清空，然后获取选中项的索引，然后将值赋给num。然后用if判断，我这里判断的时候总页数小于等于10的时候将页码全部显示出来，，然后接着else if判断，当总页数大于10的时候且当前页数远离总页数的时候，for循环渲染i的整条数据。input框，这里面用的是键盘的点击事件，enter键，键盘码为13。
2024-07-28 13:04:32
255
原创 商品列表里面的全选框
获取他们的下标，然后进行for循环，然后判断点击全选的时候是否有的之前已经添加上了，还有就是判断再次点击的时候要取消全选，包括他自己也一样的。当点击全选的时候遍历里面所有的checkbox，将checked属性设置为true。当点击全不选的时候遍历里面所有的checkbox，将checked属性设置为false。
2024-06-13 20:05:36
172
原创 js的事件（键盘）
当onkeydown连续触发的时候，第一次和第二次之间会有时间特别长呢，是为了防止误操作。onokeydomn 键盘被点下时，如果一直按着键盘的按键，则okeydomn事件会一直触发。对于onkeydoow来说，如果一直按着一个键不放，就连续触发。键盘事件一般绑定给一些可以获取焦点的对象，或者document。onkeyup 松开键盘的按键，不会连续触发。若点击则返回true，否则返回false。除了keycode，事件对象还提供了几个属性。
2024-06-12 08:38:30
167
原创 简单的购物车
添加里面的添加按钮，当用户点击过后要将里面的内容添加到上面去，这时候就要获取最大id了，因为有删除按钮，用下标的话id会重复，所以避免这种情况发生，所以直接取上面最大的id。就将三个隐藏的输入框进行显示，然后进行判断，商品名称不能为空，价格不能为空也不能是负数，数量也不能为负数，最小为0且数量不能为小数。input内修改内容的时候，要进行判断，当里面的价格不能为负数，数量不可以是负数，以及数量不可以是小数，商品名字而不能为空。利用函数，点击的时候调用，不点击的时候销毁。首先要用ajax将数据请求过来。
2024-06-01 13:11:04
145
原创 对象的概念
那么看代码就能看到，这个是小猫的基本信息，完整的信息只有对象能做到，所以知道对象的重要性了吧。对象可以保存所有类型的数据，也是储存一个东西的详情或一个人的最基本的信息所用的等等，访问对象的属性：对象里面的属性调用：对象.属性名；对象里面属性的另一种调用方式：对。什么是对象呢，在js里面除了没有属性和方法的值，一切万物皆是对象。的“键值对”中的键称为对象的属性，即对象中存储具体数据的项。的“键值对”中的“键”称为对象的方法，即对象中存储函数的项。象['属性名']，注意方括号里面的属性必须加上引号。
2024-05-30 08:18:07
119
原创 事件流的理解
什么是事件流呢，相当于页面加载js的顺序，当页面触发一个事件时，会按照一定的顺序来响应事件。DOM呢，将事件流分为了三个阶段，事件捕获，处于目标阶段，事件冒泡阶段。这个事件流单独拿出来说一说吧。
2024-05-30 08:11:21
170
原创 如何用函数的方式实现冒泡排序
这个是用一个arr形参然后接收的实参传过来的一维数组，然后循环遍历里面的值，进行判断里面左右两边谁大谁小，若左大则换位置，若右大就继续向下执行。无非就上将数组用形参和实参的方式，套用进函数里面，然后函数里面的写法和外面的写法都是一样的，注释写的都很详细了，那就上代码吧。
2024-05-28 13:46:11
87
原创 求数组中的平均值
数组中间的平均值，首先要想到的时候平均值是里面所有的值相加，然后除以长度，那么换算成代码就是，循环遍历里面每一个值，然后除以长度。上代码（代码上面都有注释的）
2024-05-26 13:56:44
283
原创 js什么是对象
在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。对象主要是为了更好的存储一组数据，对象中为每项数据设置了属性名称 可以访问数据更加语义化 数据结构清晰 表意明显。对象中存储具体数据的‘键值’中的‘键’称为对象的属性，即对象中存储具体数据的项。对象中存储函数的‘键值’中的‘键’称为对象的方法 即是对象中存储函数的项。对象的属性调用 对象.属性名 这个小点. 理解为 ‘的’的意思。JS中的对象表达结构更清晰，更强大。
2024-05-26 13:52:31
213
原创 计算数组中能被3整除的偶数和
抓重点，首先里面有两个条件，被三整除，偶数，而且这两个条件都必须满足的情况，所以if判断 的条件要用逻辑或，&&，或者 用两个for循环也可以，不过确实有些麻烦。这代码里面是三种方法，而且变量名我也懒得去改了，总体来说，只要能想明白了，再写就会轻松很多。
2024-05-25 14:40:47
273
原创 如何随机删除一个数组里面的数据
注释写的很明白了，其实只要记住代码的固定格式和含义就好了。很简单，用Math.random随机一个数字。然后用splice删除就好了。
2024-05-25 14:35:33
133
原创 js流程控制语句
该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行。while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。在程序中，一组被重复执行的语句被称为循环体，而能否继续重复执行，则取决于循环的终止条件。由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码，从而得到不同的结果。而do while是先执行一次后判断执行。
2024-05-19 18:09:46
720
1
原创 js数据类型
很多数据类型都没有搞清楚。在ES6的时候，我们认知的数据类型确实是 6种：Number、String、Boolean、undefined、object、Null，symbol。Symbol 类型的对象永远不相等，即便创建的时候传入相同的值。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后于用另一个包含的字符串填充该变量。toLocaleString( ):返回对象的字符串表示，该字符串与执行环境的地区对应。
2024-05-19 18:04:36
263
1
原创 什么是js，js的特点
安全性：js不允许直接访问本地的硬盘，而且不能将数据存放到服务器上，不允许对网络文件进 行 修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效的防止数据丢失。跨平台性：js仅依赖于浏览器本身，只要能运行浏览器，js都可以正常运行。js是一种直译式脚本语言，是一种动态类型，基于原型，弱类型的高级语言。基于原型：面向对象的一种方式，通过已存在的原型对象来实现面向对象。简单性：他的变量类型是采用弱类型，并未使用严苛的数据类型。特点：简单性，安全性，动态性，跨平台性。
2024-05-16 07:57:52
151
原创 如何用js去请求json里面的内容并显示在页面上
看到里面最后一行的注释了吧，用showGoods（data）这个只是函数名和参数随意就好，下面用函数里面的字符拼接去将想要显示的内容拼接出来，后面在用document去渲染到页面上就好啦，上代码。第四步定义响应执行的函数，当readyState属性发生变化时，会自动调用该方法。4：请求已完成且响应已就绪。第一步创建XMLHttpRequest对象。第五步，交互流程（这里面还分为5个阶段）这是请求json里面数据的方法，上代码。用js请求json里面的数据。第二步设置请求方式和请求地址。
2024-05-15 16:09:31
317
原创 用js实现隔行换色
首先要想的是，点击添加行的时候会新增一个tr标签，里面是内容，其次就是换过行之后，要判断是否要换颜色，隔一行就换颜色，所以可以用i % 2 == 1去判定是否需要换颜色，里面有具体的解释。
2024-05-12 12:09:49
241
原创 用js改变html的属性
元素.innerHTML = 内容 改变元素的内容（包括内部标签）可识别标签。元素.属性 = 属性值 改变html元素的属性值。元素.style.样式 = 样式值 改变html元素的样式。用js改变html属性。
2024-05-12 10:57:12
401
原创 点菜单换色
点击换色，首先可以用两种方法实现，点击任意一个菜单的时候，剩下的隐藏，不过位置得是一样的，还有一种就是点击之后直接改变背景颜色，我这里做的是点击任意一个菜单的时候剩下的隐藏。里面都是有具体的注释的，可以好好看一看。
2024-05-12 10:50:13
391
原创 九宫格抽奖
首先这个抽奖是顺时针，所以调每个奖品位置的时候要一个个的细调，也可以用弹性盒子，然后进行换位，剩下js的部分里面全部都有解析，不过后面差个初始化。
2024-05-12 10:46:34
378
原创 闭包函数及应用
闭包（closure）是一个函数和它所引用环境的组合。创建闭包的常见方式是在一个函数内部创建另一个函数，而该内部函数可以访问外部函数的局部变量，当外部函数执行完毕后，通常那些局部变量会被垃圾收集器回收，但因为闭包的存在，这些变量会继续存在于内存中。当返回fun的2的值时，就在执行inner1时，每次执行一次i就会加1。如果新创建一个变量里面包含fun1时，里面的值就会从i的初始值开始算。如果不返回fun2的值的时候输出fun的一的值时候就会出错。因为你写了并没有执行，并没有返回所以会是错的。
2024-04-26 17:27:43
209
1
原创 for循环
里面的初始值就是最开始的值，然后条件就是里面的取值范围，操作是当每次循环的时候这个东西干什么了。① ② ④ ③ ② ④ ③ ② ④ ③ ...... ② 循环结束。for（初始值，条件，操作 ）{所以for循环在条件不成立时会终止。首先for循环的格式。
2024-04-25 08:14:12
136
1
原创 css布局方式
盒模型布局是CSS中最基础和最常用的布局方式，通过设置元素的display、width、height、margin、padding、border等属性，来控制元素的大小和位置。定位布局是通过设置元素的position、top、left、right、bottom等属性，来实现元素在页面中的精确定位。是网页元素按照默认的排列顺序依次排列的布局方式，每个元素的位置由前一个元素决定，不需要使用css进行特殊的定位和布局。网格布局是通过设置元素的display:grid属性，来实现元素在二维网格中的布局。
2024-04-18 17:18:01
124
1
原创 弹性布局（display）
Flex布局的核心思想是通过指定容器(flex container)和其内部的子元素(flex items)来控制元素在容器内的排列和分布。弹性布局的优势在于，它允许设计师在不考虑具体设备屏幕尺寸的情况下，创建出适应各种屏幕尺寸的页面布局。这种方式可以提高页面设计的可维护性和可扩展性，因为设计师只需要关注页面的内容和结构，而不需要考虑具体的设备屏幕尺寸。项目是容器中的元素，可以设置项目的属性，如位置、尺寸和显示顺序等。弹性容器的直接子元素会受到弹性布局的影响，成为弹性项目，从而使用弹性布局。
2024-04-13 18:44:54
276
原创 轮播图制作
轮播图顾名思义，，可以流动的图像，在网页中显示的是几张图在可视区域内在设定时间内轮播出现最后一张一定是第一张，除非定到最后一张不动，想要实现一直轮播时间后面添加。里面还有设定可视区域和溢出的宽高，宽一定要切记几张图片设置百分之多少，比如5张，设定百分之500。设置流程图时一般都用百分比，添加百分比的时候要看有多少空隙，然后用100除。首先制作需要有一个可视区域的盒子，设定宽高和溢出隐藏。图片的HTML样式设置自己想要的宽高，记得添加浮动。
2024-04-10 19:12:15
144
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人