前端开发 - 第7页 - 网站分类

B站首页的 Banner 这么好看，我让你直接用到你的项目！

‍ 写在开头点赞 + 收藏学会写在前面我最开始是用 Angular 去实现了B站的 Banner ，那时候还没有人做这东西，可以看到下面那一长串 Bannet 图片的第一个图是好几年以前的了。然后随着逐步完善，在这几年偶尔也看到有人发过这东西的实现方法。但我为什么要写这 ...

基于vue3项目开发+MonacoEditor实现外部引入依赖，界面化所见即所得

最近一个项目中，基于vue3开发，想开发一个在线管理组件库的功能，具体业务实现： 1. 在私库Nexus上传组件包； 2. 然后用UNPKG实现路径访问在线解压文件； 3. 解压文件上传到gitee组件库中查看； 4. 然后通过页面配置填写需要引入的依赖地址（直接通过UNPKG读取包内文件内容），页 ...

Web前端入门第 60 问：JavaScript 各种数组定义与数组取值方法

数组可以算是程序里面最常用的数据结构了，但凡网页上任何一个列表数据，基本都是以数组的形式存在，像表格、banner图、菜单列表、商品列表，分类列表等等，在前端领域都是以数组处理。数组的定义 JS 的数组花样很多，不像其他强类型语言中的数组限制颇多。数组中的元素 JS 数组中的元素可以是任何类型， ...

Web前端入门第 59 问：JavaScript 条件语句中善用 return 让代码更清晰

