HTML5 新的表单元素HTML5 有以下新的表单元素:<datalist><keygen><output>注意:不是所有的浏览器都支持HTML5 新的表单元素，但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。HTML5 <datalist> 元素<datalist> 元素规定输入域的选项列表。<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：使用 <input> 元素的列表属...
什么是语义元素?一个语义元素能够清楚的描述其意义给浏览器和开发者。无语义 元素实例: <div> 和 <span> - 无需考虑内容.语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.浏览器支持Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素。注意: Internet Explorer 8及更早版本不支持该元素. 但是文章底部提供了兼容的解决方法.HTML5中新的语义元素许多现有网站都包含以下HTML代码： <div id="n...
今天学习vue全局配置。希望帮助我们去了解vue的全局配置，快速开发。Vue.config是vue的全局配置对象。包含Vue的所有全局属性：代码如下：silent:boolean(默认值：false)----取消Vue的所有的日志与警告 ；用法：Vue.config.silent = true optionMergeStrategies：{[key:string]:Function}(默认是空对象{}） vue.config.optionMergeStrategies._my_option = function (parent, child, vm) { return child + 1 }自定义合并策略的选项：...
闲的没事 写个扫雷， 算法 不太好·····凑合，还真的不错，可以看一下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>扫雷</title> </head> <body><script>function Set(r,c,hard){var data = new Array();for(var i=0;i<r;i++){data[i]=new Array(c);}for (var i = 0; i < r*c; i++){var ran=Math.floor(Math.random()*100);data[Math.floor(i / c)][i % c] =ran<hard?1:0; }return data;}function GetNewData(d...
以前我们在本地存储数据都是用document.cookie来存储的,但是由于其的存储大小只有4K左右,解析也很复杂,给开发带来了诸多的不便.不过现在html5出了web的存储,弥补了cookie的不足,而且开放起来也是相当的方便web存储分两类sessionStorage容量大小约为5M左右,该方式的生命周期为关闭浏览器窗口为止localStorage容量大小约为20M左右, 存储的数据不会随着用户浏览时会话过期而过期，但会应用户的请求而删除。浏览器也因为存储空间的限制...
HTML5 Canvas<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。什么是 Canvas?HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。浏览器支持Internet Explorer 9+, Firefox, Opera, C...
一开始，在 Web 端，并没有任何可以接触到 clipborad 的内容。以前，我们想要执行 copy/paste/cut 只能借助 flash。但现在，伟大的 H5 又或者说 W3C 推出了关于 H5 操控 clipboard 的草案。最出名的就是两个 API:document.execCommand() ClipboardEvent我们一步一步来了解一下。先来看一下经典 execCommand 的使用。复制操作input 复制我们需要先了解一下，基本的复制过程：选中（select）复制（command + c || ctrl + c）execComm...
上周五突然接到现场的一个需求，做一个移动端的劳模展示页面。现场美工把原型图发了过来。这个样子的：说实在的很想吐槽一下我们美工的审美哈，不过这不是重点。因为边框是需要特殊花纹的所以打算用border-image实现。 .example{……border:6px solid transparent;-webkit-border-image:url(../img/border_img.jpg) 6 6 round;border-image:url(../img/border_img.jpg) 6 6 round;……}最终发现安卓显示正常。IOS边框是显示不出来...
这篇文章主要介绍了详解HTML5 window.postMessage与跨域,非常具有实用价值，需要的朋友可以参考下在前一篇文章中，讲到浏览器同源策略，即阻止不同域的页面间访问彼此的方法和属性，并对解决同源策略跨域问题提出的解决方案进行阐述：子域代理、JSONP、CORS。本篇将详细阐述HTML5 window.postMessage，借助postMessage API，文档间可以以安全可控的方式实现跨域通信，第三方JavaScript代码也可以与iframe内加载的外部文档进行通信。...
一年多前见过一个多人聊天室应用，是张丹老师写的一个 socket.io 教程 （原链接点不开，贴一个转帖的），觉得socket这个东西很神奇。后来研究生期间的一个项目也用到了.Net的socket，多个客户端之间的通信， 觉得很有意思，也是那一次比较全面地认识和应用了事件委托等等一些概念。最近受群里研究mapbox的热情和@扯淡大叔， @老羽 @F3earth 所有成员的帮助和启发， 突发奇想花了点时间基于mapbox gl js和socket.io做了一个 飞机大战...
这几天正好没事，所以研究了一下h5前端。h5是一个标签语言，里面各种各样的标签相当于ios里面各种各样的控件，其实思维逻辑是跟ios差不多的，都是把控件创建出来，然后进行布局。不扯了，下面甩个demo：倒计时.gif简单说一下思路：这是一个倒计时加载图片的小demo，实现的思路很简单，就是先创建两个控件，和<p>，在css里面把布局写一下，然后在javascript里面拿到这两个标签，这里说一下document 。document可以根据标签名 类 名字...
html5仿大炮炮弹的自由落体实现 html5的魅力相信大家不会陌生，希望各位大大浏览器们早点支持这个特性哦，，还有先吐槽一句，微信的那个broser简直弱爆了就简单的动画，比如滑动，就jquery的show(1000)，hide(1000)都卡的不行，还是qq浏览器的内核，qq浏览器，，，算了，，我先冷静下。。。。还有就是前几天看到的这个！！！都不支持要他干嘛？？？？？回归主题大炮整体思路就是将每个打出来的炮弹看做一个对象，他的x，y转换成ca...
实现流程：获取<input type="file">上传的文件；使用FileReader读取图片，并新建一个Image对象将FileReader读取的图片数据放进去；使用canvas将Image对象等比缩放并写入到画布中，保存为base64格式的数据（这里使用的是FormData对象上传，其实这里已经可以直接将base64的数据通过ajax使用post方法上传到服务器，即可避免下面两个步骤）；新建一个Blob对象将base64数据放入；使用FormData对象上传到第三方云储存服务器；使用HTML原生...
这篇文章主要为大家详细介绍了H5上传本地图片并预览的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下最近工作中需要H5上传显示图片的功能，如图：直接上代码：html部分<p class="works-wrap"> <p class="figure-box" id="figure_box"></p> <p class="add-btn"> <input type="file" id="imgUploadBtn" /> <a href="javascript:void(0);" rel="external nofollow" ><i></i>添加作品</a></p> </p> </p>我这边用css将in...
HTML video 适用于HTML 5+，用于定义在线观看的视频流媒体，这里简单介绍下， 方便需要的朋友HTML <video> 适用于HTML 5+，用于定义在线观看的视频流媒体。<video width ="320" height ="240" src="www.gxlcms.com/movie.ogg" controls="controls">这里是注释文字，如果无法支持 HTML 5 浏览器将显示这里的文字。如果支持，就直接显示视频，忽略文字。</video>在HTML 4 及以前，如果您想在网页中嵌入在线观看的视频，一般都需要使...