H5 web开发
文章平均质量分 79
Joshua__Peng
运筹帷幄世界在我手中
展开
-
HTML5 Web Worker的使用
Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。 1.如何使用WorkerWeb Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交原创 2016-01-19 11:14:36 · 512 阅读 · 0 评论 -
js实现继承的5种方式
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现方式可以实现多继承)实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值function Parent(firstname){原创 2016-01-11 16:38:01 · 1437 阅读 · 0 评论 -
JS正则表达式验证账号、手机号、电话和邮箱
1.验证帐号是否合法验证规则:字母、数字、下划线组成,字母开头,4-16位。function checkuser(str){ var re=/^[a-zA-Z]\w{3,15}$/; if(re.test(str)){ console.log("账号合法"); } else{ console.log("账号不合法"); }}2.验证手机号码验证规则:11位数字,以原创 2016-01-11 17:11:05 · 8027 阅读 · 0 评论 -
JS正则表达式使用详细分析
正则表达式可以: •测试字符串的某个模式。例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证 •替换文本。可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字 •根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字 正则表达式语法 一个正则表达式就是由原创 2016-01-11 17:26:31 · 561 阅读 · 0 评论 -
JS图片轮播切换效果实现
效果演示地址:http://6689.one/WebEffects/pictureplay.html实现代码如下:JS图片自动和可控的轮播切换特效 - 彭峻华joshuaQfast.add('widgets', { path: "http://hovertree.com/texiao/js/1/js/terminator2.2.min.js", type: "js", re原创 2016-01-12 10:08:05 · 4327 阅读 · 0 评论 -
H5移动web页面触摸按钮效果实现-模拟按钮hover效果实现
移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活css的active效果,代码如下: .btn{ display: block; position: relative; top: 100px; margin: 20px原创 2016-02-14 16:52:18 · 33731 阅读 · 0 评论 -
css3实现两端对齐
box-pack是css3的新属性,依赖于display:box(旧版弹性布局),受box-orient影响,box-pack决定了子标签水平对齐的方式,可选值有start | end | center | justify。使用box-pack:justify来实现两端对齐非常简单,代码量也少。 实现代码如下: *{ margin: 0;原创 2016-02-14 17:22:01 · 14883 阅读 · 0 评论 -
js进度条控件实现
首先定义一个div内嵌一个span: 10% 然后使用css完成进度条的样式: div#loadbar{ width:300px; background-color: silver; border:1px solid salmon; text-align: center; border-radius:8px ; } #b原创 2016-02-15 15:05:12 · 9037 阅读 · 0 评论 -
css实现柱状图
柱状图在web上经常用到,这里使用css实现,首先定义节点: 统计数据 30 40 20 40 为柱状图使用了两个基本元素:div用于柱状图的整体显示以及北京,ul用于柱状图的数据,其中每一个柱列都是一个li对象,为了是每列以不同颜色区分,分别给每个li定义不同的class;然后使用css定义样式:#vert{原创 2016-02-15 16:13:24 · 9462 阅读 · 1 评论 -
JS创建对象的几种方式
第一种模式:工厂方式var lev=function(){ return "啊打"; }; function Parent(){ var Child = new Object(); Child.name="李小龙"; Child.age="30"; Child.lev=lev; re原创 2016-01-11 16:32:57 · 1985 阅读 · 1 评论 -
javascript类型系统之String
前面的话 string是由单引号或双引号括起来的字符序列,且被限定在同种引号之间,即必须是成对单引号或双引号。字符串的独特在于它是唯一没有固定大小的原始类型 字符串中每个字符都有特定的位置,首字符从位置0开始,第二个字符在位置1,依次类推,这意味着字符串中的最后一个字符的位置一定是字符串的长度减1特点 javascript中的字符串是不可变的。原创 2016-01-09 20:23:30 · 564 阅读 · 0 评论 -
javascript类型系统之Array
前面的话 数组是一组按序排列的值,相对地,对象的属性名称是无序的。从本质上讲,数组使用数字作为查找键,而对象拥有用户自定义的属性名。javascript没有真正的关联数组,但对象可用于实现关联的功能 Array()仅仅是一种特殊类型的Object(),也就是说,Array()实例基本上是拥有一些额外功能的Object()实例。数组可以保存任何类型的值,这些值可以随时更新或删除,原创 2016-01-09 20:11:02 · 486 阅读 · 0 评论 -
HTML5 XMLHttpRequest使用
XMLHttpRequest是Ajax的核心,通过调用XMLHttpRequest对象的属性和方法可以实现在客户端和浏览器之间进行数据的异步传输,从而实现页面的无刷新效果。XMLHttpRequest对象的常用属性: onreadystatechange:指定当readyState属性值改变时的事件处理句柄(只写); readyState:返回当前请求的状态(原创 2016-01-19 11:51:36 · 1821 阅读 · 0 评论 -
CSS3的过渡效果(transition)与动画(animation)
H5 web开发原创 2016-01-09 19:14:39 · 6752 阅读 · 0 评论 -
CSS3 盒子模型(box Model)和边框(border)
1 CSS盒子模型首先来复习下CSS的box Model,box Model 是CSS+DIV布局的灵魂所在,下面这张图足以说明一切:元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。在CSS3中增加了盒子阴影(box-shadow)。1原创 2016-01-09 19:30:42 · 4112 阅读 · 0 评论 -
CSS3 文本特效
1 文本特效CSS3给文字加了很多特效,http://www.w3schools.com/css3/css3_text_effects.asp在这里我将介绍:text-shadow、word-wrap、word-break和text-overflow。1.1 text-shadow文字阴影目前IE还不支持,而其它浏览器都已经支持了。语法:text-shado原创 2016-01-09 19:38:59 · 775 阅读 · 0 评论 -
CSS3 颜色(Color)和背景(Backgroud)
1. 颜色 和 透明度在CSS3中对颜色进行了很多扩展,具体详情可参照官网:www.w3.org/TR/2003/CR-css3-color-20030514,下面说下CSS3中新的数字定义颜色的方法。1.1 RGBA相信大家以前定义颜色经常使用RGB,RGB色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)原创 2016-01-09 19:36:44 · 4059 阅读 · 1 评论 -
CSS3 2D和3D转换(transform)
Transform 适应于对任一DOM元素的2D或3D转换,这些转换效果有:旋转(rotate)、拉伸(scale)、平移(move)、倾斜(skew)等,利用Transform和javascript可以制作一些简单的动画,可以为web应用带来些意想不到的效果。目前浏览器并不是完全支持所有的Transform ,IE9、Firefox 和Opera 仅支持2D transforms ,相应原创 2016-01-09 19:49:20 · 653 阅读 · 0 评论 -
JS特效文字逐个显示
使用Jqeury,Jqeury本向就解决浏览器兼容性问题,让开发关注于相关JS逻辑的实现.以下是使用Jquery后改进的代码: var it = 0; var mytext; function initialize() { mytext = $("#typing").text(); var myheight = $("#typing").原创 2016-01-09 19:55:19 · 3247 阅读 · 0 评论 -
HTML5表单及其验证
HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用。HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架,先说下表单的几个基本知识点:表单仍是以元素作为容器,我们可在其中设置基本的提交特性;当用户提交页面时,表单仍然向服务器发送表单控件的值;之前老版本中的表单控件,如text原创 2016-01-09 20:03:21 · 615 阅读 · 0 评论 -
js实现换肤
首先准备HTML页面如下: 无人驾驶要征服世界,得先解决这些问题 一、触手可及的伟大野心 除了统治世界,无人驾驶大概可以和历史上所有野心匹敌。万亿美金的全球汽车市场也只是无人驾驶的第一个目标,反向控制用户以汽车为中心的一系列生活和工作才是无人驾驶汽车的长远目标。 想象一下,把无人驾驶汽车作为超级终端连接用户在驾原创 2016-02-16 11:01:51 · 6462 阅读 · 2 评论