代码改变世界

随笔分类 - JavaScript

【屌丝之作】3D遥控坦克大战

2013-06-03 23:55 by Barret李靖, 8421 阅读, 收藏, 编辑
摘要:昨天参加了hack day的一个比赛,赛制大致是:24小时,自由组队2~4人,任意发挥。运气比较好,拿了第三名和最佳创意奖。建议先看看这个demo,bug是有的,chrome下玩玩,测试测试就行,O(∩_∩)O~ DEMO:http://qianduannotes.sinaapp.com/3dtank/html/index.html基本效果:关于懒得去SAE上折腾,没把那另外一半的功能补上,不过我还是介绍下这几个没补上功能吧。 1. 音效。开始音乐是比较古老的坦克大战开机音乐。 ① 开始音效 点击播放 ② 发子弹 点击播放 ③ 击中坦克点击播放 ④ 爆炸 点击... 阅读全文

删除数组中的某个元素

2013-05-31 23:55 by Barret李靖, 617 阅读, 收藏, 编辑
摘要:在之前的文章中也介绍过类似的东西,主要操作的方式是利用splice这个便利函数。我们要删除,Arr数组中的元素b,具体做法是://第一步是获取b在Arr中的位置var index = Arr.indexOf(b);//第二步就是利用splice删除该元素Arr.splice(b, 1);简单点写就是:Arr.splice(Arr.indexOf(b), 1); //这里的b可以是任意对象注:并非所有浏览器都支持indexOf这个函数,可能你需要自己写一个遍历函数获取到需要查询元素b的索引值。下面是我随便写的一个Array对象的扩展:Array.prototype.index = functio 阅读全文

JavaScript 键盘event.keyCode值列表

