可能有小伙伴并不知道,在网页中,我们直接Ctrl+V也是能够上传图片的。诶?真有这么厉害?没错,就是这么厉害!要不进去瞅瞅,现成的源代码,高保真的demo,包你分分钟学会这种姿势,哦,不,知识!
“JS相关”目录存档
直接剪切板粘贴上传图片的前端JS实现
2018年09月21日,星期五利用剪切板JS API优化输入框的粘贴体验
2018年09月9日,星期日输入框输入内容我们有时候为了方便,会直接粘贴内容,例如IP,网址,或者陌生人的手机号。但是,有时候我们复制的内容包含冗余信息,或者格式不准确,还需要重新编辑,体验就不好了。实际上,我们可以直接控制剪切板里面的复制的文字内容,可以实现粘贴的数据是我们希望的准确的数据格式,省去用户重新自己编辑的麻烦,可以有效提升用户的交互体验。
具体该如何实现呢?请看本文的介绍以及可以直接复制粘贴就可以使用的JS代码。
看,for..in和for..of在那里吵架!
2018年08月6日,星期一
今天天气不错,瞒着老婆去参加ChinaJoy,嘿嘿,好多周边,嘿嘿,好多萌妹子。突然,旁边一个戴眼镜的小胖子一声大叫:“看,for..in和for..of在那里吵架!”
我顺着望去,只见2点钟方向有一群穿着格子衫背着电脑包的人在围观什么,我立马发现事情不简单,就跟着过去围观,结果意想不到的事情发生了……
原来浏览器原生支持JS Base64编码解码
2018年08月4日,星期六就在数月前,一个前端HTML字符信息转Base64的需求,我是毫不犹豫去找了个开源的base64.js,根据文档上语法一使用,嘿,数据准确,功能良好。当时弄完还洋洋得意,以为是个完美的解决。
结果,今天发现,尼玛原来浏览器很早就有了原生的JS Base64加密解密方法,显然,上面这种洋洋得意的做法完全就是瞎子点灯——白费蜡!究竟是什么方法呢?有没有什么使用上的坑呢?点击进去一起一看究竟吧~
万岁,浏览器原生支持ES6 export和import模块啦!
2018年08月2日,星期四
万岁,浏览器原生支持ES6 export和import模块啦!不仅支持静态import,还支持动态import。原以为和Node.js中的模块import一样,比较简单容易理解,结果一研究发现,在web浏览器中,原生的export和import需要知道的细节还真多,也很有必要了解。
本文内容较多,篇幅较长,丰富的demo和源代码展示,有一定深度,希望本文内容能够对您的学习有所帮助。
隐私相关-了解HTML5 Do Not Track API
2018年07月26日,星期四中国的互联网对隐私那真是一点都不上心,前有“李彦宏称中国用户愿用隐私换便利”,后有“美团点评会显示你的好友在哪儿里点过餐,住过什么酒店”。其实浏览器本身提供了API可以让用户保护自己隐私不被跟踪,但是鲜有人知道,就算有知道的,也不会在实际项目中用,因为大环境对隐私都不重视,价值有限。
不过,从近些年诸多事件网民的言论来看,隐私这件事情已经越来越关注,一定会在哪天摆在台面上成为很重要的议题进行发酵的!因此,如果网站能在隐私这件事情上做得能让用户明显感觉到尊重,则这个网站的影响力,公司的口碑说不定会爆炸式增长。那作为前端的我们,可以在这件事情做些什么呢?
JS字符串补全方法padStart()和padEnd()简介
2018年07月24日,星期二 在JS中,字符串补全是常用操作,以前我们的做法是先检测字符串长度够不够,不够,自己再拼接字符串以到达我们需要的字符串长度。到了ES6,浏览器天然支持字符串长度补全方法,这个方法就是
padStart()
和padEnd()
。乍一看好像很简单,但是,仔细一深入,发现意想不到的细节还挺多的,要不,你进来瞅一瞅?
是时候好好安利下LuLu UI框架了!
2018年06月12日,星期二LuLu UI是阅文前端荣誉出品的UI框架,基于jQuery,针对PC网站,兼容IE8+,包含20+静态或动态UI组件,非常适合面向外部用户的网站开发。
具有贴近用户,上手简单,使用场景广泛,成熟,体验好等优点,面向设计,方便体验侧前端同学进行开发,方便设计师视觉还原和创意实现,在PC端用户侧网站开发上,LuLu UI有着不可匹敌的竞争力!
微信网页悬浮窗交互效果的web实现
2018年06月6日,星期三微信更新后,发现多了个悬浮窗功能。公众号阅读,网页浏览回退后默认会出现。再点击,可以回到刚才阅读的地方。于是,再也不会遇到回复老婆的信息,再切换回来重新找刚才阅读东西的麻烦了。我个人觉得是很有用的一个功能。
其交互效果,也被不少人称赞。例如,窗口会收缩到悬浮按钮中,悬浮按钮可以拖到右下角取消浮窗。这些交互效果呢,使用web前端技术也是可以实现,有demo,有截图,有必要的源代码展示,希望本文的内容能够对您的学习有所帮助。
突破本地离线存储5M限制的JS库localforage简介
2018年06月4日,星期一说到本地存储数据,我们首先想到的是localStorage,应该很多小伙伴都用过,使用很简单。然而,localStorage却有不少确定,如存储容量限制,只支持字符串等。localforage的作用就是用来规避上面localStorage的缺点,同时保留localStorage的优点而设计的。具体是怎么规避的呢?最终使用效果又是怎样?
即将为你揭晓……