Veröffentlicht am   |   in   |     |   visitors

planeWars 原生js写的飞机大战游戏 体验游戏

github地址：https://github.com/tccpc/planeWars

前两天整理电脑突然看到以前用原生js写的一个飞机大战游戏，想想当时那个激情啊，写的酣畅淋漓的，现在回头看看略显。额。年轻吧，哈哈！

今天整理了以下给大家分享一下，注册方面因为后台文件太多就不传了（node当时也写了个server不过没写完，现在也没时间写了，大家就玩玩单机乐呵乐呵。），
大家就看看单机效果吧，左边有单机模式按钮，可直接进入。

感觉难度高的话，可以在js里自行修过，下面这张图就是这个难度刚刚玩了下，记得以前貌似能上29W+吧。欢迎大家超越！

http://tccpc.xyz

http://tccpc.xyz

Veröffentlicht am   |   in   |     |   visitors

store-gem.js

本地存储localstorage/sessionstorage的封装,cookie完美解决方案
github地址：https://github.com/tccpc/store-gem.js

安装

bower

1
$ bower install store-gem.js

npm

1
$ npm install store-gem.js

本地存储APIs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var myStore = new store()			//可选参数：sessionStorage和localStorage 默认localStorage
myStore.set(key, data,timeouts);	//单个存储字符串数据 timeouts 为过期时间
myStore.set({key: data, key2: data2},timeouts);	//批量存储多个字符串数据
myStore.get(key);               	//获取key的字符串数据
myStore.get();                  	//获取所有key/data
myStore.get(key1,key2,key3);		//获取对应{key: data, key2: data2,key3:data3}对象
myStore.has(key)					//判断key是否存在
myStore.keys()						//返回所有key的数组
myStore.remove(key)					//删除key/data
myStore.remove(key1，key2)			//删除key1/data1,key2/data2
myStore.clear()						//清空所有key/data
myStore.clearExpires()				//删除缓存中所有超时值
myStore.setTimeout(key,timeouts)	//根据key为已存在的（未超时的）缓存值以当前时间为基准设置新的超时时间。
myStore.add(key, data, timeouts)	//根据key做插入操作，如果key对应的值不存在或者已超时则插入该值，反之什么都不做。
myStore.replace(key,data,timeouts)	//根据key做插入操作，如果key对应的值存在并且未超时则插入该值，反之什么都不做
myStore.each(callback);         	//循环遍历，返回false结束遍历
myStore.length()					//返回缓存中key的数量

###Constructor
实例化store