2013-05-29 22:23 by Barret李靖, 487 阅读, 收藏, 编辑
摘要:疑问:keypress时的键值与下面列出的不一样,没具体研究!keydown和keyup时正常。网上收集的KeyCode值方便大家查找:常用:function direction(evt){ var evt = evt || window.event; switch(evt.keyCode) { case 37: case 65: return "left"; case 38: case 87: return "up"; case 39: case 68: ... 阅读全文

Javascript综合应用小案例(续)

2013-05-05 00:41 by Barret李靖, 1466 阅读, 收藏, 编辑
摘要:上一篇文章,弄了一个 取词和 标红 功能的小应用,但是存在一些bug,今天修修补补,顺便也把ajax部分补上了~Demo地址::http://qianduannotes.sinaapp.com/getKeyword/代码部分:var GetKeywords = { str: "", limit: 11, keywords:[], url: "./tool.php", //page id getId: function(){ this.id = this._("wp").getAttribute("data-page" 阅读全文

JavaScript垃圾回收机制

2013-04-27 15:14 by Barret李靖, 8121 阅读, 收藏, 编辑
摘要:一、垃圾回收的必要性 下面这段话引自《JavaScript权威指南(第四版)》 由于字符串、对象和数组没有固定大小,所有当他们的大小已知时,才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时,解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存,最终都要释放这些内存以便他们能够被再用,否则,JavaScript的解释器将会消耗完系统中所有可用的内存,造成系统崩溃。 这段话解释了为什么需要系统需要垃圾回收,JS不像C/C++,他有自己的一套垃圾回收机制(Garbage Collection)。JavaScript的解释器可以检测到何时程序不再使用一... 阅读全文

如何向开源社区提问题

2013-04-22 16:24 by Barret李靖, 1298 阅读, 收藏, 编辑
摘要:大家提问题前,请仔细阅读下这篇文章。高质量的提问,不光有助于问题的快速解决,还能赢得社区的尊重。如何向开源社区提问题使用软件产品,或多或少都会遇到问题。对于商业产品,我们可以咨询客服寻求帮助。对于公司自己研发的产品,我们可以直接请教专家同事。但对于开源软件,在遇到问题时,如何才能及时有效地寻求帮助呢?本文以开源类库Sea.js为例,说说我心目中的最佳实践。提问前遇到问题时,心里都很着急。在决定向开源社区提交问题前,最好先做做以下功课:尝试从官方文档中找到答案确保自己阅读过至少一次官方文档。这样在遇到问题时,如果能回忆起只言片语,就可以再去读一遍相关文档,问题往往也就解决了。Google 是你的 阅读全文

JS动态构建一棵目录树

2013-04-22 11:17 by Barret李靖, 3985 阅读, 收藏, 编辑
摘要:在使用frameset布局的时候,经常会用到目录树,我们可以把一棵树写死,但是更多的情况是,这棵树需要随时被改动,所以我们期望的是他能够被动态的构建。MVC,算是了解一点,那本文就把这棵树根据M-V-C给拆开分解吧。点击链接demo→下面就来看看这棵树是怎么构建的。 Module [数据层]var tree = { "id": 0, "a1": { "id": 1, "name": "a1", "children": { ... 阅读全文

利用XMLHttpRequest响应头部的Date来做倒计时

2013-04-13 13:46 by Barret李靖, 3233 阅读, 收藏, 编辑
摘要:关键词:倒计时 XMLHttpRequest readyState Date AJAXProblem [问题描述]先看看这个:(搜狗团购网站)还剩多久多久,这个东西你是怎么做的。不推荐方案脑残方案一: 把截止时间保存到cookie中,然后与现在时间做差值,进行比较。 方案评价: 1. 如果用户cookie没开怎么办? 2. cookie不宜过多,cookie过期管理等麻烦!脑残方案二: 把服务器的本地时间作为参数送到客户端,然后js相关处理 方案评价: 因网络延迟等原因存在误差屌丝看完变高富帅^_^ 先给你看一张图:(向服务器请求的某个任意文件)好像有的同学瞬间就... 阅读全文

JavaScript操控光标,你会么?

2013-04-11 17:15 by Barret李靖, 1183 阅读, 收藏, 编辑
摘要:QQ群里经常有人问怎么设置textarea中光标的位置,所见即所得中如果选中文本。如果你也不会,请往下看:关键词:javascript 光标 位置 鼠标取词 createRange getSelectiongetPosition先上代码,你也可以测试下效果。这是一个Demo~<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>测试</title> <style type="text/css"> </ 阅读全文

摸透select和他的儿子们options

2013-04-11 13:59 by Barret李靖, 933 阅读, 收藏, 编辑
摘要:关键词:select option options selectedIndex remove add关于select的→API,自己去看,不多说了。select & option & optgroupoptgroup就是起到一个分组的作用。<!--common--><select id="s1"> <option value="--s--" selected="selected">----select----</option> <option value=" 阅读全文

打开窗口,关闭窗口

2013-04-10 16:06 by Barret李靖, 1755 阅读, 收藏, 编辑
摘要:关键词:window.open() window.close() showModalDialog() 兼容性 测试等。 本文默认你对以上函数参数有基本了解。window.open window.open如果没有加第三个参数,则浏览器一般都会在新的标签页打开(除非你设置了新建窗口打开) 而有的时候,我们需要他弹出来。就想这个一样: 上述方式是:window.open(/*URL*/"",/*Name*/"",/*args*/"width=300,height=400"); 但是搜狗是不会挺你的话的,他不会新建一个你设定的窗口打开,而是在 阅读全文

JavaScript跨域(3):HTTP access control (CORS)跨域

2013-04-09 11:08 by Barret李靖, 1292 阅读, 收藏, 编辑
摘要:网上看了很多博客和文档,感觉还是Mozilla大大写的最简单、最好懂,不过文字很长。。 原文链接:https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS 要整篇翻译,我肯定吃不消,当然也没这个必要,下面就提要说一点吧,这个方法还存在兼容性问题,尽管有相应的解决手段,但是觉得用起来不是特别爽。Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource... 阅读全文

JavaScript跨域(2):JSONP跨域

2013-04-03 22:02 by Barret李靖, 1231 阅读, 收藏, 编辑
摘要:祭祖归来,继续细说跨域~ 话说上次我们讲到了啥玩意儿是跨域,至于怎么跨域还没开始动笔。今天就说说JSONP跨域。 JSONP(JSON with padding)是JSON的一种“使用模式”,它是非官方协议允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。 P.S: 1.楼主懂一点点php,所以DEMO中的后台语言就用PHP来演示。 2.为了方便测试,楼主弄了SAE和BAE。Prelude [前奏] 如果我们请求一个JSON数据:(SAE地址:http://qiandu... 阅读全文

JavaScript跨域(1):什么是跨域,如何跨域

2013-03-31 19:05 by Barret李靖, 9159 阅读, 收藏, 编辑
摘要:无数次看到:Origin null is not allowed by Access-Control-Allow-Origin, 网络没有让你绝望,但是或许会让你蛋疼,因为你找了半天没看到一个比较实用的解决方案,亦或者水平不够,别人写的东西累赘没看懂,抑或是。。。 网上看到了一篇文章——跨域资源共享的10中方式,已经放在自己的家里了O(∩_∩)O~ 跨域也是平时项目中比较让人头疼的一个玩意儿,上文只是简要地提出了有哪些跨域方式,这里呢,将向大家详细说明,各种使用频率比较高的跨域方式。 什么是跨域:Across-domain solution(CDS) is a means ofinf... 阅读全文

Javascript本地储存(3):离线web应用

2013-03-30 13:03 by Barret李靖, 1400 阅读, 收藏, 编辑
摘要:前两篇文章分别介绍了Cookie应用和另一种本地储存方式,无论是cookie、userData还是localStorage都是一段保存在客户端磁盘的一段文本,他们可以被主动删除,但是本文要讲的“应用程序缓存”是HTML5中新增的一个技术,他允许web应用将应用程序自身本地保存到用户的浏览器中,他是不会随着用户清楚浏览器缓存而被清除的。不像localStorage和sessionS只是保存web应用程序相关的数据,他是将应用程序本身保存起来——应用程序所需运行的所有文件(HTML、CSS、JavaScript、图片等)。——《Javascript权威指南(第六版)》Page-594 “应用... 阅读全文

JavaScript本地储存(2):userData和localStorage

2013-03-28 23:25 by Barret李靖, 2099 阅读, 收藏, 编辑
摘要:上文对cookie的知识进行了归纳,同时也提到了cookie的大小是有限制的。cookie 是有大小限制的,每个 cookie 所存放的数据不能超过4kb,如果 cookie 字符串的长度超过4kb,则该属性将返回空字符串。——上文提要 如果我们需要在客户端储存比较大容量的数据,怎么办?下面给大家介绍userData和localStorage的基本知识和一些应用。先说明下为什么把两个东西扯到一起说,因为后面写了个对象,把UserData和localStorage包装到了一起O(∩_∩)O~Conception [基本概念] 毫无疑问,无论是UserData还是localStorage都... 阅读全文

JavaScript本地储存(1):cookie在前端

2013-03-27 12:13 by Barret李靖, 3671 阅读, 收藏, 编辑
摘要:以前心里总是默念着这句:“知道资源在哪儿就是成功的一半”。对于很多知识的学习,好像也一直停留在知道它在哪儿的地步,看来现在需要有所改变了! 那就从cookie开始吧~ Cookie(复数形态Cookies),中文名称为小型文本文件或小甜饼,指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端(Client Side)上的数据(通常经过加密)。定义于RFC2109(已废弃),最新取代的规范是RFC2965。Clasification [分类] 说到底,cookie就是保存在客户端的一段字符串(注意:不是数组)。 cookie可以手动设置,也可以由服务器产生,当客户端... 阅读全文

在Javascript中模仿接口(一)

2012-09-22 12:27 by Barret李靖, 205 阅读, 收藏, 编辑
摘要:本文从ITeye导入在JavaScript中模仿接口——本文摘自《JavaScript设计模式》一、用注释描述接口/* interface Composite { function add(child); function remove(child); function getChild(index); } interface FormItem { function save(); }*/var CompositeForm = function(id, method, action){ //......};/... 阅读全文

如何设计一个支持方法链式调用的JavaScript库

2012-09-18 09:37 by Barret李靖, 244 阅读, 收藏, 编辑
摘要:本文从ITeye导入可以先了解下javascript链式调用的实现方式//设计一个支持方法链式调用的JavaScript库/* 常见于大多数JavaScript库中的特性 ———————————————————————————————————————————————————————————————————— 特性 | 说明 ———————————————————————————————————————————————————————————————————— 事件 | 添加和删除事... 阅读全文

javascript链式调用的实现方式

2012-09-18 08:58 by Barret李靖, 1621 阅读, 收藏, 编辑
摘要:本文从ITeye导入在我们所用到的库中,可以看到很多诸如$(window).addEvent('load', function(){ $('test').show().setStyle('color', 'red').addEvent('click', function(e){ $(this).setStyle('color', 'yellow'); });});的链式调用,那么这样的链式结构是怎么实现的呢,下面我们利用代码来探讨一番:先分解下,我们队$函数已经很熟悉了,他通常返回一 阅读全文