HoggiChen-CSDN博客

转载网页HTML5--飞机大战小游戏开发--canvas的应用

一，概述此小项目，是用来练习HTML5的canvas的编程运用。在这个项目中，我们需要创建一个可运行的网页小游戏，开发此小游戏并不难，大概如下图所示：在整个游戏的运行中，总共要分为5个状态（state）去实现，分别是首页（START），加载中（STARTING），游戏中（RUNNING），暂停（PAUSE）和游戏结束（GAME_OVER），运用一个计时器在网页的canvas

2017-08-13 15:53:15 7801 4

原创 H5新增标签

H5新增标签： article: 标签定义外部的内容。 aside:标签定义 article 以外的内容。a audio:h5新增音频标签。没有高宽属性。 canvas:h5新增画布标签。 command: 定义命令按钮(未测试) datalist：标签定义选项列表。 datalist 及其选项不会被想显示出来，它仅仅是合法的输入值列表。 details：标签用于描述文档或文档某个部

2017-09-28 19:58:01 464

转载 XML

XMLXML主要用于描述数据 HTML主要用于显示数据XML解析： XML解析器：将XML文档或文档转换成XML DOM对象。解析XML文档：主要通过XMLHttpRequest对象完成，responseXML属性可将文档直接转换成XML DOM。先创建xhr，然后xhr.open(“get”,”XML文档路径”，true);方法XMLDom.getElementById("id");XM

2017-08-28 19:58:18 437

转载 AJAX

AJAXAJAX：Asynchronous JavaScript and XML 异步的JavaScript和XML 同步：一步步完成事异步：同时完成几件事 AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发请求。服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容。核心：异步的JavaScript对象XM

2017-08-28 17:15:26 394

转载 jQuery

jQueryjQuery 2.0版本后不兼容IE6，7，8浏览器 jQuery核心理念：write less，do more. jQuery编程步骤：引入jQuery的js文件使用选择器定位要操作的节点调用jQuery的方法进行操作jQuery对象：为了解决浏览器的兼容问题而提供的一种统一封装后的对象描述 jQuery方法大部分都是返回jQuery对象，所有可以连缀调用。DOM对象—

2017-08-26 20:27:33 451

转载 web储存

web储存cookie：缺点：大小有限（取决于浏览器），个数有限，每个cookie所储存的数据长度固定。session：临时性保存数据到服务器中，（临时性：浏览器关闭后，数据就会消失；服务器：将数据保存在服务器上）localStorage：本地储存。特点：长时间保存用户数据。sessionStorage：特点：针对浏览器窗口有效，如果浏览器窗口被关闭，sessionStorage中的所有的数

2017-08-26 16:27:30 492

转载 HTML5 canvas

canvascanvas：新标签，实现绘图 getContext()：获得canvas的画板，所有绘图操作通过画板，可以在括号中加两个值，2d或3d绘制矩形方法（生成基础形状方法）：fill(x,y,eidth,height); 填充矩形strokeRect(x,y,eidth,height); 非填充矩形clearRect(x,y,width,height); 透明颜色矩形（

2017-08-24 21:30:49 380

转载 HTML5多媒体

视频处理video元素：<video id="media" width="300" controls> <source src="xxx.mp4"/> <source src="xxx.ogg"/></vodeo>controls属性：视频控件按钮<video id="media" controls> <source src="video/video001.mp4"/><

2017-08-24 20:22:32 794

转载 HTML5

1.回顾1.1 form ：表单（提交数据）属性： - method：提交方式，常用get，post - action：提交地址 - enctype：编码方式1.2 表单元素（1）inputtext：文本password：密码radio：单选框checkbox：复选框file：上传文件submit：提交按钮button：普通按钮reset：重

2017-08-24 18:04:36 370

转载补充2

补充21.常用事件———重点鼠标事件： - onclick———单击 - ondbclick——双击 - onmousedown———按下 - onmouseover———-鼠标悬停 - onmouseup————鼠标松开 - onmouseout———–移出鼠标 - onmousemove———鼠标移动 - onkeydown————按下 - onkeyup————–松开

2017-08-21 21:54:13 340

转载 BOM

BOM模型：通过BOM对象，JavaScript程序可以与当前的浏览器窗口进行交互。BOM对象的根对象：window 该类型的对象指当前浏览器窗口是一个全局对象，其中所有的属性可以直接使用，即：Window.screen / screen / Window.window.screen / window.screen （以上四种写法的含义是一样的。）同理：Window.al

