文章库ARTICLE COLUMN

  • 用JavaScript来实现Tab点击切换

    用JavaScript来实现Tab点击切换

      现在很多都用到Tab 选项卡切换效果,例如点击切换、滑动切换、延迟切换、自动切换等多种效果,本篇文章讲述的就是通过原生 Jquery 来实现 Tab 点击切换的效果。  例如:  html  <body>   <divstyle="position:relative;margin-top:56px;display:f...

    34037718643403771864 评论0 收藏0
  • vue长按事件touch实现代码

    vue长按事件touch实现代码

      1.touch事件  以下是四种touch事件  touchstart: //手指放到屏幕上时触发  touchmove: //手指在屏幕上滑动式触发  touchend: //手指离开屏幕时触发  touchcancel: //系统取消touch事件的时候触发,这个函数运用很少  2.长按弹出删除按钮,点...

    34037718643403771864 评论0 收藏0
  • 关于如何解决vue contextmenujs鼠标右键菜单高度不够显示不全的问题

    关于如何解决vue contextmenujs鼠标右键菜单高度不够显示不全的问题

      相信很多人以前都是采用npm或者yarn直接装包vue-contextmenujs的形式:  npminstallvue-contextmenujs-S||yarnaddvue-contextmenujs  当右键点击记录时,完整展示应该是如下图所示:  结果,当点击靠前的记录时,就看到下图所示,上面一部分内被遮...

    34037718643403771864 评论0 收藏0
  • 演示Vue实现记住账号密码功能的思路和代码

    演示Vue实现记住账号密码功能的思路和代码

      实现思路:  情景:在用户登录时若勾选记住我功能选项,则将登录名和密码(加密后)存入本地缓存,下次登录页面加载时自动获取保存好的账号和密码(需解密),回显到登录输入框中。  在本地缓存可以用cookies、localStorage、sessionStorage,但...

    34037718643403771864 评论0 收藏0
  • 单页多张图片轮播效果用AntDesignVue走马灯实现

    单页多张图片轮播效果用AntDesignVue走马灯实现

      项目中要求单页多图一次滚动一张图片的轮播效果,且项目组件库是antd  在使用antd后展现的走马灯  其实很想吐槽,但还是不说了吧。  在https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-slick/src/default-props.js#L3中...

    34037718643403771864 评论0 收藏0
  • 小案例:运用vue实现简单的购物车

    小案例:运用vue实现简单的购物车

      有关ue的项目,今天为大家做一个小案例,就是把一个js的购物车改成vue了  css部分是直接引入的插件  效果图如下  <template>   <divclass="head">   <metacharset="UTF-8">   <title>我的购物车-品优购</title>   <...

    34037718643403771864 评论0 收藏0
  • 学习js中的'this'关键字

    学习js中的'this'关键字

      在JavaScript中‘this’关键字是一个非常重要的概念,我们虽然知道它重要,但它也十分的晦涩难懂,也给我们学习造成不小的困扰。  什么是&#39;this&#39;关键字  &#39;this&#39;关键字是为每个执行上下文(每个函数)创建的一个特殊变量;所以一般来说,...

    34037718643403771864 评论0 收藏0
  • 利用js实现点击按钮实现图片排序

    利用js实现点击按钮实现图片排序

      利用JS就可以实现在点击按钮实现图片排序,做个狠人,直接说:  效果  1 、点击按钮  如果按钮文字是从大到小 将li标签按照从大到小的顺序排列 文字改成从小到大  如果按钮文字是从小到大 将li标签按照从小到大的顺序排列 文字变成从大到小  2 ...

    34037718643403771864 评论0 收藏0
  • 当浏览器切换到其他标签页或最小化js定时器是否会影响准时

    当浏览器切换到其他标签页或最小化js定时器是否会影响准时

      前言  很多的问题就在实践中得到解决。  本文主要说的就是js定时器,setInterval和setTimeout,作为我们日常开发经常使用到的方法。我们先给大家下面一个例子:  setInterval(()=>{   console.log(&#39;1&#39;);   },500);  这段代码就是每过...

    34037718643403771864 评论0 收藏0
  • PageVisibilityAPI简单易学教程演示

    PageVisibilityAPI简单易学教程演示

      一、简介  要知道用户何时离开,有常用的方法是监听下面三个事件。  pagehide  beforeunload  unload  可上述三种方法有一个bug就是,这些事件在手机上可能不会触发,页面就直接关闭了。因为手机系统可以将一个进程直接转入后台,然后杀死。 ...

    34037718643403771864 评论0 收藏0
  • 演示当定时器在页面最小化时无法执行

    演示当定时器在页面最小化时无法执行

      我们讲述的是关于 ahooks 源码系列文章的第七篇,总结主要讲述下面几点:  巩固 React hooks 的理解。  学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。  培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择。  注:本系...

    34037718643403771864 评论0 收藏0
  • js实现数字拼图代码展示

    js实现数字拼图代码展示

      话不多说,直接开干。  重点:  下图我们可以看到,游戏区分为8个div,进行游戏时需要判断点击的div是否可移动,移动后判断游戏是否结束。  解决思路:将游戏界面看作一个div大盒子,将大盒子分为9个区域进行编号,这9个区域的位置始终不变;8个div...

    34037718643403771864 评论0 收藏0
  • React为何不能将useMemo设置为默认方法的原因

    React为何不能将useMemo设置为默认方法的原因

      想要升职加薪就要努力学习这篇React不能将useMemo设置为默认方法原因详解,  很多朋友都建议可以用 React 这样就不直接默认使用这种memorized呢?还可以让所有资料都缓存~减少渲染  话不多说,直接上。大概就是直接让所有的东西都 默认套上一层useMem...

    34037718643403771864 评论0 收藏0
  • 解读useEvent显著降低Hooks负担的原生Hook

    解读useEvent显著降低Hooks负担的原生Hook

      想要做到就要有更多的学习,你知道为什么React不把他们设为默认方法#useEvent是一个刚刚提案的原生Hook,还处于RFC。现在我们就一起来讨论下  RFC:Request for Comments 提案应用的还十分广泛  我们先看看在没有 useEvent 会出现的情况:  functio...

    34037718643403771864 评论0 收藏0
  • 展示js简单拼图游戏

    展示js简单拼图游戏

      我们看看js实现简单拼图游戏的详细代码,HTML仅有一个id为game的div,也不错编写CSS,仅要img文件夹中放置一个图片文件就行,此处我放置的是LOL皇子的图片,图片名为&#39;lol.png&#39;  <divid="game">   </div>  下面展示具体效果  多的不说,直...

    34037718643403771864 评论0 收藏0
  • 解析关于JavaScript事件循环同步任务与异步任务

    解析关于JavaScript事件循环同步任务与异步任务

      学习一门知识,有些内容必须要提前明白,比如在学习js中同步异步的问题前,需要明白,js是单线程的,为什么它得是单线程的呢?现在先从它应用的场景来说,就是用来让用户与页面进行交互的吧。假如有js是多线程的,那在这个线程里面,用户点击某个按钮会增...

    34037718643403771864 评论0 收藏0
  • 展示JS前端面试数组扁平化手写flat函数

    展示JS前端面试数组扁平化手写flat函数

      我们现在来说说怎么写一下数组扁平化flat(),怎么样?简单说题目就是数组扁平化(也可以叫做手动封装flat()方法),如何写好那?  按照不同的星级进行打分: 五星打分制  满分: ⭐⭐⭐⭐⭐  题目实现扁平化的方法 封装 flatten  题目描述:  有多级嵌...

    34037718643403771864 评论0 收藏0
  • 用JS编写就可实现拼图游戏

    用JS编写就可实现拼图游戏

      我们简单来说下用用JS实现这样简单的拼图游戏可以有那两种方法。一种是拖拽拼图,一种是经典的九宫格拼图,可以自定义参数设置游戏难度  先看看截图效果  拖拽模式(拖拽图片切换图片)  点击模式(点击图片与空白区域切换位置)  不多说,直接上...

    34037718643403771864 评论0 收藏0
  • 展示js中实现鼠标移入图片放大效果示例

    展示js中实现鼠标移入图片放大效果示例

      本篇文章主要讲述的就是JS编写一个鼠标移入图片放大效果,不多说废话,大家一起看看具体内容:  目标  给图片添加鼠标移动放大方法效果,移到哪里放大哪里  先看看效果是不是你想要的,再看代码  移入前  移入后  html  <!--css看着写--> ...

    34037718643403771864 评论0 收藏0
  • 项目中react表单数据形式配置化设计

    项目中react表单数据形式配置化设计

      作为开发和前段人员,日常中经常接触到有关表单。其实表单在日常中工作内容虽然是重复,也要不停在写 FormItem...,以及为组件加上请输入/请选择等无脑的 placeholder 文本和请输入xx/请选择xx等必填提示。再有就是表单一般都存在编辑页和详情页...

    34037718643403771864 评论0 收藏0
  • 在其他框架中也可以应用到React18中请求数据的官方姿势

    在其他框架中也可以应用到React18中请求数据的官方姿势

      首先我来说下在useEffect中请求初始数据,如下所示:  useEffect(()=>{   fetch(xxx).then(data=>setState(data.json()))   },[])  这种方式到了React18并不适用。  那如果这种方法不行,要推荐的又是那种方式?  本文来看看Dan在reddit是如...

    34037718643403771864 评论0 收藏0
  • JS实现图片上下切换具体代码

    JS实现图片上下切换具体代码

      本文讲述就是JS实现图片上下切换的具体代码,看看具体代码:  源代码:  <!DOCTYPE html>  <html>  <head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge&...

    34037718643403771864 评论0 收藏0
  • JavaScript中让x==1&&x==2&&x==3等式成立演示

    JavaScript中让x==1&&x==2&&x==3等式成立演示

      要是别人问您:如何让 x 等于 1 且让 x 等于 2 且让 x 等于 3 的等式成立?  咋地,知道如何实现?想骂人有不  现在我们一起来分解思路:  我们先来讲讲宽松相等== 和严格相等 ===,这两个都能用来判断两个值是否相等,但们明确上文提到的...

    34037718643403771864 评论0 收藏0
  • 详解JS前端并发多个相同的请求控制为只发一个请求方式

    详解JS前端并发多个相同的请求控制为只发一个请求方式

      描述如下  我们要同时发多个相同的请求,第一个请求成功后,剩余结果都不会发出,返回结果是成果。  假如第一个反馈失败,第二个是成功,后面就不会发出,后面都直接反馈成功。第三个才是成功的话,后面就不会在发出,后面都反馈成功。依次如此处理,...

    34037718643403771864 评论0 收藏0
  • JavaScript+CSS实现唯美蝴蝶动画

    JavaScript+CSS实现唯美蝴蝶动画

      演示  技术栈  我们今天用到svg标签。在svg标签就是用来解决图形的复用。 举个例子:在图形中红色圆圈 ● 还有黄色圆圈 ● 都是复用的元素。结构都是一样的,只是颜色和位置的差别。  关于figure:<figure标签规定独立的流内容(图像、图表、照片、...

    34037718643403771864 评论0 收藏0

热门文章

<