随笔分类 - HTML5
HTML5+CSS3 modereast web programming...
摘要：HTML5 中新增的``标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。# 用法一般情况下，`details`用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jQuery手风琴插件差不多。其大致写法如下：```html Google Nexus 6 商品...
阅读全文
摘要：> 原文：[How to make a simple HTML5 Canvas game](http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/)想要快速上手HTML5 Canvas小游戏开发？下面通过一个例子来...
阅读全文
摘要：HTML5有无限可能，总是在释出一些新鲜实用的功能，让原生的web环境更加炫酷。今天看到`datalist` 这个元素，可以用来预先定义一个输入框的潜在选项，也就是我们在平时项目中经常用jQuery插件或者自己写JS来实现的`autocomplete`「自动补全，但似乎自动提示更贴切一些」功能。具体...
阅读全文
摘要：前端已经被玩儿坏了！像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个帖子，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来。现分类整理出来分享给大家，也补充了一些平时的积累和扩展了一些内容。HTML篇浏览器地址栏运行JavaScript代码这个很多人应该还是知道的，在浏览器地址栏可以直接运行JavaScript代码，做法是以javascript:开头后跟要执行的语句。比如：javascript:alert('hello from address
阅读全文
摘要：HTML5草案里面其实有原生的字幕标签( Tag)的，但使用的是vtt格式的文件，非常规的字幕（.sub, .srt）或歌词文件（.lrc）。用法如下（代码来自W3School）： 但遗憾的是，使用起来还有不便之处。一是浏览器支持情况不太理想，连强大的FireFox（目前28.0）都还没支持，这你敢信!?。二是格式不兼容现有字幕或歌词文件，至少得需要个转换工具吧。所以在它流行起来之前，考虑另外的实现还是有必要的。效果预览效果预览页面：http://wayou.github.io/selected/如果你网速流畅的话，尽情欣赏我精选的这些歌曲吧（不时更新），只是别忘了star，也可...
阅读全文
摘要：前端一直是一块充满惊喜的土地，不仅是那些富有创造性的页面，还有那些惊赞的效果及不断推出的新技术。像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端。瞬间就有了一统天下的感觉，来往穿梭于前后端之间代码敲得飞起，从此由前端晋升为'前后端'。 图片来自G+ 本文将使用Node.js加web
阅读全文
摘要：简介HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。用法两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。element = document.querySelector('selectors');elementList = document.querySelectorAll('selectors');其中参数select
阅读全文
摘要：继续玩味之前写的音乐频谱作品，将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现，这样就打造出了一个全立体感的频谱效果了。项目详情及源码项目GitHub地址：https://github.com/Wayou/3D_Audio_Spectrum_VIsualizer/tree/master在线演示地址：http://wayou.github.io/3D_Audio_Spectrum_VIsualizer如果你想的话，可以从这里下载示例音乐：http://pan.baidu.com/s/1eQqqSfSNote:可以直接点击'play default' 播
阅读全文
摘要：将之前捣腾的音乐频谱效果加上一个播放列表就成了现在的喵喵播放器（Meow meow Player,额知道这名字很二很装萌~），全HTML5打造的网页程序，可本地运行也可以挂服务器上用。在线Demo及源码你可以访问下面的地址打开在线demo：http://wayou.github.io/MeowmeowPlayer/项目github地址：https://github.com/Wayou/MeowmeowPlayer/示例音乐下载，提供给硬盘里没有Music的同学：http://pan.baidu.com/s/1eQqqSfS欢迎喜欢的朋友前去星(star)我叉(fork)我或者下载代码自己研究。
阅读全文
摘要：话说HTML5的炫酷真的是让我爱不释手，即使在这个提到IE就伤心不完的年代。但话又说回来，追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢？所以当你在看本文并且我们开始讨论HTML5等前沿东西的时候，我们默认是把IE排除在外的。本文的例子可以工作在最新的Chrome及Firefox浏
阅读全文
摘要：HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了:你可以用CSS3的animattion+keyframes;你也可以用css3的transition;你还可以用通过在canvas上作图来实现动画，也可以借助jQuery动画相关的API方便地实现;当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画，前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。现在又多了一种实现动画的方案，那就是还在草案当中的window.requestAnimationFrame()方法。初识re
阅读全文
摘要：他们都接受相同的参数，见页面表格。唯一不同的实现方式与效果方面有差异。其中fillRect()与strokeRect() 在调用后会立即在画布上画面效果，而rect()不会立即将图形画出，只有在调用了stroke()方法之后，才会实际作用于画布。fillRect()从字面上很好理解fillRect()与其他两个的区别，它是执行填充操作。填充一个矩形区域。下面是来自W3SHOOL中文站点对它的具体参数及API的详解：定义和用法fillRect() 方法绘制"已填色"的矩形。默认的填充颜色是黑色。参数描述x矩形左上角的 x 坐标y矩形左上角的 y 坐标width矩形的宽度，以像
阅读全文
摘要：关于提交表单的一些经验和总结，都是些页面布局上的简单玩意儿，但对于我来说，我觉得深入去研究还是有很多有用的东西。
在制作表单时，我们经常会遇到需要对表单内容进行验证，数据非法时不允许用户提交。最小用户假设让用户只输入我们想要的东西，而不是我们被动地去验证。
阅读全文