首页风格
门户
博客

技术专题分享

前端开发攻城师绝对不可忽视的五个HTML5新特性

前端开发攻城师绝对不可忽视的五个HTML5新特性

HTML5已经火了一段时间了,相信作为web相关开发工程师,肯定或多或少的了解和尝试过一些HTML5的特性和编程。还记得以前我们介绍过的HTML5新标签。 作为未来前端开发技术的潮流和风向标,HTML5绝对不容忽视。

在今天这篇技术分享文章中,我们将介绍几个HTML5的重要特性,能够帮助你提高整个web应用的使用体验和开发效率,相信大家会感兴趣的!

特性一:正则表达式

相信大家都会非常喜欢这个特性,无须服务器端的检测,使用浏览器的本地功能就可以帮助你判断电子邮件的格式,URL,或者是电话格式,防止用户输入错误的信息,通过使用HTML5的pattern属性,我们可以很方便的整合这个功能,代码如下:

<input type="email" pattern="[^ @]*@[^ @]*" value="">

运行如下:

如果在Firefox浏览器中运行,并且输入错误的email地址,会看到如下:

GBdebug在线调试地址:http://www.gbin1.com/gb/debug/3465707b-8071-40fa-a159-4356a0a17a52.htm

标签: html5, html5新特性, 正则表达式, 新特性, 前端开发, html5特性

阅读更多

使用HTML5的Canvas画布来剪裁用户头像

使用HTML5的Canvas画布来剪裁用户头像

本文来自极客标签社区用户webgeek的一个在线HTML5web开发小技巧,帮助你使用html5的画布功能来切割用户上传的大头照。

在线调试

例如需要剪裁的图片如下:

webgeek

用来处理大头照的JS代码如下:

var canvas = document.getElementById('myavatar');
var context = canvas.getContext('2d');
var imageObj = new Image();

imageObj.onload = function() {
// draw cropped image
var sourceX = 60;
var sourceY = 0;
var sourceWidth = 180;
var sourceHeight = 180;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = canvas.width / 2 - destWidth / 2;
var…

标签: HTML5, 分享, canvas

阅读更多

支持触摸设备的响应式HTML5音频播放器 - AudioPlayer.js

支持触摸设备的响应式HTML5音频播放器 - AudioPlayer.js

在线演示

如果你希望开发一款支持响应式的HTML5播放器的话,AudioPlayer.js是一个不错的选择。它使用HTML5的audio标签帮助你生成一个支持响应式的音频播放器,不使用任何embed代码,图片或者flash,完全使用CSS定义界面。压缩后的大小只有4KB。

主要特性

  • 响应式
  • 触摸式
  • 自适应
  • HTML5音频的本地支持
  • 易用性.
  • 无图片
  • 无flash
  • 轻量级,压缩后4KB

如何使用

HTML

    <audio preload="auto" controls>
    <source src="audio.wav" />
    <source src="audio.mp3" />
    <source src="audio.ogg" />
    </audio>

Javascript

    <script src="jquery.js"></script>

标签: jQuery, 分享, HTML5, HTML5播放器

阅读更多

基于javascript和canvas(画布)的开源HTML5应用开发框架 - iio Engine

基于javascript和canvas(画布)的开源HTML5应用开发框架 - iio Engine

随着HTML5的发展,越来越多的基于HTML5技术的网页开发框架出现,在今天的这篇文章中,我们将介绍iio Engine,它是一款开源的创建HTML5应用的web框架。

整个框架非常的轻量级,只有45kb大小,并且整合了debug系统,并且跨平台支持。

不依赖任何第三方的类库,可以支持Box2D,拥有完整的文档支持。支持快速的开发。

使用这个类库你只需要使用10多行的代码就生成一个tic-tac的游戏,代码如下:

    TicTacToe = function(io){

var grid = io.addObj(new iio.ioGrid(0,0,3,3,120)
.setStrokeStyle('white'));
var xTurn=true;
io.canvas.addEventListener('mousedown', function(event){
var c = grid.getCellAt(io.getEventPosition(event),true);

标签: 分享, HTML5, 前端框架, canvas

阅读更多

下一页

喜欢我们的文章请您与朋友分享:

?ü?à

今日推荐