1
var myStore = new store('localStorage'// [可选] 'localStorage', 'sessionStorage', 默认 'localStorage')

Weiterlesen »

Veröffentlicht am   |   in   |     |   visitors

js作用域链

es3 es5 没有有块级作用域，如果有需求就放到一个函数体内。

js作用域链组成

分别为
1、全局上下文scope chain = [全局对象]
2、函数上下文scope chain = [当前激活对象 + function.[[scope]] ]
3、eval上下文scope chain = calling context.scope chain

js作用域链组成

Veröffentlicht am   |   in   |     |   visitors

js执行上下文

执行上下文类型

分别为1、全局上下文（全局代码） 2、函数上下文（函数代码） 3、eval上下文（eval代码）
每一种代码开始执行时,都会创建并进入其对应的执行上下文执行完 退出其对应的上下文

执行上下文组成

https://github.com/tccpc

变量对象 Variable Object

用来储存：变量 声明式函数 函数形参
https://github.com/tccpc

变量对象是一种抽象概念 在不同的上下文中都有具体的实现
https://github.com/tccpc
https://github.com/tccpc
https://github.com/tccpc

Veröffentlicht am   |   in   |     |   visitors

一，开篇分析

刚学nodejs这三个模块在搭web服务时经常用到，而且它们之间存在着依赖关系，所以依次介绍并且实例分析。废话不多说了，请看下面文档：
（1），”Url模块”

先来个小栗子（是不很有喜感）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var url = require('url');
var queryUrl = "http://localhost:8888/bb?name=bigbear&memo=helloworld" ;
console.log(typeof url.parse(queryUrl)) ;
console.log(url.parse(queryUrl)) ;
 
 object // typeof 
  { 
     protocol: 'http:',
     slashes: true,
     auth: null,
     host: 'localhost:8888',
     port: '8888',
     hostname: 'localhost',
     hash: null,
     search: '?name=bigbear&memo=helloworld',
     query: 'name=bigbear&memo=helloworld',
     pathname: '/bb',
     path: '/bb?name=bigbear&memo=helloworld',
     href: 'http://localhost:8888/bb?name=bigbear&memo=helloworld'
 }

　加以说明如下：　　

　　protocol:请求协议

　　host:URL主机名已全部转换成小写, 包括端口信息

　　auth:URL中身份验证信息部分

　　hostname:主机的主机名部分, 已转换成小写

　　port:主机的端口号部分

　　pathname:URL的路径部分,位于主机名之后请求查询之前

　　search:URL 的“查询字符串”部分，包括开头的问号。

　　path: pathname和 search 连在一起。

　　query:查询字符串中的参数部分（问号后面部分字符串），或者使用 querystring.parse() 解析后返回的对象。

　　hash:URL 的 “#” 后面部分（包括 # 符号）

　补充api："url.format(urlObj)"

　　作用：输入一个 URL 对象，返回格式化后的 URL 字符串。

Weiterlesen »

Veröffentlicht am   |   in   |     |   visitors

1.jQuery：只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了，示例代码：

1
2
3
$('#username').on('input propertychange', function() {
    //业务处理代码
});

2.对于JS原生写法而言， oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下：
http://www.runoob.com/jsref/event-oninput.html

从上面表格可以看出，oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：

修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。
修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
修改了 select 元素的选中项，selectedIndex 属性发生变化。
　　在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。

　　集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
    <script type="text/javascript">
    // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
        function OnInput (event) {
            alert ("The new content: " + event.target.value);
        }
    // Internet Explorer
        function OnPropChanged (event) {
            if (event.propertyName.toLowerCase () == "value") {
                alert ("The new content: " + event.srcElement.value);
            }
        }
    </script>
</head>
<body>
    Please modify the contents of the text field.
    <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)"
     value="Text field" />
</body>

Veröffentlicht am   |   in   |     |   visitors

初学js运动的其实就对了定时器setTimeout()和setInterval()这两个方法的操作，一般就是操作些top、left、width、heigth、opacity等等。

一个简单的小demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//例如点击oBt1让一个div向右移动到900px的地方
var oDiv=document.getElementById("div1");
var oBt1=document.getElementById("bt1");
var timer;
oBt1.onclick=function(){
    clearInterval(timer);
    timer=setInterval(function(){
        if(oDiv.offsetLeft+10>=900){
            oDiv.style.left="900px";
            clearInterval(timer);
        }else{
            oDiv.style.left=oDiv.offsetLeft+10+"px";
        }
    },30);
}

一个简单的小动画就ok了，通过setInterval()方法让这个div有一个速度加成每过30毫秒这个div的left就增大10px直到到达目的地。这样一个简单的匀速运动就做好了。之后我们在来看看变数运动是怎么操作的。变数运动可以让元素更加生动。

Weiterlesen »

Veröffentlicht am   |   in   |     |   visitors

今天做个购物车遇到了一个小小的问题

1
console.log($('#all').attr('checked'))

居然提示undefied

查了资料后 才发现 需要改为

1
console.log($('#all').prop('checked'))

那么问题来，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？

关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

举个小栗子

1
2
<input id="chk1" type="checkbox" index="1" />是否可见
<input id="chk2" type="checkbox" checked="checked" index="2"/>是否可见

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

1
2
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法，则会出现：

1
2
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

而栗子中的index属性是我们自己自定义上去的,<input>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。