前端上传前预览文件 image、text、json、video、audio
2020-05-22
阅读 2 分钟
8.1k前天有个需求，上传前需要校验视频长度，然后让我出个 Demo。预览文件 demo其实预览功能实现上都差不多，所以今天我们都来实现一下咯。选择文件一般来说上传常见的操作就三种，单击、拖拽、粘贴。下面我们分别来说一下。input 选择文件我们无法获取用户本地的内容，需要通过 <input> 标签，让用户自己选取。<in...
实现摇一摇功能 - H5 设备运动事件 DeviceMotionEvent DeviceOrientationEvent
2020-05-21
阅读 4 分钟
7.5k新年不是搞了个摇签的功能吗，弹幕效果咱们前面讲过了，今天来说说摇一摇效果 DEMO 基础 DEMO，摇一摇然后可以看红绿色，有颜色代表触发。 完整 DEMO 摇一摇手机，绿色变为黄色，为分数统计 黄色 + 触发 50 阈值时 ，触发 200ms 震动 黄色 + 触发 100 阈值时 ，触发声音效果 设备方向和运动监听 html 5 提供了一些方法在...
[面试官系列] input、change、keydown、keypress、keyup 触发的时机是？
2020-05-16
阅读 2 分钟
7.5k我认为这道题是一个挺有意思的题，但是回答正确的面试者很少，今天我来聊一聊。先上 DJ，哦不对先上 DEMO，测试地址：[链接] 事件含义及触发时机 focus、blur 获取焦点 (focus)、失去焦点(blur)。 属于 FocusEvent 接口。 keydown、keypress、keyup keydown 键盘按下，一直按就一直触发 keypress 按下 产生字符值的键时...
前端培训-中级阶段（34）- Vue 生命周期
2020-05-14
阅读 3 分钟
2.1k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（33）- Vue 介绍、实例
2020-05-13
阅读 3 分钟
2.6k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（32）- set、map、proxy、reflect、generator（2020-01-02期）
2020-05-12
阅读 6 分钟
2.6k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端答疑 - v-if 重新渲染导致的 Bug
2020-05-06
阅读 2 分钟
12.5k问题是这样的，有个页面它里面有两个组件 1活动组件、2搜索组件，然后活动组件里面有个评论留言的功能，测试同学发现组件切换之后评论被清空了。问题大体就这样。因为活动不是我做的，我只负责排查问题，所以我也是听别人的反馈来分析问题。
前端获取图片exif信息
2020-03-19
阅读 1 分钟
10.2k对又是我，每天都有新的需求。 这次的需求是上传图片的时获取图片的宽高、设备、光圈等信息。 不用考虑服务端做，他们肯定是不做。 pc、android、ios 都支持了，现在就缺少 web 这边上传的图片了。 废话不对说，上测试地址：[链接] 获取图片宽高 {代码...} URL.createObjectURL 可以把 input 选择的文件转换为一个 url。...
前端使用自定义字体方案
2020-03-18
阅读 2 分钟
7.3k工作中我相信大家都遇到过设计要求使用一些奇奇怪怪字体的需求，然后因为字体文件太大，选择切图。 我这个需求就厉害了，用户发的文章可以选择字体。这文章中可以出现的字就太多了，显然上个方案就不合适了，那我们是这么做的呢？ 废话不多说，先上 demo，别问我 demo 是谁。 接口地址：[链接] 页面地址： [链接] 实现方...
横竖屏检测 orientation resize matchMedia
2020-03-14
阅读 2 分钟
4.1k这在家办公也不让闲着点。虽然说需求提出来了，但是我们身为一个前端er，还是要有自己的想法呀，我们要统计一波数据看看到底有多少人在横屏使用我们的产品。
前端培训-中级阶段（31）- Class 的基本语法、Class 的继承（2019-12-26期）
2020-01-07
阅读 4 分钟
2.7k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（29）- ES6语法（2019-12-12期）
2020-01-03
阅读 6 分钟
3.1k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（26）- Canvas 绘图（2019-11-21期）
2019-12-09
阅读 6 分钟
3.7k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（25）- Web Socket 网络编程（2019-11-14期）
2019-11-08
阅读 3 分钟
3.1k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（24）- Web Workers 多线程（2019-11-07期）
2019-11-07
阅读 3 分钟
2.7k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（23）- Manifest ApplicationCache 应用程序缓存（2019-10-31期）
2019-10-29
阅读 3 分钟
2k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（22）- localStorage/sessionStorage本地存储（2019-10-24期）
2019-10-23
阅读 2 分钟
2.4k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（21）- xhr2、FormData（2019-10-17期）
2019-10-22
阅读 3 分钟
2.7k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（19）- 拖拽API（2019-10-03期）
2019-09-30
阅读 3 分钟
2.7k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（17）- 多媒体API（2019-09-19期）
2019-09-30
阅读 5 分钟
3.2k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
蹭热点，请给我一面国旗@微信官方
2019-09-25
阅读 2 分钟
4.9k今天下午微信朋友圈炸了，所有人都在要国旗。迎国庆换新颜活动 | 腾讯新闻的合成服务 微信中打开。我们呢，也来蹭蹭热度，聊聊其中的技术。 猜测如何实现 授权-获取用户头像 载入图片 手势操作-移动缩放 合成图片 下载图片 求证如何实现 当然，上面只是我以为。通过观察分析节点，我发现 的确是载入图片了。地址为blob:...
前端培训-中级阶段（9）- 原生Ajax的运行原理与实现（2019-08-08期）
2019-07-17
阅读 5 分钟
3.6k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（5）- jQuery的概念与基本使用（2019-07-11期）
2019-06-27
阅读 4 分钟
2.9k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（3） - DOM 文档对象模型（2019-06-27期）
2019-06-20
阅读 3 分钟
3.3k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（2） - 事件(event) 事件冒泡、捕获 - （2019-06-20期）
2019-06-18
阅读 5 分钟
3.9k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端答疑-chrome开发者工具正确食用-看网页源码
2019-06-06
阅读 3 分钟
13.5k写这个文章，是因为在今天早上，有两个兄弟找我要源码。有图有真相。我震惊于都 9102年了，身为了一个正（xie）经（xin）前端er，还不会看控制台？
前端bug录-移动端下载图片
2019-06-06
阅读 3 分钟
8.2k前天，快下班的时候，一朋友发来一个战绩图。这是要约我上分？（这兄弟一手 C 位吊打亲友）。我果断拒绝三连。结果，小韭菜问我，右边那个图怎么做？那好了，事情从这里开始
前端培训-初级阶段-场景实战（2019-06-06）-下载文件&下载进度
2019-05-28
阅读 4 分钟
7k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-初级阶段-场景实战（2019-05-09）-聊天框-发送框
2019-05-13
阅读 4 分钟
5.1k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-初级阶段（13） - ECMAScript （语法、变量、值、类型、运算符、语句）
2019-04-01
阅读 3 分钟
2.7k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。