分步骤的登录注册表单现在也比较多，主要是能提高用户体验，用户可以有选择性的填写相应的表单信息，不至于让用户看到一堆表单望而却步。今天和大家分享的就是一款基于HTML5和CSS3的分步骤注册登录表单，外观不用说，非常漂亮。你看一下DEMO就知道了。接下来我们要来一起看看实现的过程是怎样的。代码有点复杂，主要由HTML代码、CSS3代码以及Javascript代码组成。HTML代码：<form id="msform"><!-- progressbar --><ul id="progres...
1.前言 最近实在是太忙了，从国庆之后的辞职，在慢慢的找工作，到今天在现在的这家公司上班大半个月了，太多的心酸泪无以言表，面试过程中，见到的坑货公司是一家又一家，好几家公司自己都只是上一天班就走了，其中有第一天上班就加班到10点的，有一家公司在体育西路那边，太远，第一天回家挤公交也是太累，以前上班都是走路上班的，自己确实不适合挤公交，还有的公司面试的时候和你说什么大数据，性能优化什么的，进公司一看...
功能描述： 该游戏实质上是坦克大战+推箱子。玩家控制坦克，在与敌人战斗的同时把物资顺利运送到目的地则可顺利过关，共三个关卡。游戏说明：上下左右方向键控制移动，空格键发射炮弹，推动所有物资箱子（）到目的地（），则可过关。 代码分析： 由于该游戏分了几个关卡，所以这里首先来看看关卡管理器是如果管理各个关卡的：/* 关卡管理器 */ var LevelManager=(function(){var optionsObj={};//所有关卡参数对象retu...
现在我看了html5以及canvas相关知识和斗地主的demo后，自己用demo上的素材试着写了个斗地主，代码没重构好，欢迎赐教。 话不多说，下面就一步一步解释下吧 只有一个common.js文件1、资源类var Resource = Class.create(); $.extend(Resource.prototype, {initialize: function () { },Images: [{ path: img/bg1.png, x: 0, y: 0, w: 800, h: 480, data: null, type: 61, visible: true },{ path: img/BeiMian.jp...
未来使用H5的场景会越来越多，这是令web开发者欢欣鼓舞的事情。然而有一个现实我们不得不看清，那就是IE系列浏览器还占有一大部分市场份额，以IE8、9为主，windows8.1的用户已经用上了IE10/11，而考虑我国的国情，IE6、7依然存留不少。在我们放手用HTML5开发的时候，新特性支持度检测就是必不可少的了。一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本，不过这种方式不是很可靠，浏览器对于一些新特性也...
用canvas绘制了一个钟表，废话不多说了，直接上代码吧。效果图如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas钟表</title> <meta name="Keywords" content=""> <meta name="author" content="@my_programmer"> <style type="text/css"> body{margin:0;} </style> </head> <body onload="run()"> <canvas id="canvas" width=400 height=400 style="border: 1px #ccc solid;">如果你看到这段文字，说明你...
大风起兮云飞扬，安得猛士兮走四方!html5+css3，不学不行。 做web开发已经有好几年了，见证了太多语言的崛起和陨落。 其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语言(这首当其冲的就是.net程序员，当然很不幸，我就是.net成员，这刚把mvc 4.0整明白现在5.0又出来了。) 当然，抱怨解决不了任何问题，抱怨也无法让你的钱包鼓起来。so, 程序猿们，继续学习吧。 html5+css3时代， 简称3+5时代(3+5...
最近项目刚好用到这种效果，也就是有点像刮刮卡一样，在移动设备上，把某张图片刮掉显示出另一张图片。效果图如下： DEMO请戳右：DEMO 这种在网上还是挺常见的，本来就想直接网上找个demo套用下他的方法就行了，套用了才发现，在android上卡出翔了，因为客户要求，在android不要求特别流畅，至少要能玩，但是网上找的那个demo实在太卡，根本就是没法玩的情况。于是就想自己写一个算了，本文也就权当记录一下研究过程。 这...
在Web开发的时候经常会遇到浏览器不响应事件进入假死状态，甚至弹出“脚本运行时间过长“的提示框，如果出现这种情况说明你的脚本已经失控了。 一个浏览器至少存在三个线程：js引擎线程(处理js)、GUI渲染线程(渲染页面)、浏览器事件触发线程(控制交互)。 1：JavaScript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来然后加以处理，浏览器无论再什么时候都只有一个JS线程在运行JS程序。 2：GU...
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 最近都在学习HTML5，做canvas游戏之类的，发现HTML5中除了canvas这个强大的工具外，还有WebSocket也很值得注意。可以用来做双屏互动游戏，何为双屏互动游戏？就是通过移动端设备来控制PC端网页游戏。这样的话就要用到实时通讯了，而WebSocket无疑是最合适的。WebSocket相较于HTTP来说，有很多的优点，主要表现在WebSocket只建立一个TCP连接，可以主动推送数据到客户端...
Canvas是HTML5中非常重要而且有用的东西，我们可以在Canvas上绘制任意的元素，就像你制作Flash一样。今天我们就在Canvas上来制作一款火焰发射的效果。就像古代的火球炮一样，而且可以在浏览器边缘反弹，感觉会比较屌。来看看效果图：我们可以在这里查看火焰球的DEMO演示当然，我们要来分析一下源代码，主要是一些JS代码。首先很简单地在页面上放一个canvas标签，并且给它点简单的样式：<canvas></canvas>canvas{position: absolute...
HTML5, CSS3以及相关技术（例如canvas和web sockets）带来了非常有用的特性，可以让我们的web程序提升一个新的level。这些新技术允许我们只用HTML,CSS和JavaScript就可以构建包括在平板和移动设备上能够运行的多样化表单页面。HTML5虽然提供了很多新特性，但是如果我们不考虑旧版本的浏览器就是用这些新技术也不太现实，老版本浏览器已经使用了很多年，我们依然需要考虑这些版本的兼容性问题。本文要解决的问题就是：在我们使用HTM...
最近公司需要用到web录音的功能讲的都差不多问题1:怎么上传下载来的栗子也比较简单,可以直接运行问题1:怎么上传栗子中最后返回的是Blob数据return new Blob([dataview], { type: type })因为对html5不熟,所以又查了一些数据原来HTML5中使用FormData这个对象好方便var fd = new FormData(); fd.append("audioData", blob);var xhr = new XMLHttpRequest(); xhr.open("POST", url); xhr.send(fd);在C#服务器端 如下代码就可以接收了p...
HTML5的video虽然可用controls来展示控件，并进行控制播放暂停等，但是不同的浏览器显示的效果可能不一样，下面与大家分享下使用Dom来进行自定义的一些操作和控制HTML5的video虽然可用controls来展示控件，并进行控制播放暂停等，但是不同的浏览器显示的效果可能不一样，所以很多时候我们需要使用Dom来进行自定义的一些操作和控制。下面是一个小例子。 当然效果不是很美观，若想好看的可以自己设置css样式等。 <div id="video_div"...
流星雨…… 熟悉HTML5的朋友们应该知道HTML5具有强大的绘图和渲染能力，HTML5配合js的使用比起svg等技术有过之而无不及，而且HTML5图形开发过程也比较简单。 绘制动态的图形算是动画了，当然可以利用Flash实现，但是需要插件支持。下面就简单介绍下HTML5编写动画的过程。 首先：先不讲技术的东西，说说技术与艺术。我觉得在IT领域技术好而缺乏艺术创意，是个好员工，难听点叫代码民工；具有一定艺术创造能力才可能实现技术...