html5

《每周一点canvas动画》—— 文字粒子

代码文件每周一点canvas动画系列文章目前已经更新了12篇,今天给大家发个福利。我们使用canvas来制作一个小的效果。这个小效果是我从codePen上看到的,我对其做了些修改增强,添加了一些新的功能。UI界面就如下图中看到的样子。我们要实现的效果就如我在图中操作的那样,在输入框中输入文字(不管中文,还是英文,还是各种表情也好)都可以在canvas画布中通过众多的粒子组成

【分享】WeX5的正确打开方式(6)——数据组件初探

本文是【WeX5的正确打开方式】系列的第6篇文章,简单介绍一下WeX5中数据组件的特性和结构形式。数据组件的由来上一篇 WeX5绑定机制我们实现了一个简单的记账本应用,当时所有数据都用 JSON 对象写在 js 代码里面,然后通过绑定机制将数据和UI界面绑定起来。我们是这样写的: 1 var testData = [ { 2 fType : 'out', 3

PHP开发中涉及到emoji表情的几种处理方法

最近几个月做微信开发比较多,存储微信昵称必不可少可这万恶的微信支持emoji表情做昵称,这就有点蛋疼了一般Mysql表设计时,都是用UTF8字符集的。把带有emoji的昵称字段往里面insert一下就没了,整个字段变成了空字符串。这是怎么回事呢?原来是因为Mysql的utf8字符集是3字节的,而emoji是4字节,这样整个昵称就无法存储了。这要怎么办呢?我来介绍几种方法1、

实践 HTML5 的 CSS3 Media Queries

先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3 加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。 那么该怎么定义 media 呢,看下面的代码,你肯定能猜出个大概。@media (max-width: 6

《每周一点canvas动画》——碰撞检测(2)

每周一点canvas动画代码文件如果你的画布上只有两个物体,那么他们之间的碰撞检测很容易就能实现。但是,当物体越来越多,你就需要一些必要的策略去检测物体之间的碰撞,不能漏掉任何的可能性,同时还要考虑性能问题,避免重复检测。上一节我们介绍了物体间的碰撞检测方法。在这一节我们主要介绍:多物体碰撞检测策略高级碰撞检测方法总结1. 多物体碰撞检测策略现在我们来简单分析一下多个物体之

Angular directive 实例详解

准备代码,会在实例中用到var app = angular.module('app', []);angular指令定义大致如下app.directive('directiveName', function() {return {// config}})其中return返回的配置对象包含很多参数,如下一一说明。1. restrict值为字符串,可选参数,指明指令在DOM中以什

数组reduce方法的高级技巧

因为用for循环被老大鄙视之后,这几天都在偷偷摸摸的研究数组的那几个迭代方法。使用下来,感觉确实妙用无穷,仿佛自己的逼格在无形中变得高大了一点点,哈哈,上一篇文章的简单介绍确实有点糙,因此决定重新一些总结文章。这篇文章就是专门总结reduce方法的,这个方法大有可研究的地方,值得大家get它并去同手实践一下。上一篇文章我认为reduce是一个聚合或者减少方法,它可以将数组中

[分享] 纯CSS完美实现垂直水平居中的6种方式

前言由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多,但是都不太完整,所以小茄今天就来总结下纯CSS实现居中的各种方案。学疏才浅,文中如有不当之处,万望指出!6种方案1、绝对定位+margin:auto .wrp { backgr

HTIML5 真的打败了Flash?新测试结果出人意料

【编者按】本文最早发布于 2010 年,通过 Flash 与 HTML5 在 Mac 及 Windows 平台不同浏览器中的测试表现,比较两者的性能并分析背后的原因。虽然是一篇老文,但其客观冷静的分析态度,仍旧值得我们学习。文章系国内 ITOM 管理平台 OneAPM 编译呈现。总部位于库比蒂诺的苹果公司在即将推出iPad之际,对Adobe Flash技术保持的回避态度已经

标准 4 位验证码的实现

在上代码之前,我们先看一下验证码的最终效果图: 话不多说,我们看看是怎样实现的。这个验证码的实现需要建两个PHP文件,一个index.php(展示),另一个vcode.php(验证码加工)。 先看index.php: 验证码://生成一个四位数var num1 = Math.round(Math.random()*10000000+10000);var num = num1