2017-08-08 21:33:22 307

转载 DOM

DOM树：（1）DOM元素树：以document对象为根，每个HTML标签都是元素树的一个节点。（2）DOM节点树：以document对象为根，每个标签，文本，属性，注释等都是节点树上的一个节点。Node对象的几个属性：（1）parentNode：Node类型，当前节点的那个唯一的直接父节点对象（2）childNodes：NodeList类型，当前节点的所有子节点，组成

2017-08-01 20:33:44 340

转载 DHTML

DHTML对象模型：DHTML对象：（1）BOM（Browser Object Model浏览器对象模型）：window，history，navigator，document，location，screen，event。用于JavaScript脚本与浏览器进行交互。（2）DOM（Document Object Model文档对象模型）：

2017-08-01 20:27:05 307

转载补充

1.ECMAScript5中属性的分类：（1）数据属性（Data Property）（2）访问器属性（accessor property）如：var square2={ width:10;//数据属性 get perimeter(){//访问器属性 console.log('.........'); return this.width

2017-07-31 19:54:43 363

转载 Math Date Number 错误处理 Function arguments 匿名函数

Math类型：封装了与数学计算有关的API，不能new！不能实例化。Math.round(num)----------------四舍五入取整Math.ceil(num)-------------------向上取整Math.floor(num)------------------向下取整var n=22.16;Math.round(n)--------------

2017-07-27 22:26:14 402

转载字符串

内置对象：ECMAScript标准中已经定义好的，由浏览器厂商已经实现的标准对象。内置对象封装了常用的API和专门的数据。内置对象列表：String，Boolean，Number，Array，Date，Math，Error，Function，Object，Global******规律：所有字符串API，都需要变量接收返回值！********字符串的字符个数：str.leng

2017-07-27 15:57:31 352

转载正则表达式

正则表达式：字符串中字符出现的规律（验证字符串格式，查找关键字，替换关键字）比如：银行卡查询密码：6位数字；用户名：字母，数字，_ 的组合正则表达式：选择符号：[所有备选字符] （一个[ ]，只能代表1位字符的选择规则）[^XXXX]：表示除了xxxx都行，必须放在第一个位置，否则，变为普通字符匹配。- 符号：备选字符的连续范围。如：[0-9]，[a-z]，[

2017-07-24 22:02:44 313

转载数组

valueOf()：返回数组的原始字符串表示。toString()：把数组转化为字符串，并返回结果。toLocateString()：返回数组中每个元素的本地化表达形式。join([seperator])：返回一个字符串，由每个元素转换而成的字符串使用指定的seperator拼接而成。concat()：拼接两个或多个数组，并返回结果。slice(start,[end])：获取子

2017-07-21 22:24:23 314

转载 JavaScript_2

使用变量出错的情况：没声明的变量，只要使用就出错。var name;console.log(Name);//Name没有声明console.log(name);//undefinedjs中一切赋值都是值传递。全局函数：ECMAScript 定义了标准，由浏览器厂商已经实现的函数。isNaN(x), parseInt/Float(x)encodeURI：将URL中的非

2017-07-21 22:06:40 302

转载 ECMAScript

ECMAScript核心语法*区分大小写**字符串必须用引号（单双都行）包裹**每条语句结尾都建议有分号*注释也占用网页流量！！生产环境必须去掉！HTML注释：CSS注释：/**/JS注释：// 单行注释 /*多行注释*/声明变量：var 变量名;注意： var a , b=100; // 赋值时

2017-07-19 21:10:09 269

转载 JavaScript

前端三大基础知识：HTML：专门编写网页内容CSS：专门设计网页样式JavaScript：专门设计网页交互的语言交互：输入数据，程序处理数据，返回结果什么是JavaScript：1.专门设计网页交互的语言2.CSS运行在JavaScript解释器中3.“解释”执行——像读书一样4.互联网第一大语言ECMAScript标准：JavaScript

2017-07-17 18:55:18 282

原创 web前段day1

1.元素布局陷阱：(1).内联元素在父元素中想要点竖直方向上的空白，只能使用line-height。只能使用line-height才能获得竖直方向上的空间(2).区块元素在父元素中想要竖直方向上的空白，可以在父元素/子元素中声明padding，但不能在子元素中声明margin！原因：若父元素再竖直方向上没有指定padding和border，其中的第一个区

2017-07-12 14:58:16 282

HoggiChen的博客