HTML5
关注
分享
扫一扫
小熊代码加
键盘虐待者
展开
-
postcss-px-to-viewport 适配 uniapp
参考：https://uniapp.dcloud.io/component/page-meta?id=page-metamodule.exports = { css: { loaderOptions: { postcss: { plugins: [ require(‘postcss-px-to-viewport‘)({ unitToConv原创 2021-11-09 11:27:53 · 3413 阅读 · 4 评论 -
H5+ APP实现检测更新
hrefLink() { var that =this //判断终端 var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //...原创 2021-08-17 17:02:13 · 587 阅读 · 0 评论 -
nth-of-type在选择class的时候需要注意的一个小问题
1、.class:nth-of-type(n)在选择class的时候，如果在class前面插入x个同类型标签，n需要加上x <!DOCTYPE html><html><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><head><style> * {padding: .5em;} .para:nth-of-type(1) {ba原创 2021-07-15 11:46:43 · 983 阅读 · 0 评论 -
WebSocket构建实时WEB
1 WebSocket与传统Web实时通信技术1.1 WebSocketHTTP是一种典型的单工模式。即基于Request/Response的方式与服务器进行交互。HTML5提供了浏览器与服务端的双工通信协议WebSocket。1.2传统Web实时通信技术轮询 Comet 长轮询 Flash XML Socket轮询，对服务器压力较大，实时性差，效率低下。移动端对Flash支持的非常差。Flash经常全局性的崩溃，很不稳定。Comet与长轮询应该是传统方案中最好的Web.转载 2020-06-29 13:30:08 · 271 阅读 · 0 评论 -
蓝牙
wx.closeBluetoothAdapter({success:function(res){console.log('先关闭蓝牙连接')_this.initBlue()}});//初始化设备initBlue:function(){v...原创 2020-04-26 18:49:00 · 217 阅读 · 0 评论 -
用 Canvas 编织璀璨星空图
先来看看最终的效果：GitHub项目: CyandevToys / ParticleWeb是不是还蛮酷的呢？本文我们就来一点一点分析怎么实现它！分析首先我们看看这个效果具体有那些要点。首先，这么炫酷的效果肯定是要用到 Canvas 了，每个星星可以看作为一个粒子，因此，整个效果实际上就是粒子系统了。此外，我们可以发现每个粒子之间是相互连接的，只不过离的近的粒子之间的转载 2017-11-04 00:06:41 · 1670 阅读 · 0 评论 -
H5拖放API基础篇
不要搞错，本文不是讲如何拖地的。看过《javascript精粹》朋友应该知道，他实现拖放的过程比较复杂，现在时代不同了，我们用H5的新的拖放API就能非常方便的实现拖放效果了。最近在园子见一园友写了一篇《HTML5 进阶系列：拖放 API 实现拖放排序》，真乃大师之作，大～熊同学作为一代菜鸟（不是宗师），无法与之想比，遂推出基础篇，希望各位园友有所收获。一个简单的例子–地上有石子捡几个吧转载 2017-11-04 00:04:33 · 2286 阅读 · 0 评论 -
HTML5触摸事件
为什么要用触摸事件？触摸事件是移动浏览器特有的HTML5事件，但这当然不是用触摸事件的主要理由。因为移动端的click有很大延迟（大约300ms），300ms延迟来自判断双击和长按，因为只有默认等待时间结束以确定没有后续动作发生时，才会触发click事件。而触摸事件的延迟则是非常短的，使用触摸事件的能够提高页面响应速度，带来更好的用户体验。标准的触摸事件Webkit内的触摸转载 2017-11-04 00:02:54 · 595 阅读 · 0 评论 -
超实用的高清图标SVG解决方案全总结(上)
随着硬件快速的发展，Retina技术发展至今，目前Google Nexus6的devicePixelRatio已经到了3.5，虽然目前主流的Retina显示器还是以devicePixelRatio = 2的为主，但是为了更好的用户体验，前端和视觉同学经常都要为了各种图标能够在Retina屏幕下高清显示而头痛。下面先介绍下目前的一些常规的解决方案。多倍图片目前用的比较转载 2017-11-04 00:01:51 · 8995 阅读 · 0 评论 -
移动端样式小技巧
平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧，希望对看官有所帮助！本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和 iPhone6进行样式对比。line-heightline-height经常用于文字居中，当然也有小伙伴会用上下padding去写.but！不转载 2017-11-03 23:58:04 · 336 阅读 · 0 评论 -
超实用的高清图标SVG解决方案全总结(下)
在上一篇文章中，我们讲述了字体渲染机制和导致iconfont出现锯齿的原因，以及如何才能出绘制高质量SVG ICON，并且提供了一套AI模版供大家参考使用。下文将讲诉前端侧我们如何用SVG来做成高清IOCN，并且良好支持PC下的各个浏览器，并兼容IE6+以上的浏览器。上期回顾：《超实用的高清图标SVG解决方案全总结（上）》从上一篇文章中我们得知SVG 做的图标在IE9+的浏览器渲染转载 2017-11-04 00:00:21 · 6702 阅读 · 0 评论 -
带你轻松打开svg滤镜的大门
上次和大家一起，用最简单直白，轻松粗暴的方式学习了一遍SVG动画，这次我们再一起来搞点不一样的东西，SVG滤镜的实现。SVG滤镜绝对称得上是他最强大的功能之一，在不影响任何文档结构的前提下，允许你给你的矢量图形添加各种专业视觉效果，我个人给他的定义就是，把PS装到了网页上。SVG滤镜的原理基本原理描述太多明显有违我们 “轻松打开” 的目的，这里简单的描述一下，SVG在使用了转载 2017-11-03 23:56:44 · 456 阅读 · 0 评论 -
canvas粒子时钟
前面的话本文将使用canvas实现粒子时钟效果效果展示点阵数字digit.js是一个三维数组，包含的是0到9以及冒号(digit[10])的二维点阵。每个数字的点阵表示是7*10大小的二维数组通过遍历数字点阵的二维数组，当该位置的值为1时，则绘制一个粒子，否则不绘制将绘制数字的函数命名为renderDigit()。在该函数中，将粒子绘制为转载 2017-11-03 23:55:59 · 428 阅读 · 0 评论 -
HTML5 高级系列：web Storage
前言HTML5 的 web Storage 存储方式有两种：localStorage 和 sessionStorage。这两种方式都是通过键值对保存数据，存取方便，不影响网站性能。他们的用法相同，存储时间不同。localStorage 的数据保存在本地硬件上，可以永久保存，可以手动调用api清除数据。sessionStorage 保存在 session 对象中，会在浏览器关闭时转载 2017-11-03 23:54:53 · 148 阅读 · 0 评论 -
HTML5 进阶系列：拖放 API 实现拖放排序
前言HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。而 img 元素和 a 元素都默认设置了 draggable 属性为 true，可直接拖放，如果不想拖放这两个元素，把属转载 2017-11-03 23:53:28 · 497 阅读 · 0 评论 -
HTML5 进阶系列：文件上传下载
前言HTML5 中提供的文件API在前端中有着丰富的应用，上传、下载、读取内容等在日常的交互中很常见。而且在各个浏览器的兼容也比较好，包括移动端，除了 IE 只支持 IE10 以上的版本。想要更好地掌握好操作文件的功能，先要熟悉每个API。FileList 对象和 file 对象HTML 中的 input[type=”file”] 标签有个 multiple 属性，允许用户转载 2017-11-03 23:52:11 · 1775 阅读 · 0 评论