随笔分类 - html[5]
html与h5相关资料学习研究
摘要：如果后台使用 textarea 输入内容，在前段显示需要保留换行符与空白字符，该如何做？ 常规方法 替换换行符为 <br> 标签，替换空白字符为 ，再输出到要显示的位置。 弊端：不够简洁！ pre 标签实现 弊端：超出容器 pre 标签并没有按照理想方式换行显示！ css 样式实现 <d
阅读全文
摘要：重要事情说三遍 此文章中的API接口，必须放在 https 协议下测试！浏览器APP必须开启摄像头权限！此文章代码仅在 chrome 手机浏览器及微信中测试通过。此处省略两遍。 示例 本文仅使用陀螺仪模拟 AR 效果，完整 AR 逃不掉一整套算法，本菜鸟还做不到啊。 代码如下： <!DOCTYPE
阅读全文
摘要：强大的 canvas 可以做很多事，包括手绘，压缩图片，图片滤镜，3D效果等等。 本文仅用 canvas 冰山一角的功能获取坐标点颜色。 源码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" co
阅读全文
摘要：如图： 图片加载失败了，在浏览器会默认显示一张破图。受各种网速、浏览器等因素影响，我们无法保证图片能够完全加载成功。加载失败时如何更友好的显示是前端要考虑的主要因素。 常见做法都是使用一张默认图代替加载失败的图片，比如一个 logo 、一张主题图片等。 做法一 使用 JS 懒加载图片，如果图片加载失
阅读全文
摘要：解析 <path> 标签应该算是 SVG 中最为强大的标签了，各种图形都可以用他绘制。本文使用 path 标签的贝塞尔曲线 Q 指令绘制弧线。 用法 <path d="M30 90 Q115 139 200 90"></path> <path> 标签常用指令： M = moveto L = line
阅读全文
摘要：本方法两种应用方式：一种使用canvas解析本站图片中的二维码，canvas有同源策略限制，只能处理本站图片。另一种处理文件选择中的图片二维码。 第一种使用场景可以换成像微信中一样，长按图片识别二维码。 引用了第三方的qrcode.js解码，但是这个文件并未在GitHub中找到，不知道出处。源码：
阅读全文
摘要：本文代码测试要求，最新的chrome浏览器(手机APP)，并且要允许chrome拍照录像权限，必须要HTTPS协议，http不支持。 原理：调用摄像头，将摄像头返回的媒体流渲染到视频标签中，再通过canvas绘制到画布上面，最后通过canvas分析二维码 兼容性只在手机中的chrome中测试通过，微
阅读全文
摘要：主要运用H5的媒体接口API，MDN文档： navigator.mediaDevices(新版API)，Navigator.getUserMedia(旧版API，不建议使用，但某些浏览器还支持)，本文使用新版API 这个API并不是所有浏览器都支持，本人只在最新的chrome中测试通过，并且需要HT
阅读全文
摘要：运用contenteditable实现输入框高度自动增加，输入框标题name相对高度自动居中，代码如下： 美中不足之处，contenteditable属性模拟的输入框是可以输入HTML代码的，在提交给后台的时候需要做一下过滤，要不然会被xss注入攻击；或者提交的时候用js获取模拟input的inne
阅读全文
摘要：不废话，上代码： 以上是从一个微信分享里面看到的，觉得很牛逼，扒了一下源码，未深入研究，有兴趣可以研究一下腾讯的X5内核。
阅读全文
摘要：奇葩需求啥时候都会有，最近有个需求是不允许浏览器回退，但是所有页面都是超链接跳转，于是乎脑壳没转弯就回答了做不到，结果尼玛被打脸了，这打脸的声音太响，终于静下心来看了下history api。 先上代码： 下面一步步来解释： 页面载入时就使用history api插入一条历史记录，为啥要这一步呢，原
阅读全文
摘要：支持地理定位的浏览器有IE9+、Firefox 3.5+ 、Opera 10.6+ 、Safari 5+ 、Chrome、iOS 版Safari、Android版WebKit。 注：测试过根据api调用百度地图显示当前位置，测试结果与原生应用（安卓，iOS应用）获取的位置偏差较大，不适合做导航定位应
阅读全文
浙公网安备 33010602011771号