html5移动开发
文章平均质量分 87
lxq_xsyu
这个作者很懒,什么都没留下…
展开
-
前端开发笔记(5)js基础
js的作用1、网页特效 2、用户交互 3、表单提交 4、控制结构和样式入口函数window.onload = function(){ 内部放js }这个函数的意思就是说,当我们页面加载完毕(页面结构样式节点等加载完)之后,采取执行函数体里面的js部分。所以这句话可以在页面的顶端<script> window.onload = function(){ /*要原创 2017-06-06 08:14:18 · 969 阅读 · 0 评论 -
小强的HTML5移动开发之路(28)—— JavaScript回顾3
一、基本数据类型number:数字类型string:字符串 (注意s小写:string是基本类型)boolean:布尔类型 //前三个都有对应的包装类null:空类型undefined:未定义类型测试一: function f1(){ //number类型 /*有返回值时也不能function void f1(){}*/原创 2014-01-16 23:36:08 · 3922 阅读 · 2 评论 -
小强的HTML5移动开发之路(30)—— JavaScript回顾5
一、查找第一种方式:依据id查找var obj = document.getElementById(id); //document是HTMLDocument的实例 function f1(){ var obj = document.getElementById('a1'); //双引号,单引号都可以 //innerHTML属性:可以访问或者设置节原创 2014-01-17 09:23:23 · 3815 阅读 · 2 评论 -
小强的HTML5移动开发之路(31)—— JavaScript回顾6
HTML DOM模型: w3c dom 模型(规范)出现之前,各个浏览器自己支持的一些dom操作Select对象属性:selectedIndex:表示用户现在选择的那个选项的下标(从0开始)length:获取或者设置选项的长度options:值是一个数组,每个数组元素是option对象,表示下拉列表的所有选项Option对象属原创 2014-01-17 09:39:26 · 3304 阅读 · 0 评论 -
小强的HTML5移动开发之路(32)—— JavaScript回顾7
BOM模型brower object model(浏览器对象模型),通过浏览器内置的一些对象可以操作浏览器本身。DOM是用来操作页面的,BOM是用来操作浏览器本身的。BOM是没有规范的,但是大部分浏览器都支持如下几个对象1、Window对象:表示整个窗口(1)open方法:(名字,特性,高度宽度,工具栏,滚动条)(2)setTimeout方法:setTimeout(fn, 毫秒原创 2014-01-17 13:11:02 · 3785 阅读 · 0 评论 -
小强的HTML5移动开发之路(26)—— JavaScript回顾1
很久没有怎么用过JavaScript了,感觉有点生疏,最近在看关于HTML5移动开发方面的资料,有一种直觉告诉我,JavaScript昨天、今天很重要,明天会更重要。现在好多基于JavaScript的框架给我们的开发带来了很大便利,但是要更好的使用这些工具,我们就必须对JavaScript有一个更高的认识,翻开以前的笔记,开始复习吧。一、JavaScript的作用1、数据验证2、操原创 2014-01-16 04:35:25 · 5514 阅读 · 0 评论 -
小强的HTML5移动开发之路(4)——CSS2和CSS3
在上一篇中我们提到学习HTML5要具备CSS的知识,在页面设计的时候HTML5知识页面的布局与结构,要实现一个很绚丽漂亮的界面就需要借助CSS。下面我们先来回顾一下css2的基本用法,再来看看和css3的关系与区别。1、css是什么?cascading stylesheet(级联样式表),为网页提供表现形式。按照w3c规范,设计一个网页,应该将网页的数据与结构写在html文件里,网页的外观写在cs原创 2013-12-29 13:56:54 · 7668 阅读 · 1 评论 -
小强的HTML5移动开发之路(3)——HTML5与HTML4比较
在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,Canvas对象你的画布,扩展图形标记,HTML5中的地理应用,独立数据存储,新的网络连接。HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同,HTML 5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。(HT原创 2013-12-29 13:07:27 · 10093 阅读 · 4 评论 -
小强的HTML5移动开发之路(48)——(小练习)新闻订阅系统【1】
一、总体设计二、数据库设计 --新闻类别表 create table news_cate( news_cateid int primary key auto_increment, news_iconurl varchar(50), news_catname varchar(5), news_cat原创 2014-04-16 13:46:34 · 5810 阅读 · 3 评论 -
小强的HTML5移动开发之路(45)——汇率计算器【1】
这两天看了《PhoneGap实战》上面有一个汇率计算器的例子,个人觉得比较好,就拿出来和大家分享一下,在接下来的几篇文章中我们来一起完成这个PhoneGap + Jquery mobile的小练习。一、在DrameWeaver中新建站点,如图:二、编写汇率计算页无标题文档原创 2014-04-14 10:43:16 · 6727 阅读 · 4 评论 -
小强的HTML5移动开发之路(41)——jqMobi中Side Menu实现(类似人人网)
记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热,很多app仿照该效果进行开发,在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果。首先新建一个html文件,引入jqMobi的框架,如下:Side Menu 接下来再添加一个panel如下Side Menu原创 2014-02-11 13:21:59 · 7538 阅读 · 7 评论 -
小强的HTML5移动开发之路(37)——jqMobi快速入门
在《小强的HTML5移动开发之路(33)—— jqMobi基础》中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下:拷贝上面的/css目录、/plugins目录、/ui目录、/appframework.js文件,如下图所示。如果需要也可以拷贝index.html,然后自己修改,比如上面我的index01.html和index02原创 2014-01-23 09:36:48 · 12420 阅读 · 2 评论 -
小强的HTML5移动开发之路(40)——jqMobi中实践header定义的几种方式
一、定义全局的header这个header是所有panel默认的header,需要在内部,也就是和同一级的位置添加一个header 标签,并且id必须是header例如: jqMobi Back Single Page App原创 2014-02-11 09:53:59 · 5438 阅读 · 0 评论 -
小强的HTML5移动开发之路(29)—— JavaScript回顾4
一、变量的作用域javascript脚本的执行过程分为两个阶段:第一阶段,js引擎()先扫描整个javascript代码。当碰到时,会先创建一个全局的活动对象,将中出现的变量的声明,函数的定义保存在活动对 象里面。如果碰到函数,则创建对应的局部活动对象,将函数内部的变量的声明及函数的定义保存在该活动对象里面。第二阶段,执行javascript代码,遇到变量,会先从对应的活动对象里面原创 2014-01-17 08:52:28 · 3710 阅读 · 0 评论 -
小强的HTML5移动开发之路(27)—— JavaScript回顾2
Javascript面向对象基础知识1、如何定义一个类,使用如下语法来创建一个类 function Person(name, age){ //习惯上第一个字母大写 //this修饰的变量称为属性 this.name = name; this.age = age; //如果属性值是一个函数,则这个属性就是一个方法 this.play = function(原创 2014-01-16 23:11:40 · 3610 阅读 · 0 评论 -
前端开发笔记(3)css基础(中)
上一篇中我们学习了html的标准文档流,下面我们先来看看如何脱离标准流。脱离标准流css中一共有三种方法脱离标准流浮动绝对定位固定定位浮动我们要搞清楚什么是浮动,先来看一个标准文档流的例子<style type="text/css"> div{ width:100px; height:100px; margin:10px;原创 2016-11-18 21:51:36 · 2138 阅读 · 0 评论 -
前端开发笔记(4)css基础(下)
标签定位相对定位相对定位是用来微调元素位置的,让元素相对于原来的位置进行调整。<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> div{ wid原创 2016-11-24 21:02:05 · 1437 阅读 · 0 评论 -
前端开发笔记(2)css基础(上)
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。原创 2016-11-18 20:08:29 · 2390 阅读 · 0 评论 -
前端开发笔记(1)html基础
HTML介绍HTML是HyperTextMarkupLanguage超文本标记语言的缩写 HTML是标记语意的语言编辑器任何纯文本编辑器都能够编辑html,比如记事本,editplus,notepad++ 比较有名的专门制作网页工具有:DreamWeaver (Adobe公司的产品,过时了,不是一个好的代码编辑器) Sublime (高效率的程序书写工具) WebStorm (更高级的项目原创 2016-11-18 16:58:41 · 2379 阅读 · 0 评论 -
小强的HTML5移动开发之路(24)—— PhoneGap Android开发环境搭建
有关JDK及Android开发环境的搭建请看我前面的博文:http://blog.csdn.net/dawanganban/article/details/9748497原创 2014-01-14 23:59:04 · 6021 阅读 · 1 评论 -
小强的HTML5移动开发之路(42)——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于“章——节——小节”这样的层次结构来进行。在HTML4中的描述方式: 第一章 小强的HTML5移动开发之路 1.1 HTML5概述 1.1.1 HTML5是什么? 1.1.2 HTML5和HTML4的区别 1.2 HTML5快速入门 1.2.1 HTML与XHTML 上面代码,勉强可以看出文档的原创 2014-03-31 17:11:27 · 4836 阅读 · 1 评论 -
小强的HTML5移动开发之路(44)——JqueryMobile中的按钮
一、链接按钮 jQuery Mobile Web 应用程序 链接按钮 二、表单按钮 链接按钮 提交按钮 三、图形按钮 图像按钮1:原创 2014-04-08 18:07:26 · 4797 阅读 · 0 评论 -
小强的HTML5移动开发之路(43)——JqueryMobile页眉、工具栏和标签栏导航
一、页眉1、添加页眉默认的页眉在屏幕的顶部边缘显示,而且在在屏幕滚动时,页眉会滑出屏幕之外,通过添加data-position属性可以创建一个固定的页眉可以使用date-theme属性来调整页眉的主题,默认主题是黑色data-theme="a"原创 2014-04-08 16:22:15 · 5209 阅读 · 1 评论 -
小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递。1、GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析。2、通过HTML5的Web Storage进行参数传递。3、建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参原创 2014-05-06 10:33:45 · 7092 阅读 · 3 评论 -
小强的HTML5移动开发之路(52)——jquerymobile中的触控交互
当使用移动设备进行触控操作时,最常用的就是轻击、按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为。一、轻击与按住直接上代码(一切皆在代码中,细细品吧!)练习<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.原创 2014-05-05 17:22:02 · 6375 阅读 · 0 评论 -
小强的HTML5移动开发之路(51)——jquerymobile中改善页面访问速度
在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿。使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响。在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mobile会对标记data-prefetch的链接原创 2014-05-05 14:53:18 · 6460 阅读 · 0 评论 -
小强的HTML5移动开发之路(50)——jquerymobile页面初始化过程
为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图:图中用红色框圈起来的是界面中的事件,测试代码如下:练习<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;原创 2014-05-05 14:06:12 · 5272 阅读 · 0 评论 -
小强的HTML5移动开发之路(23)—— jQuery Mobile入门
一、下载jQuery Mobile下载地址:http://jquerymobile.com/点击Download下载如下zip包下载成功后如下图解压目录如图:点击index.html进入demo主页,这里面有很多例子。二、创建JQuery Mobile的Helloword1、新建站点2、建立成功的站点原创 2014-01-14 23:58:21 · 5867 阅读 · 1 评论 -
小强的HTML5移动开发之路(33)—— jqMobi基础
一、什么是jqMobijqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架,是个极快速的查询选择库,支持W3C查询。版本jqMobi源码最初在2012年1月份推出,基于MIT/X11许可证,托管在GitHub上,开发者可参与并通过插件不断改进该框架。2012年3月13日,jqMobi 1.0版本正式发布。现在最新的版本是jqMobi 2.0原创 2014-01-17 15:35:27 · 7264 阅读 · 0 评论 -
小强的HTML5移动开发之路(15)——HTML5中的音频
浏览器虽然发展很快,但是浏览器中的标准还是不完善,在HTML4+CSS2+JS的前段开发中让很多程序员头疼的就是浏览器的兼容性问题,音频播放也一样,直到现在,仍然不存在一项网页上播放视频和音频的标准。现在,在大多数浏览器中,音频是通过插件(比如:flash插件)来播放的。然而,不是所有浏览器都具有这样的插件,所以对音频的播放造成了一定的麻烦。在HTML5的新标准中规定了一种通过audio元素来包含原创 2014-01-12 12:58:01 · 4436 阅读 · 3 评论 -
小强的HTML5移动开发之路(10)——在线画板
在这一篇文章中我们用html5来实现一个在线的画板,玩过你画我猜的朋友今天也可以做一个简单的你画我猜小游戏啦,效果如下图所示:过程很简单直接上代码了:大碗干拌的在线画板#php100{ border:1px solid #ccc;} var canvas = document.getElementById('php100'); var p100=canva原创 2014-01-10 21:13:24 · 6803 阅读 · 3 评论 -
小强的HTML5移动开发之路(16)——神奇的拖放功能
在智能手机发展飞速的现在拖放功能已经成为一种时尚,但是在我们的浏览器上是不是还缺少这种方便快捷的功能?在HTML5的新标准中就有关于拖放的标准,作为HTML5标准的一部分,任何元素都可以被拖放。一、浏览器支持情况Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释:在 Safari 5.1.2原创 2014-01-12 13:43:15 · 5072 阅读 · 3 评论 -
小强的HTML5移动开发之路(14)——Video标签详解
在前面的小强的HTML5移动开发之路(5)——制作一个漂亮的视频播放器中制作了一个非常好用的播放器,有的朋友对其中的原理还不是很了解,这一篇文章将在前一篇的基础上深入剖析标签的使用。一、使用技巧在html5中可以使用或者标签播放html5媒体,使用方式如下:[html] view plaincopyprint?video src=原创 2014-01-12 12:12:10 · 8616 阅读 · 0 评论 -
小强的HTML5移动开发之路(13)——HTML5中的全局属性
一、accssskey 快捷键小强的HTML5移动开发之路Android菜鸟的成长笔记注释:请使用 Alt + accessKey 来访问带有快捷键的元素。有兴趣的朋友可以按住Alt + g 和 Alt + w试一下小强的HTML5移动开发之路Android菜鸟的成长笔记注释:请使用 Alt + accessKey 来访问带原创 2014-01-12 11:17:07 · 6059 阅读 · 1 评论 -
小强的HTML5移动开发之路(12)——从一个多媒体标签说起
一、视频播放 多媒体播放 效果如下:原创 2014-01-11 20:27:23 · 6085 阅读 · 9 评论 -
小强的HTML5移动开发之路(2)——HTML5的新特性
一、画布(Canvas)画布是网页中的一块区域,可所以用JavaScript在上面绘图。下面我们来创建一个画布并在上面绘制一个坦克(后面将用HTML5做一个坦克大战游戏),代码如下:html5-坦克大战 //得到画布 var canvas1 = document.getElementById("tankMap"); //定义一个位置变量 var heroX原创 2013-12-27 08:32:44 · 12017 阅读 · 17 评论 -
小强的HTML5移动开发之路(1)——HTML介绍
HTML是HyperText Markup Language(超文本标记语言)的缩写,是构成所有所有网页基本结构的文本及标签组合。一、目前市场上流行的浏览器IE/Chrome/firefox/opera其中Chrome/firefox/opera以及IE 9/10都能很好的兼容html5二、HTML标签html标签都以“"括号结束如常用的属性有:id、cla原创 2013-12-26 21:04:15 · 13121 阅读 · 3 评论 -
小强的HTML5移动开发之路(9)——坦克大战游戏3
上一篇我们创建了敌人的坦克和自己的坦克,接下来就应该让坦克发子弹了,我们下面来看一下如何让我们的坦克发出子弹。前面我们用面向对象的思想对Tank进行了封装,又利用对象冒充实现了我们的坦克和敌人的坦克,仿照这种方式我们是不是也应该封装一个Bullet,答案是肯定的。好吧,那么我们再想想这个Bullet"类“都应该封装什么东西呢?位置应该有吧、子弹飞行的方向应该有吧、飞行的速度也应该有吧、自己飞出原创 2014-01-02 20:29:40 · 4944 阅读 · 2 评论 -
小强的HTML5移动开发之路(8)——坦克大战游戏2
在上一篇文章中我们已经画出了自己的坦克,并且可以控制自己的坦克移动,我们继续接着上一篇来实现我们的坦克大战游戏吧。一、将JS文件分离出来使用OO的思想,我们已经对坦克进行了封装,对画坦克也进行了封装,下面我们将这两个对象提取到外部的js文件中,文件内容如下: //定义一个Hero类(后面还要改进) //x表示坦克的横坐标 //y表示纵坐标 //direct表示方向 functi原创 2014-01-01 10:09:14 · 6553 阅读 · 3 评论 -
小强的HTML5移动开发之路(6)——Canvas图形绘制基础
在前面提到Canvas是HTML5中一个重要特点,canvas功能非常强大,用photoshop可以实现的效果canvas也同样可以实现,下面我们用canvas实现一个坦克大战游戏。一、Canvas标签的使用 可以看到Canvas就像一块画布,我们可以在这个画布上面绘制我们需要的图形。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在原创 2013-12-30 19:28:02 · 6743 阅读 · 5 评论