Javascript
文章平均质量分 57
原生js技术相关...
xiexikk
vue2/vue3/nuxt/uni-app/node/electron/react/微信相关/小程序-前端开发工程师,不定时更新博客,分享前端相关的知识.
展开
-
探究Fingerprintjs:了解浏览器指纹技术的原理和应用
Fingerprintjs是一种浏览器指纹技术,它可以通过收集用户浏览器的一些特征信息,如浏览器类型、操作系统、屏幕分辨率等,来生成一个唯一的浏览器标识。这种技术被广泛应用于网络安全、广告营销、反欺诈等领域。原创 2023-02-08 14:14:53 · 3426 阅读 · 1 评论 -
vue3基于hammerjs实现移动端图片拖动缩放旋转功能案例
首先我们先有一个需求,就是在移动端h5实现图片的拖动,缩放,旋转等手势操作。假如我们使用原生的touch实现起来是非常麻烦,推荐使用一下hammerjs这个包进行处理这些手势操作。hammerjs是什么 hammerjs:hammerjs这个库可以让我们轻松的实现移动端上的手势操作, 也去除移动端上的点击事件的300ms延迟。 它封装了一下这些方法:pan 左右拖动tap 点击press 长时间按压swipe 滑动rotate 旋转效果pinch 缩放我写了个案例大概是这样子原创 2021-05-27 10:40:55 · 3042 阅读 · 5 评论 -
js的19种数组操作方法实例
JavaScript中数组的操作 数组是可以直接进行增删查改,非常实用。定义两个数组便于使用:let array = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];let users = [{ id: 1, name: "ted" },{ id: 1, name: "bob" },{ id: 3, name: "sara" },{ id: 4, name: "test" },{ id: 4, name: "test" },{ id: 5, name: "abc" }];原创 2021-05-06 15:13:08 · 585 阅读 · 0 评论 -
js复杂条件判断的优雅写法new Map
在我们日常项目中经常需要做一些逻辑条件判断,由于旧的习惯,用if/else或switch来实现多个条件判断;简单的判断确实可以使用,但这样会有个问题,随着逻辑复杂度的增加,变得越来越臃肿,那么我们不妨使用一下es6中的,Map语法。Map是一组键值对的结构,具有极快的查找速度.如:if/else 或者 switch, 下方代码确实可以实现,就是看起来有点呆。const fn = (status)=>{ if(status == 1){ //do sth }else if(sta原创 2021-04-16 16:24:15 · 1098 阅读 · 0 评论 -
js多层嵌套对象数组-根据最里层id找出它所属的每层父级id集合
根据已有子级id,找到它的所有对应的父级们的集合。比如我们现在有 levelIdList:[“166”],我们要找到这个166它的父级,然后再找爷级,以此类推。数据效果图:我们也得到的下方的数据。我们先看下初始数据data树的结构:(因为层级有点深,截图来看) bindFindKeys(data, val) { let arr = [], newArr = []; for (let i = 0; i<原创 2021-04-03 12:02:10 · 5087 阅读 · 0 评论 -
vue-draggable拖拽拖动组件的实际应用案例
vue-draggable拖拽组件库在项目中总会遇见一些需要排序的数据 , 那我们可以通过vuedraggable 进行拖动排序 。draggable为基于sortable.js的vue组件,用以实现拖拽功能。特性支持触摸设备支持拖拽和选择文本支持智能滚动,支持不同列表之间的拖拽。安装:npm i -S vuedraggable引入:import draggable from "vuedraggable"部分代码:实际应用:(已应用到某大型活动中…)...原创 2021-02-23 15:42:34 · 908 阅读 · 1 评论 -
vue封装wangEditor富文本编辑器的使用案例
wangEditor是基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费。在我们实际项目上还是比较频繁应用到的,下面出个案例供大家参考学习…wangEditor文档:https://www.wangeditor.com/富文本编辑器截图:源码移步到微信公众号,谢谢。...原创 2021-02-05 14:57:35 · 425 阅读 · 1 评论 -
vue,javascript实现页面日期倒计时功能
日期倒计时在日常项目中还是比较常用的,活动、自动完成时间,拼团等场景比较常见,所以把自己项目中用到分享一下,具体看下方源码:代码比较简化,方便大家参考使用: /** * 日期倒计时 * @param date 如:2020-08-20 18:00:00 */ timeCountDown(date, callback = () => {}){ var time = ''; const formatNumber = (n)=>{ n = n.原创 2020-08-20 17:22:12 · 1101 阅读 · 0 评论 -
HTML5的多个video标签:截取视频源的封面图poster,监听视频播放状态的功能;
在日常项目中,html5的video标签还是比较常用到的,开发过程中,我们都会注意到,通过监听video标签的播放、暂停、停止等等来使用;但我们是否也会遇到过,有些浏览器在显示这标签,兼容不太友好,video标签的封面是一层黑色的,而不是视频的封面图。 那么,此时,我们就得截取每个视频的封面图来,因为video标签有个属性poster是用来储存封面图地址的,但需注意先用本地视频,非本地视频会...原创 2018-08-02 14:53:10 · 32611 阅读 · 5 评论 -
基于vue.js仿淘宝收货地址,并设置默认地址
这个案例主要是渲染地址列表,然后设置默认地址,与淘宝的收货地址功能一样,具体自行查看自己的淘宝收货地址;效果图:html结构<!--the-address--><div class="the-address"> <div class="adr-tent" id="vue-address"> <table class="a...原创 2019-07-11 09:55:23 · 8150 阅读 · 0 评论 -
js复制图片文字图文分享到微信/QQ,插件clipboard.js的应用案例
js复制图片-文字,可用于商品复制文案进行分享的功能~1.此案例应用到clipboard.js,具体使用可查阅文档;2.复制的图片需注意,本地图片路径不行,得有链接的图片-还没被控制禁止复制的链接图片[可自行测试一下图片];3.这个框架功能还是比较强大的,复制文本和图片,复制成功后的html的标签会被去除掉,即得到只有文字和图片等等,这样我们就可以用于分享到qq/微信了,某宝相关平台就用到此...原创 2019-04-26 13:43:48 · 2900 阅读 · 2 评论 -
js自由拖拽来排序的功能案例
在日常项目中,标签的拖拽移动来进行排序的功能还是比较常用的,因最近项目有一个需求 “拖拽菜单进行排序”,在网上也查了相关案例吧,基于别人的一个拖拽函数;在其基础上进行使用;我们先来看看需求,如【微信公众号后台——自定义菜单】里面的菜单排序排序的功能;好的,需求明了~开始我的代码编写,编写了一个比较易懂的案例,然后大家可以根据自己的结构进行套用,先看看我的效果:html结构:<...原创 2019-04-12 16:03:33 · 7270 阅读 · 3 评论 -
js实现页面的多个日期时间倒计时效果(多个拼团)
js的日期倒计时在日常项目中还是比较常用的,活动、拼团功能最为常见;先分析最要是处理好日期函数,然后一个页面上有多个倒计时情况下的方法;来,先看下 拼多多 的拼团倒计时的效果:那么,先上个代码吧:<html><head> <meta charset="UTF-8"> <title>js拼团日期倒计时</title&g...原创 2019-03-28 16:09:52 · 3775 阅读 · 0 评论 -
js/vue实现input file多张图片上传及预览,限制图片数量,对应每个图片文件名,删除图片
js input file 多图片上传,一次性上传多张图片(前端预览功能);运用js实现上传图片前的预览(支持多张图片),网上很多案例都是没有处理每个上传的图片文件名,这里我就增加了图片文件名的方法,希望亲们可以在项目中用到…其他input file多文件方法类似,用到FileReader读取文件的方式…先来个效果图:html结构&amp;lt;div class=&quot;upload-pic&quot;&amp;g...原创 2019-03-09 14:08:45 · 8936 阅读 · 16 评论 -
js兼容安卓和IOS的复制文本到剪切板,已做浏览器兼容处理,勿需插件
开发需求:手机端,点击按钮实现需复制的文本内容; 案例已做手机端浏览器兼容处理经测试,[QQ,微信,苹果,360,UC等],可正常使用;案例代码如下:&amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;lt;html lang=&amp;a原创 2018-08-04 10:03:42 · 6030 阅读 · 10 评论