0

Firebug使用相关

Posted by Alan on August 17, 2014 in HTML5&CSS3, 电商经验 |

Firebug是网页浏览器Firefox下的一款开发类插件,集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。在日常使用中常会同时安装其扩展Yslow来一并对网站进行调试。同时为了兼容其它浏览器,还开发有Firebug Lite,功能略弱于Firebug。 安装完后要开启Firebug,可点击浏览器工具栏中的图标,也可按下F12开启,关闭方法与开启方法相同,另外按下Ctrl+F12将会在弹出的窗口中开启Firebug的调试窗口。调试窗口中主要包含控制台标签、HTML标签、CSS标签、脚本标签、DOM标签、网络标签和Cookies标签,可通过点击调试窗口左上角的,然后在可见面板中勾选或取消勾选来显示或隐藏相应的标签,调试窗口右上侧还有搜索窗口,能过搜索方便找到所需查看的内容。 控制台标签为JS命令行操作,显示JS错误信息、提示信息和日志信息,可在右侧窗口键入代码; HTML标签显示页面的所有HTML源代码,可能过直接修改代码的方式查看修改后的结果, 只需要所需修改代码上双击或右击在弹出窗口中选择”编辑HTML…”即可进行编辑,而要定位到页面上相应元素的代码,可通过在相应页面元素上右击选择“使用Firebug查看元素”,也可点击小甲虫右侧的图标即“点击查看页面中的元素”图标(快捷键Ctrl+Shift+C)然后直接点击需查看的元素来定位到相对应的代码; CSS标签下可编辑页面的CSS源代码,如同对HTML的修改一样,可通过双击来对样式来进行修改,对于字体大小等数值还可以通过方向键↑和↓来进行更改,这种修改每次会调整1个单位,而按下Ctrl键加方向键每次调整0.1个单位,按下Shift键加方向键每次调整10个单位; 脚本标签中显示页面的脚本,也可在该标签对脚本进行调试; DOM标签显示所有的页面对象和DOM属性; 网络标签显示页面各元素的下载情况和所花费的时间,以及HTTP请求和头信息; Cookies标签显示页面请求的Cookies,可对页面中的cookie进行查看和修改。 JavaScript控制台 Firebug的控制台可以很方便地对JavaScript代码进行调试,控制台内置了很多命令方便对JS进行调试,如console.log()命令可以打印出日志,以下代码可以输出日志结果2014年8月31日 console.log(“%d年%d月%d日”,2014,8,31); 其中的%d称为占位符,代表数字,此外浮点数的占位符为%f,字符串占位符为%s,对象的占位符为%o,输出的内容也可以为变量,如console.log(i),除日志输出外还有信息输出console.info(),debug输出console.debug(),警告输出console.warn(),错误输出console.error()。对输出的内容可进行分组,使用console.group()命令: console.group(“group1”); console.log(“101”); console.log(“102”); console.log(“103”); console.groupEnd(); console.group(“group2”); console.log(“201”); console.log(“202”); console.log(“203”); console.groupEnd(); 控制台中还有用于调试JS代码运行速度的命令console.time(),使用示例如下: console.time(“test”); for(var i=1; i<10000; i++){ } console.timeEnd(“test”); 控制台还包含其它命令,可通过console.dir(console)来查看console对象的所有命令和方法,这些命令可以写在文件中,也可以在控制台右侧的多行调试框中输入并点击运行来进行查看

Tags: , , ,

0

JavaScript String对象的方法

Posted by Alan on July 20, 2014 in Coding |

String对象的方法和属性,字符串变量同样也可以使用。 方法 描述 anchor() 创建 HTML 锚。 big() 用大号字体显示字符串。 blink() 显示闪动字符串。 bold() 使用粗体显示字符串。 charAt() 返回在指定位置的字符。 charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 concat() 连接字符串。 fixed() 以打字机文本显示字符串。 fontcolor() 使用指定的颜色来显示字符串。 fontsize() 使用指定的尺寸来显示字符串。 fromCharCode() 从字符编码创建一个字符串。 indexOf() 检索字符串。 italics() 使用斜体显示字符串。 lastIndexOf() 从后向前搜索字符串。 link() 将字符串显示为链接。 localeCompare() 用本地特定的顺序来比较两个字符串。 match() 找到一个或多个正则表达式的匹配。 replace() 替换与正则表达式匹配的子串。 search() 检索与正则表达式相匹配的值。 slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。 small() 使用小字号来显示字符串。 split() 把字符串分割为字符串数组。 strike() 使用删除线来显示字符串。 sub() 把字符串显示为下标。 […]

Tags: , , ,

0

JavaScript event.keyCode大全

Posted by Alan on July 19, 2014 in Coding |

JavaScript event.keyCode大全 keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift_L keycode 17 = Control_L keycode 18 = Alt_L keycode 19 = Pause keycode 20 = Caps_Lock keycode 27 = Escape Escape keycode 32 = space space keycode 33 = Prior keycode […]

Tags: ,

0

HTML5绘制桌球

Posted by Alan on May 25, 2014 in HTML5&CSS3 |

桌球(又称台球 ,撞球)源自英国,是一项在国际上广泛流行的高雅的室内体育运动,是一种用球杆在台上击球,依靠计算得分确定比赛胜负的室内娱乐体育项目。 下图为通过HTML5的Canvas配合JS生成的仿桌球图片,右侧的小球采用随机函数显示不同颜色,每次刷新后将显示不同的组合颜色。 Your browser does not support the canvas element.

Tags: , , ,

0

HTML5绘制奥运五环

Posted by Alan on May 25, 2014 in HTML5&CSS3 |

奥运五环是奥运会的标志,由Pierre de Coubertin顾拜旦先生于1913年所构思设计的,下面通过HTML5的canvas加js来绘制五环标志。部分代码如下: 创建Canvas:

通过javascript设置画布环境并绘制圆形:

由于IE9以前的版本及其它浏览器早期的版本对canvas不支持,所以将无法正常显示,图形效果如下: Your browser does not support the canvas element.

Tags: , , ,

0

Html and JavaScript Mumbo Jumbo Part 1

Posted by Alan on January 7, 2014 in 个人随笔 |

I want to start a journey of getting to know those jargons with you,  fancy words like HTML, CSS, Javascript, JQuery, AJAX, PHP, MySQL aren‘t really as straightforward as they sounded to be. As a member from the sales team, you shouldn’t be expecting to become an expect on any of these subjects, after all, this is just […]

Tags: ,

Copyright © 2012-2018 记录点滴生活 | Alan Hou的个人博客 All rights reserved.