网站链接：
我爱捣鼓
随着html5技术的普及，越来越多的人在使用这项技术做出更炫、效果更好的网页，但是我们使用html5技术的同时，也在为很多浏览器的不支持而感到苦恼，于是我们就可以做两套技术方案，一套提供给浏览器支持html5的用户浏览，一套提供给普通用户浏览。所以就涉及到浏览器是否…
上一篇文章我们介绍html5实现下拉无限加载数据的其中一种方法，今天我们介绍实现这种效果的第二个方法。 为了有更好的分页加载效果，我在网上查了一些分页加载的插件，大家推荐最多的是iscroll.js这个插件，我把这个插件加入到我做的晒照片的项目中了，页面地址：…
当页面有许多相同类型数据需要加载，而且单个屏幕不足以显示这些内容，就需要使用分页加载方法，在手机客户端，一般都是使用上划下划的方式，为了有更好的用户体验，还需要在加载数据前，显示类似“加载中...”的提示，在数据加载完成后，隐藏加载提示。今天我们就来看看…
SVG 是是用来制作矢量图的 HTML5 标签，用来定义 SVG 图形的容器。SVGg 可以绘制框、圆、路径、图形图像。在使用 SVG 标签的时候，可以将标签添加到 html body 中，在为它添加对应的 css 样式。SVG 是什么？SVG 即 Scalable Vector Graphics，是一种用来绘制矢量图的 HTM…
圣诞节快到了，许多商家都在为圣诞节做准备，今天我们就用html5来实现一个圣诞树的特效动画。效果如下图所示：<html><head> <meta charset="UTF-8"> <meta name="apple-mobile-web-app-title" content="CodePen"&g…
我们经常会遇见拖拽某一个元素的场景，拖拽也是很常用的； 这次拖拽遇见一个问题，有时在拖拽的时候吗，鼠标松开，元素仍然可以拖拽； 经过查阅资料，发现: 会触发H5原生的拖拽事件。并且不会监听到onmouseup, 从而导致鼠标松开也能够拖拽。…
html5 querySelector()方法 html5 querySelector()方法返回文档中匹配指定 CSS 选择器的第一个元素，如果没有匹配返回null举例<div id="div">querySelector1</div><div class="test1">querySelector2</div><div c…
html5 classList属性 html5 classList属性用于在元素中添加，移除及切换 CSS 类。 classList 属性是只读的，但可以修改它。html5 classList属性常用方法 add()：添加class remove()：删除class length：返回类列表中类的数量(只读属性…
js indexof方法对象不支持此属性或方法前两天在写js代码用到indexof方法但测试时却显示“对象不支持此属性或方法”的问题，今天我们就来看看如何解决这个问题？我们先来看看indexof方法基本的知识：定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次…
document.queryselector其实也不算是html5的新增元素，它只是继承了html4的属性，今天我们就来说说document.queryselector属性如何使用? 先看一个实例，结合实例分析一下：<!DOCTYPE html><html><head> <meta charset="UTF-8"&a…
了解localStoragelocalStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。localStorage 的优势 1、localStorage 拓展了 cookie 的 4K 限制。 2、localStorage 会…
定义和使用localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。提示: 如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性， 该…
在html5中可以使用canvas标签在画布上画图，我们先了解一下canvas标签的具体用法什么是 canvas?HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 canv…
HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法：1.检测浏览器对FileReader的支持if(window.Fi…
图片上传的功能相信大家并不陌生，但通过html5实现移动端的图片上传可能接触的就少了，这不我们刚做了个项目就需要实现这样的功能，下来我就和大家聊聊关于移动端图片压缩上传功能是如何实现的?大体的思路是，部分API的兼容性请参照caniuse：1、利用FileReader,读取blob…
html5页面上传图片很方便，主要用到了html5的FileReader方法，今天我们就通过身份证照片上传作为例子来说说它的用法。调用FileReader对象的方法FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功…
本来的required没有考虑本地HTML5的验证测试，而不是供应自己的自定义测试。如果你不想使用HTML5的类型匹配和模式匹配，然后利用setcustomvalidity()与oninvalid事件：<input type="text" pattern="[a-zA-Z]+" oninvalid="setCustomValidity…
前一阵子做了个移动端的mp3网站，利用html5来实现相关的一些功能，比如：MP3的预览、获取MP3的时间长短，下面我们就说说这些功能是如何实现的?举例说明：<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>&l…
JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在网络或者程序之间轻松地传递这个字符串，并在需要的时候将它还原为各编程语言所支持的数据格式，例如在 PHP 中，可以将 JSON 还原为数组或者一个基本对象。在用到AJAX时，如果需要用到数组传值，这…
如果你是一个人做网站，那你写代码可以天马行空，不用在意太多条条框框，但如果你是一个team去开发软件，大家都是我行我素，那软件开发出来肯定是失败的，今天我们就来说说一个team在编写前段HTML/CSS时的规范(主要参考Google的HTML/CSS编码规范)。Google规范的原文链接大…