条件语句 JS 的条件语句不太多，就 if 和 switch 两个，不过他们的使用方式也可以算是眼花缭乱了。 if 语句 if 字面意思：如果 xxx。程序中的用法也是这样，如果条件为真，则执行执行代码块，反之则不执行。语法： if (条件) { // 条件为真时执行 } else if (其他条 ...

解构赋值的这几个"坑"，毁掉了多少程序员？

‍ 写在开头点赞 + 收藏学会解构赋值是 JavaScript 中最受欢迎的特性之一，它让数据提取变得简洁优雅。但看似简单的语法糖下，隐藏着十个高频「陷阱」。本文结合代码示例与原理分析，带你逐一避坑！一、解构未定义对象：空值引发的致命错误 ❌ 典型错误 javascrip ...

Web前端入门第 58 问：JavaScript 运算符 == 和 === 有什么区别？

运算符 JavaScript 运算符是真的多，尤其是 ES6 之后还在不停的加运算符，其他编程语言看 JS 就像怪物一样，各种骚操作不断~~ 运算符分类 1、算术运算符算术运算符的作用就是用来基础计算，跟小学课本一样，包含：加 +，减 -，乘 *，除 /，取余（也叫做取模） %，指数 **，自增 ...

优化用户体验：拦截浏览器前进后退、刷新、关闭、路由跳转等用户行为并弹窗提示

‍ 写在开头点赞 + 收藏学会需求首先列举一下需要拦截的行为，接下来我们逐个实现。浏览器前进后退标签页刷新和关闭路由跳转 1、拦截浏览器前进后退这里的实现是核心，涉及到大量 History API 的理解，如果不太了解可以先看一下这两个文章：拦截浏览器后退方法附 ...

Web前端入门第 57 问：JavaScript 数据类型与类型转换

在程序语言中，数据类型是基础，一切程序都是建立在基础数据之上。如果说程序如同万丈高楼平地起，那么数据类型就像沙、石、钢筋、水泥等等最基础的原料。一样的高楼，不同的人，用相同的原料，造的方法也会有千般变化。在 JS 中，数据类型可以分为原始类型和对象类型。原始类型直接存储值，不可变（值的 ...

一个好用且开源的全能 IP 工具箱！

MyIP —— 一个好用且开源的全能 IP 工具箱，基于 Express + Vue 实现，提供 IP 信息查看、网络连通性、WebRTC 测试、DNS 泄露测试、网络测试等通用功能。 ...

Web前端入门第 56 问：JavaScript 变量声明 var、let、const 区别

曾经 var 如帝王一般统治过 JS 的变量声明，直到后来大佬们实在是忍不了 var 那稀烂的声明规则，便引入了 let 和 const 这两大刀斧手，var 被轻轻松松的斩落马下，如今，再难看见 var 的身影。变量声明在 JS 中，所有变量都可以用 var、let 和 const 这三个关键 ...

使用 vxe-table 合并单元格、分组列头的详细用法

使用 vxe-table 合并单元格、分组列头的详细用法查看官网：https://vxetable.cn gitbub：https://github.com/x-extends/vxe-table gitee：https://gitee.com/x-extends/vxe-table 代码通过设 ...

Web前端入门第 55 问：JavaScript 严格模式与非严格模式区别

JavaScript 默认是非严格模式的，可以通过 "use strict"; 启用严格模式。此声明语句可以放在 JS 文件顶部，也可以放在函数内部。启用严格模式 1、外部脚本在 JS 文件开头声明，内部脚本在 <script> 标签开头声明，声明后所有 JS 代码启用严格模式： "use str ...

520表白神器

大家好，我是晓凡 520来了，给大家做了一个浪漫的网页表白工具，帮助你向心爱的人表达爱意。需要源码的小伙伴直接跳转到文章末尾获取。功能介绍浪漫启动页：显示相识天数和小时数，营造浪漫氛围动态情书系统：打字机效果展示情书内容，支持自定义内容趣味互动游戏：爱心捕捉：点击飘动的爱心获取分数记忆 ...

记录---前端图像五兄弟：网络 URL、Base64、Blob、ArrayBuffer、本地路径，全整明白！

‍ 写在开头点赞 + 收藏学会你有没有在写前端的时候，突然迷糊了：为啥这张图片能直接 src="https://xxx.jpg" 就能展示？为啥有时候图片是乱七八糟的一串 Base64？有的还整出来个 Blob，看不懂但好像很高级？有时还来个 ArrayBuffer ...

t06_vue在mac操作系统中热更新失效问题包括cli与vite

1、问题原因用vuecli与vite创建的vue项目，默认是没有热部署更新的。而且查阅大量资料后仍然找不到解决方法这个我认为是mac的m系列芯片的问题为什么我会这么认为，因为相同的项目，node_moudules我都没有变过，再win系统中与mac系统同时运行，只有win系统是可以正常热部署的 ...

制作一个炫酷的多小球碰碰的 JS 网页特效，入门弹性碰撞模拟和类的应用

目录前言先画一个圆完善我们的类小球动起来最简单的碰撞计算，接触墙壁反弹向量类的完善检测两小球之间的碰撞完善碰撞的效果重复计算的问题撞击墙壁定格问题内存问题随机数生成多个小球参考资料前言在前端开发里，canvas 是 HTML5 里最炫酷的工具。我们今天就来搞一个这样的梦幻的效果，学习一下 ES6 ...

自制体积不到 2kB 的代码编辑器，areaEditor.js，增强 textarea 标签的代码编辑体验

目录起因快速使用缩进功能缩进类型自动补全括号犯难自动补全阻止补全编辑框抖动在空行按下删除键，清空封装代码怎么压缩 JavaScript 代码更多的功能？起因前两天我搞的那个在线 HTML 新标签页预览功能 https://www.cnblogs.com/duyuanshang/p/1882931 ...

记录---前端动态导入（import.meta.glob）

‍ 写在开头点赞 + 收藏学会以下详细介绍 import.meta.glob 的使用： 1. 参数详解 import.meta.glob( pattern, // 匹配模式：字符串或字符串数组 { eager?: boolean, // 是否同步导入 import?: st ...

Web前端入门第 54 问：JavaScript 3 种书写位置及 script 标签的正确存放位置

JS 的代码并没有强制规定放在 HTML 中的某个位置，如果您有使用过开发者工具查看过网页源码，那么您会看到很多 JS 代码都以 .js 文件的形式存放，并且放在了 HTML 文件最后，也就是 </body> 结束标签之前。但如果仔细观察，在 <head> 标签中，也会找到很多 script 标签 ...

vue 表格组件，记录 vxe-table grid 获取 rowIndex 行索引、列索引的详细说明

vue 表格组件，记录 vxe-table grid 获取 rowIndex 行索引、列索引的详细说明 https://vxetable.cn 表格有 3 种索引机制：行索引：rowIndex、$rowIndex、_rowIndex 列索引：columnIndex、$columnIndex、_co ...