HTML
关注
分享
扫一扫
刘翾
如果有一天我们淹没在人潮里，那是因为没有努力活得丰盛。
展开
-
HTML常用标签
html -->html全称 hyperText markup language 一.基本标签1.根标签 2.结构标签 ----给浏览器识别用 ----给用户使用3.单标签1 Tips：标签中可以添加属性，属原创 2016-09-11 12:27:26 · 811 阅读 · 0 评论 -
H5实现调用本地摄像头实现实时视频以及拍照功能
效果这是柚子皮…博主就穿个小背心就不露脸了…getUserMedia APIHTML 5 的getUserMedia API提供了访问媒体的能力, 基于该特性, 开发者可以不依赖任何浏览器插件下去访问视频和音频等设备.旧版API : navigator.getUserMedia 新版API : navigator.mediaDevices.getUserMedia旧版语法: getUserMedi原创 2017-11-14 23:34:51 · 86194 阅读 · 67 评论 -
利用Performance API分析网站性能
performancewindow.performance.timing对象包含了完整的网页加载性能数据, 下面详细介绍如何通过对象各个属性获取页面加载期间各个阶段的性能页面加载的第一个时间点是navigationStart, 表示上一个页面的unload事件触发, 接下来的事件点是fetchStart, 表示开始获取当前页面内容. fetchStart时间点和navigationStart时间点原创 2017-11-18 15:06:27 · 3575 阅读 · 0 评论 -
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 · 807 阅读 · 0 评论 -
H5PostMessages实现跨页面通信
效果图postMessagesHTML5提供了新型机制PostMessage实现安全的跨源通信.语法otherWindow.postMessage(message, targetOrigin, [transfer]);otherWindow: 其他窗口的一个引用, 比如IFRAME的contentWindow属性, 执行, window.open返回的窗口对象.message: 将要发送到其他窗原创 2017-11-17 20:58:24 · 4703 阅读 · 2 评论 -
H5实现手机摇一摇
方向事件deviceorientation该事件实在设备方向发生变化时触发, 使用方法如下;window.addEventListener('deviceorientation', orientationHandler, true);回调函数orientationHandler会接收到一个DeviceOrientationEvent类型参数, 包含以下信息. 属性名 说明 absolute原创 2017-11-17 19:06:21 · 5240 阅读 · 0 评论 -
基于H5canvas刮刮乐界面
效果老规矩线上效果图, 如下图 原理主要基于canvas的图形组合 context.globalCompositeOperation这个函数. 图形组合就是两个图形相互叠加了图形的表现形式,是后画的覆盖掉先画的呢，还是相互重叠的部分不显示等等，至于怎么显示就取决于type的值了. type： source-over（默认值）:在原有图形上绘制新图形 destination原创 2017-04-06 18:41:21 · 2216 阅读 · 0 评论 -
基于H5canvas和js的高斯模糊处理
效果线上效果图 原理高斯模糊的原理中，它是根据高斯曲线调节像素色值，它是有选择地模糊图像。说得直白一点，就是高斯模糊能够把某一点周围的像素色值按高斯曲线统计起来，采用数学上加权平均的计算方法得到这条曲线的色值，最后能够留下人物的轮廓，即曲线. 更加具体的解释请移步到 阮一峰的高斯模糊算法. 本篇blog主要讨论js的高斯函数及其应用.采用了两种分别不同的函数来处里像素位点, 第一种是直接使原创 2017-04-06 19:01:13 · 1469 阅读 · 0 评论 -
利用H5SVG实现线性动画效果
效果图原理主要应用到了SVG的两个属性分别为: stroke-dasharray和stroke-dashoffset. stroke-dasharraystrokedasharray属性用于创建虚线：下面来看看例子 path{ stroke: #000; fill: transparent; stroke-widt原创 2017-04-08 17:33:25 · 4507 阅读 · 0 评论 -
H5之localStorage 和 sessionStorageWEB存储
简介使用HTML5可以在本地存储用户的浏览数据。 早些时候,本地存储使用的是 cookie, 并且cookie对储存大小也有限制. 但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能. 数据以 键/值 对存在, web网页的数据只允许该网页访问使用。浏览器兼容区别localStorage和sess原创 2017-04-09 17:29:51 · 728 阅读 · 0 评论 -
H5之视频video/音频audio
音频 audio用法1.单标签型<audio id="audio" src="./音乐.mp3"></audio>2.多类型资源<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg">您的浏览器不支持 audio 元素。</audio>3.脚原创 2017-04-16 10:45:01 · 1674 阅读 · 0 评论 -
HTML5 拖放Drag 和 drop用法以及事件介绍
设置元素为可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true ：<img draggable="true">拖拽事件 名称 作用 dragstart 在拖动时触发 dragend 在拖动完成时触发 dragenter 目标元素上绑定dragenter事件,当拖拽元素进入目标元素时触发 dragover 目标元素上绑定dragover事件,原创 2017-05-02 20:34:18 · 4942 阅读 · 0 评论 -
HTML5 FileReader分布读取文件以及其方法简介
效果图老规矩先上效果图 先介绍一下H5中FileReader的一些方法以及事件FileReader方法 名称 作用 about() 终止读取 readAsBinaryString(file) 将文件读取为二进制编码 readAsDataURL(file) 将文件读取为DataURL编码 readAsText(file, [encoding]) 将文件读取为文本原创 2017-05-02 22:58:09 · 3049 阅读 · 0 评论 -
HTML< form >标签+CSS选择器介绍
继续接着上一篇继续学习HTML的基本标签HTML标签1.< form >标签1.1属性method = “get/post”action = “目标地址,后台服务器的域名地址” 1.2< input >标签和’form’标签配合使用1.2.1属性type = “text输入框/ password密码框/ submit提交框/ radio单选框/ checkbox复选框”name = “use原创 2016-09-16 16:55:26 · 1497 阅读 · 0 评论 -
移动WEB--仿手机原生相册(Vue版)
效果由于图片大小限制, 画质和帧数较差, 图片那些看起来比较可爱, 也就没有计较比例问题~思路整体图片flex布局, 结合Vue和移动touch事件实现, 具体细节代码上有注释, 想学习的朋友可以看一看.代码下面主要贴上主要逻辑代码, 具体实现参见https://github.com/TheKiteRunners/phone-Vueweb-gallery//index.html <div :cl原创 2017-11-30 23:05:01 · 4110 阅读 · 0 评论