2017年11月_刘翾

原创移动WEB--仿手机原生相册(Vue版)

效果由于图片大小限制, 画质和帧数较差, 图片那些看起来比较可爱, 也就没有计较比例问题~思路整体图片flex布局, 结合Vue和移动touch事件实现, 具体细节代码上有注释, 想学习的朋友可以看一看.代码下面主要贴上主要逻辑代码, 具体实现参见https://github.com/TheKiteRunners/phone-Vueweb-gallery//index.html <div :cl

2017-11-30 23:05:01 4069

原创移动WEB开发---用rem开发响应式设计

效果rem与em区别先讲一个基础知识点 em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素代码在每次浏览器大小变化时页面的html的font-size大小都会改变html lang="en">head> meta char

2017-11-28 22:15:43 522

performancewindow.performance.timing对象包含了完整的网页加载性能数据, 下面详细介绍如何通过对象各个属性获取页面加载期间各个阶段的性能页面加载的第一个时间点是navigationStart, 表示上一个页面的unload事件触发, 接下来的事件点是fetchStart, 表示开始获取当前页面内容. fetchStart时间点和navigationStart时间点

2017-11-18 15:06:27 3479

原创 H5Server Sent Event服务端主动发送数据回客户端

效果图Server Sent EventServer Sent Event通过EventSource对象接收服务器发送事件的通知. 有三个事件message, open, error下面的代码演示了使用的方法例子代码运行环境: node.js代码粘贴下面代码运行node index.js//index.html<!DOCTYPE html><html lang="en"><head> <me

2017-11-17 21:44:30 788

原创 H5PostMessages实现跨页面通信

效果图postMessagesHTML5提供了新型机制PostMessage实现安全的跨源通信.语法otherWindow.postMessage(message, targetOrigin, [transfer]);otherWindow: 其他窗口的一个引用, 比如IFRAME的contentWindow属性, 执行, window.open返回的窗口对象.message: 将要发送到其他窗

2017-11-17 20:58:24 4650 2

原创 H5实现手机摇一摇

方向事件deviceorientation该事件实在设备方向发生变化时触发, 使用方法如下;window.addEventListener('deviceorientation', orientationHandler, true);回调函数orientationHandler会接收到一个DeviceOrientationEvent类型参数, 包含以下信息. 属性名说明 absolute

2017-11-17 19:06:21 5205

原创 H5实现调用本地摄像头实现实时视频以及拍照功能

效果这是柚子皮…博主就穿个小背心就不露脸了…getUserMedia APIHTML 5 的getUserMedia API提供了访问媒体的能力, 基于该特性, 开发者可以不依赖任何浏览器插件下去访问视频和音频等设备.旧版API : navigator.getUserMedia 新版API : navigator.mediaDevices.getUserMedia旧版语法: getUserMedi

2017-11-14 23:34:51 85833 67

原创一张图让你理清javascript中proto, prototype, 以及constructor之间的关系

如下图所示画的有点不太好看, 但是关系还是很清楚的

2017-11-08 22:31:32 511

原创 javascript---为ajax创建一个进度条指示器

xhr的progress事件在XMLHttpRequest2级中添加了一个progress事件, 这个事件会在浏览器接收新数据期间周期性的触发. 而onprogress事件处理程序会接收到一个event对象, 其target属性是XHR对象, 但会额外包含三个属性: lengthComputable, position和totalSize. 其中, lengthComputable是一个表示进度信息

2017-11-07 22:25:14 732

原创 JavaScript---ajax为什么要设置requestHeader

最近这一阵子由于写项目好久没写博客了, 现在我又回来了~ajax为什么要设置requestHeader理由默认情况下, 服务器对POST请求和提交web表单的请求并不会一视同仁. 因此, 服务器端必须有程序来读取发送过来的原始数据, 并从中解析出有用的部分. 不过我们可以使用xhr来模仿表单提交: 首先将Content-Type头部信息设置为application/x-www-form-urlenc

2017-11-07 22:14:32 1622

翾的博客