前端小技巧

【前端小技巧】不同组件中如何实现点击空白关闭自定义的弹窗

直接上代码吧处理函数closest的参数是弹窗的类名consthandleClickOutside=(event:MouseEvent)=>{consttarget=event.targetasHTMLElement;if(!target.closest('.popUpClassName')){//控制弹窗显示隐藏的变量ispopup.value=false;}};绑定到document上docu
Luxine.·2024-09-10 02:59

前端小技巧（一）：将集合循环获取并改变值

在前后端对接接口的时候，你会发现咦这个时间后面我不想要这么准确的信息一般我们会要求后端将数据进行修改再返回给我们进行使用其实这对于前端来说也是可以办到滴！！！首先拿到数据集合letlist=res.resultfor(vari;i
荼蘼toome·2024-01-19 05:36

前端小技巧: TS实现EventBus自定义事件

关于EventBus事件总线事件总线，实现on,once,emit,offon,once是注册函数，存储起来emit时找到对应的函数，执行off找到对应的函数，从对象中删除注意区分on和onceon绑定的事件可连续执行，除非offonce绑定的函数emit一次即删除，也可未执行而被off数据结构上标识出on和once实现方案1代码实现：使用参数区分on和onceclassEventBus{/*{k
Wang's Blog·2023-11-13 21:04

前端小技巧: 区分防抖和节流的方法

一、防抖Debounce1）简单描述防止抖动，防止你抖动过程中，执行下一步，等你停止了，再执行下一步场景：输入框，等输入停止或者间歇，才去做监听一个输入框，文字变化后出发change事件直接用keyup，则会频繁出发change事件用户输入或暂停时，才触发change事件注意，如果用户连续触发，清理之前的2）代码实现constinput=document.getElementById('input
Wang's Blog·2023-11-10 23:53

前端小技巧: 拍平数组的6种常见方法

关于数组拍平所谓数组拍平，就是按照顺序，把他们全放在一个数组中需要考虑多层级和嵌套的问题来彻底拍平数组*实现方案1）一般思路,先实现一级扁平化，然后递归，直到全部扁平functionflat(arr){constres=[];arr.forEach(item=>{if(Array.isArray(item)){constflatItem=flat(item);//递归flatItem.forEac
Wang's Blog·2023-11-10 23:45

前端小技巧：ELement UI时间控件el-date-picker误差8小时

问题前端使用框架与UI：Vue+ElementUI。在项目开发中使用到了DateTimePicker组件，在选择时间后点击查询发现查询导的内容与预期内容有所偏差，之后发现前端选中的时间在后端接收时相差了八个小时。原因我们国家的标准时间是东经120°时间（东八区），而标准时间是格林威治时间（世界时），两者相差了整整8小时。解决需要设置value-format属性，value-format=“yyyy
xuelong-ming·2023-11-02 19:25

前端小技巧: TS实现深拷贝函数，考虑 Map, Set, 循环引用

写一个深拷贝函数使用JSON.stringify和parse这类只能适合数据结构简单的，不能循环引用的，没有function的普通深拷贝只考虑ObjectArray无法转换MapSet和循环引用functioncloneDeep(obj:any){if(typeofobj!=='object'||!obj)returnobjconstresult=objinstanceofArray?[]:{}f
Wang's Blog·2023-10-31 06:43

前端小技巧: TS实现new出一个对象的内部过程

new一个对象，写代码实现内部过程class是function的语法糖new一个对象的过程创建一个空对象obj,继承构造函数的原型执行构造函数(将obj作为this)返回objexportfunctioncustomNew(constructor:Function,...args:any[]):T{//1.创建一个空对象，继承constructor的原型constobj=Object.create
Wang's Blog·2023-10-31 06:43

前端小技巧: TS实现bind函数，call函数，以及apply函数

bind函数实现返回一个新函数，但是不执行Function.prototype.customBind=function(context:any,...bindArgs:any[]){//context是bind传入的this//bindArgs是bind传入的各个参数constself=this//当前函数本身returnfunction(...args:any[]){constnewArgs=b
Wang's Blog·2023-10-29 15:56

前端小技巧: TS实现数组转树，树转数组

将数组转为树interfaceIArrayItem{id:number,name:string,parentId:number}interfaceITreeNode{id:numbername:stringchildren?:ITreeNode[]}constarr=[{id:1,name:'部门A',parentId:0},{id:2,name:'部门B',parentId:1},{id:3,n
Wang's Blog·2023-10-29 15:26

前端小技巧: TS实现柯里化函数

实现curry函数，把其他函数柯里化curry返回一个函数fn执行fn,中间状态返回函数，如add(1),或者add(1)(2)最后返回执行结果，如add(1)(2)(3)functioncurry(fn:Function){constfnArgsLen=fn.length//传入函数的参数长度letargs:any[]=[]//ts中，独立的函数，this需要生命类型functioncalc(t
Wang's Blog·2023-10-29 15:24

php解析markdown前端渲染,前端小技巧：加载并解析Markdown文档

问题描述与分析作为程序猿，应该多多少少都用过Markdown，或者至少读过别人用Markdown语法写的一些文档，比如在GitHub有一个你要用的开源程序，而你又是第一回用它，那么你一般会在这个仓库的Readme里读一读开发者提供的工具说明和使用的相关信息，这部分文档一般就是用Markdown的语法写的此处以李恒大神的BWA的Readme为例简单来说，Markdown就是简化阉割过的HTML，优点
特派禁烟员·2023-10-27 23:23

【前端小技巧】用CSS隐藏元素的几种方法

不过我并没有看晚会，而是整理了一篇前端小技巧，算是给自己2021年一个小小的总结。正文用CSS隐藏元素有很多种方法，这里介绍3种常见的。
潘高PG·2023-10-23 16:09

html表单form字体颜色_前端小技巧：学会用FormData对象收集表单数据

1.FormData对象有什么用？我们先看一个小例子：html代码：需求：是获取form表单中的用户名和密码并包装成一个对象这个需求是我们大部分时候在发送ajax请求时需要做的一个工作。传统JS写法：functionmysubmit(){letusernameEle=document.getElementById("username");letusername=usernameEle.value;
weixin_39837867·2023-10-15 16:01

【前端小技巧】用border画三角形和梯形

前言我们组要招一个前端开发，我也借此机会整理了一下前端的基础知识。否则在面试的时候如果被别人问倒了，人家还以为我们公司没有技术大牛的。在复习CSS基础的时候，我被一个网友的奇思妙想震惊了，居然可以用border来画三角形。在此之前，我都只是用border来打框框的。-.-！！正文我们比较常规的用法，就是用border属性来设置边框，如下所示：div{width:100;height:100;bor
潘高PG·2023-09-21 14:40

前端小技巧

1.让图文不可复制这点应该大家都很熟悉了，某些时候【你懂的】为了快捷搜索答案，可是打死也不让你复制-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;-khtml-user-select:none;user-select:none;复制的时候自带版权信息那有些网页为了尊重原创，复制的文本都会被加上一段来源说明，是如
未卜先·2023-09-01 17:38

新手学习web前端小技巧优漫动游

  如何应对前端焦虑，前端具试着找身边有经验的老程序员聊了聊，并总结一些他们的想法和前端学习小技巧分享给大家  最近听到很多身边的朋友说起，互联网行业变化得太快，而其中的web前端开发领域更是不断推陈出新，日新月异。  新技术总是层出不穷，以至于开发者总害怕自己错过了更先进，热门的技术，最后疲于奔命地学习。  听说react很高大上，但学着vue似乎更加简洁轻量。用着jquery开发十分高效，能解
UIKKA3792·2023-07-29 15:16

前端小技巧

作为前端新手，总结了一下自己在做项目中，遇到了问题，在这里记录一下解决办法。计算文字的高度，展开收起在工作中经常遇到这类的需求，需要计算文字的高度，当达到几行之后就显示展开收起的按钮，供文字展开收起。在未达到的时候不显示此按钮。思路在有数据的时候先计算文字的高度，如果超过设置的高度显示展开收起的按钮，没有就不显示展开收起的按钮.{{$t("message.productionInfo")}}dea
Dannn_Y·2023-04-04 11:57

前端小技巧之div标签连线

今天分享下”前端小技巧之div标签连线“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。
云南仟龙Mark·2023-03-16 04:14

每天一个前端小技巧——生成gif动图下载

每天一个前端小技巧——生成gif动图下载动态热图的展现，分别展现某个时间段的热图时间变化，例如：最近一周七天内，每天的热图分布变化图；这个动态变化的图生成一个gif图提供下载是否可行？
罗小胖*666·2023-03-16 04:43

前端小技巧：关闭浏览器时触发事件

//点击关闭浏览器时触发关闭事件window.addEventListener("beforeunload",e=>{console.log("执行关闭时事件");//这里写要执行的事件});记录工作中遇到的每个小问题！
xuelong？·2023-03-16 04:13

前端小技巧之破解网页文字禁止复制

前端小技巧破解网页文字禁止复制破解网页文字禁止复制我们在很多网站看到一些需要借鉴的文章，这时候想复制粘贴却发现复制不了，这时候只需几步即可复制你想要的内容，废话不多说这时候只需打开浏览器控制台F12的设置找到如下选中即可这时候你就会发现网页的文字能复制了
资深の小白·2023-03-16 04:12

前端小技巧

1.html1.1网站自动刷新应用场景：网页定期自动刷新（现在基本淘汰了，采用ajax）；自动跳转到指定页面，这个自动跳转的好处就是不需要JS调用，属于纯html网页自动跳转v7-网站自动刷新你可以在head标签中将网站设置为定时刷新！如，content为刷新间隔。-->技巧页面是否刷新letrefresh=localStorage.getItem('refresh')||0localStorag
南城夏季·2023-03-16 04:39

我从别人那里偷学的前端调试小技巧(浏览器篇)

我从别人那里偷学的前端小技巧ElementsConsoleSourcesNetworkHeaders首先F12打开调试窗口开发者工具，不同电脑可能快捷键不同Elements1Elements可以
墨_浅-·2022-08-05 12:29

如何封装一个颜色选择ColorPicker组件？

同时，在文章结尾处将分享一个前端小技巧，不要错过哦！颜色模型我们平时开发中，经常用到的颜色模型主要是十六进制和RGB两种，浏览器所支持的颜色模型还有颜色标识符和HSL。
·2022-02-28 10:21

前端小技巧！ 速速来看! 为自己为后端节省时间!

为自己为后端节省时间!htm代码！10条4条jQuery代码$('.copy').each(function(i,item){//页面加载完毕后读取页面所有含class为copy的标签，并执行jsvarthat=$('.copy').eq(0);//定义该值是为了省略后面程序的的字符数，并且取copy的第一个varnum=that.attr("data-num");//获得当前copy标签的dat
科哚洛夫·2021-04-20 03:58

前端小技巧之解决跨域问题（简单粗暴）

jsonp、反向代理、后端处理，这些都不讲，直接改浏览器。小程序、APP没有跨域问题，vue可以反向代理，uni-app的H5跨域问题，靠这个很好用。仅限于chrom谷歌浏览器。右键浏览器图标，选择属性，在目标地址最后加入：--disable-web-security--user-data-dir
itmonkey-cn·2020-09-13 12:34

web前端学习一定要注意的6个技巧

WEB前端大家并不陌生，现在各大企业的it部门都离不开前端工程师这个职位，越来越多的人择业选择前端行业，但初学者对前端行业还是很陌生的，不知道从哪里开始学，下面就为大家介绍一些学习前端小技巧，希望对大家在学前端的路上有所帮助
爱创课堂培训崔老师·2020-09-12 21:42

css前端小技巧

1、文本溢出overflow:hiddenwhite-space:nowrap;text-overflow:ellipsisdisplay:-webkit-box-webkit-box-orient:verical(垂直方向)；-webkit-line-clamp:2（选择两行）2、Ios局部活动在body里添加一下属性，会避免一些奇怪的bug出现在css里加下面这个属性-webkit-overf
anne_111·2020-08-24 20:02

前端小技巧：Javascript中定义私有属性（Private Properties）

和很多高级语言不同，JavaScript中没有public、private、protected这些访问修饰符（accessmodifiers），而且长期以来也没有私有属性这个概念，对象的属性/方法默认都是public的。虽然目前class的私有属性特性已经进入了Stage3实验阶段（Spec），通过Babel已经可以使用，并且Nodev12中也增加了对私有属性的支持，但这并不妨碍我们用JS的现有功
MudOnTire·2020-08-24 17:15

前端小技巧：变形汉堡按钮（Hamburger Menu）

汉堡按钮（Hamburgermenu）常用于移动端网站展开/收起导航，如果在点击按钮时再增加一些过渡动画则会显得更加生动有趣。今天我们就快速实现一个带有过渡动画的汉堡按钮。效果如图：HTMLhtml结构很简单，两个div足以:div.menu代表按钮，div.hamburger代表按钮中的线段。但是一个div如何显示3条线段？有同学应该想到了，可以用::before、::after伪元素。CSS为
MudOnTire·2020-08-24 17:37

前端小技巧：实现自定义右键菜单（Context Menu）

鼠标右击网页会弹出默认的浏览器菜单，但是很多时候我们需要自定义右键菜单（比如：在线文档编辑器、定制视频播放器等）。今天我们就来快速实现一个自定义右键菜单。预览：contextmenu事件监听首先，我们需要禁用浏览器弹出默认菜单的行为，通过阻止contextMenu事件的默认行为，并同时触发自定义菜单的显示：document.addEventListener("contextmenu",(e)=>{
MudOnTire·2020-08-22 15:04

【前端小技巧】记录开发中运用到的小技巧

HTML…CSS给div元素添加display:inline-block;可以让div的宽度随内容的增减而增减；项目中样式使用了scoped之后，对组件库的样式修改不起作用？可以使用>>>or/deep/，vue中还可以使用::v-deep。注意：1）在Sass等编辑器中，使用>>>可能会编译不了，因此可以使用后两者。2）上述选择器应在第一层级中声明，比如要设置el-table（第一层级）中的el
巴拉拉L·2020-08-22 14:45

【前端小技巧】利用border画三角形及梯形

border是围绕元素内容和内边距的一条或多条线，border属性允许你规定元素边框的样式、宽度和颜色值：border-width粗细none/hidden/solid/dashed/dottedborder-color颜色默认颜色是字体颜色border-style类型可以综合写成：border:widthcolorstyle注意点：边框是绘制在背景之上，因此。有些透明的背景会与边框重合。总结：1
miya·2020-08-22 10:29

【前端小技巧】text-shadow文字特效

【定义】基础的文本阴影效果，不过对text-shadow属性加以应用可以得到很多绚丽的效果。注：IE9-不支持该属性。【语法】text-shadow:h-shadowv-shadowblurcolor;h-shadow：必需。水平阴影的位置。允许负值。v-shadow：必需。垂直阴影的位置。允许负值。blur:可选。模糊的距离。color:可选。阴影的颜色。【效果】一.印刷效果（推荐：深字浅底在字
miya·2020-08-22 10:21

前端小技巧：CSS clip-path 的妙用

CSS的clip-path属性是clip属性的升级版，它们的作用都是对元素进行“剪裁”，不同的是clip只能作用于position为absolute和fixed的元素且剪裁区域只能是正方形，而clip-path更加强大，可以以任意形状去裁剪元素，且对元素的定位方式没有要求。基于这样的特性，clip-path常用于实现一些炫酷的动画效果。比如：视差广告效果：实现请参考：CodePen菜单栏弹出效果：
MudOnTire·2020-08-21 03:57

前端小技巧之快速整理excel中的大量信息到data（）中。

有些数据不需要后端存储，意味着需要前端自己做好存储安排，而当前端需要存储的静态数据变大时，尤其是数据的存储格式是不同的，像在excel里，怎么办？需要注意这几个点（也许你知道）1.使用框选，来进行大量的数据一次操作2.框选复制粘贴后，会按照由左到右由上到下的顺序排列。自动产生空格或则换行。3.由于数据量大，需要复制后减少工作量，所以需要复制前就要形成我写入前端代码里该有格式，比如字符数组等等，需要
银雨星空·2020-08-17 14:49

前端小技巧（一）：边框写三角形

边框写三角形，这个技能从事前端的小伙伴应该都不陌生，不过大多数都是知其然而不知其所以然，今天我们就来探究一下这里面的原理随意的在页面上给一个盒子，然后给一个边框来看看div{width:100px;height:100px;border:10pxsolid#f00283;}这样的一段代码，给到盒子的宽高都是100像素，然后10个像素实线的红色边框，效果图如下，看起来没有什么特别的，好像和三角形也没
/*----无忧----*/·2020-08-08 18:19

【持续更新】工作中用到的一些vue和element-ui的知识

下面讲讲这几天用到的前端小技巧。1.element-ui的输入框的input事件要实现的功能是改变第一个输入框的值，第三个跟着变且值为第一个输入框的值除以第二个输入框的值。
Mr_Chenn·2020-08-07 11:08

【前端小技巧】border-raduis小技巧

定义border-radius:length|%(可以设置宽度／百分比);border-radius:1-4length|%(四个角：左上，右上，右下，左下即顺时针方向);border-radius:1-4length|%/1-4length|%(水平方向／垂直方向);特性1.当任意两个相邻圆角的半径之和大于borderbox的尺寸时，用户代理必须按比例减少各个半径所使用的值，直到他们不会重叠2.
weixin_34279579·2020-08-04 05:26

前端小技巧

1、设备跳转functionbrowserRedirect(){varsUserAgent=navigator.userAgent.toLowerCase();varbIsIpad=sUserAgent.match(/ipad/i)=="ipad";varbIsIphoneOs=sUserAgent.match(/iphoneos/i)=="iphoneos";varbIsMidp=sUserAg
itchuan.net（钏）·2020-07-30 09:18

Typora写博客完美得无可挑剔，还要什么富文本？

Typora样式简洁、美观，还支持导出HTML，支持样式定制，如果会点web前端小技巧的话，还能让你的个人博客长得跟Typora一模一样，而且还大大节省了你写博客文章的时间。
浮晓悠羡·2020-07-08 23:40

前端小技巧01-去除inline-block元素间距

当元素display属性是inline-block时，元素之间在换行显示或空格分隔的情况下会有间距，举个栗子:HTML结构如下：样式如下：效果图如下：可以看到这里的萝莉、御姐、软妹之间有间隙，这类间距对我们的布局会产生影响，那我们怎么去除掉呢，这里推荐几种简单靠谱的做法。01-移除元素间的空格或者是这个样子：再或者就是借助HTML的注释：显然这几种方法如果在小的Demo中还可以一试，但是实际工作中
墨染ART·2020-07-07 22:58

前端小技巧：用原生js写一个弹窗消息提醒插件

嗨，这里是芝麻，今天我们一块来做一个“弹窗消息提醒”插件。喏，就是这么一个效果。1.分析当消息被触发的时候，会有一个自上而下的淡入过程。在持续了一段时间后会自动的消失，或者是需要用户来手动的点击关闭按钮。在消息消失的时候，会有一个自下而上的淡出过程。消息是可以叠加弹出的，最新的消息会排在消息列表的最后面。当前面的消息消失后，后面的消息会有一个向上滑动效果。然后消息本身是有三部分组成消息图标，用来区
weixin_34392843·2020-06-28 18:56

前端小技巧02-基于inline-block的列表布局

想必浮动布局大家都已经了解并熟练了，这是个栗子，你有一个好友列表:用浮动布局挺正常对吧，万一小李子的昵称被抢注了，那只好用全称莱昂纳多·迪卡普里奥，于是这个好友列表变成了这样:这是由于没有给没一个列表项给定固定宽高，所以发现布局乱套了有木有。那如果给定宽高，设置overflow:hidden（溢出隐藏），就会把名字截掉一半，小李子表示名字长怪我咯？怎么不说毕加索的名字呢。因为开发的时候需要考虑到种
墨染ART·2020-06-28 13:35

前端小技巧个人小笔记

1.【带有padding和border,且需要并排的DIV】######box-sizing：border-box;padding再怎么爱搞事也得乖乖听话妈妈再也不担心with:50%;的情况下，div不在一列上！2.【四角弧形矩形可以自定义每个角的弧度】######border-radius:20px30px60px70px/10px40px50px80px;[MDN测试页面]3.【表格单元格等
一無月一·2020-06-27 18:33

热点链接，实用的前端小技巧

今天没有前言，没有目录。我么直接上干货。首先我们一定遇到过这样的图片示例点击图片红线框住部分，就能跳转到某个地方的超链接。我们都知道在img标签外套一个a标签可以实现点击图片跳转的效果。但是往往我只需要图片里的部分能够点击跳转。就比如图中，我们点击马上认证可以跳转，点其他地方则没有反应。如何实现呢？需要一个远古工具，Dreamweaver。现在已经出到2018版本了。之前的版本我没用过。所以本次举
勃起狂奔者·2020-06-25 09:25

js切割图片切割，碎片化动画展示

今天上网学习前端小技巧，看到一个酷炫的功能，链接在此。怀着激动的心情，在本地测试了一下，发现效果还不错，兼容性：chrome最佳，firefox,360,ie9以上其次。
webCoder·2020-02-23 15:07

前端小技巧&坑 记录

Safari和iOS中Date的大坑（2017-10-11）在Safari和iOS中vartime=newDate('2017-10-11')会报NaN之类的错辣鸡Safari，不认YYYY-MM-DD格式的时间，认YYYY/MM/DD格式的。。。把-改成/就完事了解决方法：vartimeStr='2017-10-11';variosTimeStr=timeStr.replace(/-/g,"/"
Karnaugh·2020-02-21 05:49

前端小技巧之footer固定

想滚就滚、不想滚就不滚的footer今天纪录的是前端开发的一个小tip，没有太高的技术含量，但是开发过程中时常遇见。Requirement:实现两种footer1、一直固定在底部，无论页面长短，始终能看见的footer，称其为不想滚的footer。2、同样固定在底部，在页面较长的时候，需要滚动到页面结尾才能看见的footer，称其为想滚的footer。Implementation：不想滚的foot
Candy_M·2019-12-02 02:13
上一页 1 2 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他