手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:js

JS 刷新页面的几个技巧

做WEB开发,有时候会需要在获取数据后重新刷新页面,如果删除一条数据时,就需要刷新一下显示。以前很多时候,我都是用location.reload()来解决的。
今天再看到某篇 文章的时候才发现,原来还有那么多的技巧,一下子傻眼了。

JavaScript代码
  1. history.go(0)   
  2. location.reload()   
  3. location=location   
  4. location.assign(location)   
  5. document.execCommand('Refresh')   
  6. window.navigate(location)   
  7. location.replace(location)   
  8. document.URL=location.href    

第一种,我真的没想过。第三种,第七种我看过,其他的还。。。。真没有注意过。
我OUT了。。

Tags: js, refresh

JS实现的街头霸王

自从canvas越来越被大多数人接受后,基于它的游戏也越来越多了。。。
而这个,居然没用canvas也能实现这样的效果,看这里:http://www.cnblogs.com/Random/archive/2011/04/11/2011962.html

作者这么说了:
《天机》 之后,这次又山寨了个名为《街斗霸主》的经典格式游戏《街头霸王》的模仿版Demo,花了几个月的业余时间写了这么个东西,算是对目前的技术学习的一种练习吧。

其实这种练习的结果不是很重要,主要是体会其中的过程,虽然大部分的时间是在痛苦中渡过,但也是有很多收获的,同时也暴露出很多技术方面的不足,也为以后的学习明确了一些目标。

技术方面因为考虑到大部分IE用户(而且是非IE9),所以没有用HTML5的canvas,用的div的方式处理的,这样挑战也相对大了一些,

不过确实,性能上还是不理想,IE下的表现还是比较糟糕(特别是IE6。。。恩。。。- -!)。
目前兼容IE6/7/8(理论上也兼容IE9,只是没有测试),safari,FF3.5+(因为FF2.0/3.0不支持水平翻转的样式。。- -!),Chrome,Opera。
自己写了一个小型框架,包括了开发流程和js类库,类库用了OOP Like的方式包了个语法糖衣,看上去还算是像个OOP的样子,不过因为为了追求“优雅”,直接扩展了function的prototype,所以不建议在其它地方使用。
框架开发的整体思路就是用PHP作后端代码合并输出,js代码里用$import去建立了各个代码文件之间的关系,然后页面引用合并js的PHP文件,该模式需要在本地建立一个web服务器才能作测试,并且需要设置hosts为 127.0.0.1 aralork

  游戏说明

 

    游戏是一个Demo版本,实现了核心的整体流程。游戏分为“单人游戏”模式、“双人对战”模式和“练习模式”三种玩法,不过其实实现都是一样,只是改改初始化的参数而已,挺坑爹的。。。

    游戏只需要键盘操作,不需要鼠标,

    菜单的操作是方向键移动,Enter键选择,ESC键取消;

    玩家1的操作:

       上:W,下:S,左:A,右:D,拳:J / K / L,腿:U / I / O

     玩家2的操作:

      上:↑,下:↓,左:←,右:→,拳:小键盘 1 / 2 / 3,腿:小键盘 4 / 5 / 6

    这里的 ↑ ↓ ← → 代表方向键。

    游戏演示地址

     完整源代码下载

Tags: js, 街霸, div, canvas

收藏的关于JS的一些文章

这是一些链接,纯收藏,其实我都用firefox的read it later保存下来过,只是我在这里做一点分享罢了。。。

好了。。先贴这么多。。。

 

 

Tags: 收藏, js

Javascript中各种trim的实现

说到trim,其实这真的让无数前端郁闷。比如在处理input框里内容的时候,都会需要处理input内容的左右空格。但让人郁闷的是,String里居然没有原生方法,而每个人的实现方法都会不一样,效率也各有不同。

但是,新版的ECMA-262里已经表示有此方法了:

  1. 15.5.4.20   String.prototype.trim ( )   
  2.   
  3. The following steps are taken:   
  4.   
  5. 1.   Call CheckObjectCoercible passing the this value as its argument.   
  6. 2.   Let S be the result of calling ToString, giving it the this value as its argument.   
  7. 3.   Let T be a String value that is a copy of S with both leading and trailing white space removed. The definition   
  8.      of white space is the union of  WhiteSpace and LineTerminator .   
  9. 4.   Return T.   
  10.   
  11. NOTE           The trim function is intentionally generic; it does not require that its this value be a String object. Therefore, it   
  12. can be transferred to other kinds of objects for use as a method.   

 

本文摘自http://www.cnblogs.com/snandy/archive/2011/02/26/1965866.html,只是经过我自己的整理了啦。

第一种:这种是大多数人都会写的,也是流传最多的代码了吧?

JavaScript代码
  1. String.prototype.trim = function() {  
  2.     //return this.replace(/[(^\s+)(\s+$)]/g,"");//會把字符串中間的空白符也去掉  
  3.     //return this.replace(/^\s+|\s+$/g,""); //  
  4.     return this.replace(/^\s+/g,"").replace(/\s+$/g,"");  
  5. }  

第二种:来自motools:

JavaScript代码
  1. function trim(str){  
  2.     return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, '');  
  3. }  

第三种:这是jQuery的,jquery的方法类似于第一种:

JavaScript代码
  1. function trim(str){  
  2.     return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');  
  3. }  

 

第四种是来自所摘博客中最写的:Steven Levithan 在进行性能测试后提出了在JS中执行速度最快的裁剪字符串方式,在处理长字符串时性能较好:

JavaScript代码
  1. function trim(str){  
  2.     str = str.replace(/^(\s|\u00A0)+/,'');  
  3.     for(var i=str.length-1; i>=0; i--){  
  4.         if(/\S/.test(str.charAt(i))){  
  5.             str = str.substring(0, i+1);  
  6.             break;  
  7.         }  
  8.     }  
  9.     return str;  
  10. }  

 

博客中还写了这么一点,那就是Molliza Gecko 1.9.1引擎中还给String添加了trimLefttrimRight 方法。

这让我想起了PHP的代码,比如ltrim,rtrim,trim之类的

Tags: js, trim

IE和FF下JS的不同点(更详细)

在这里,http://www.neatstudio.com/show-52-1.shtml,我也曾转载过关于IE和Firefox下event的处理,只是今天的内容会更全一些

一、document.formName.item("itemName") 问题
问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"];Firefox 下,只能使用document.formName.elements["elementName"]。
解决方法:统一使用document.formName.elements["elementName"]。 


二、集合类对象问题
问题说明:IE下,可以使用 () 或 [] 获取集合类对象;Firefox下,只能使用 [ ]获取集合类对象。
解决方法:统一使用 [] 获取集合类对象。


三、自定义属性问题
问题说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获取自定义属性;Firefox下,只能使用 getAttribute() 获取自定义属性。
解决方法:统一通过 getAttribute() 获取自定义属性。 


四、eval("idName")问题
问 题说明:IE下,可以使用 eval("idName") 或 getElementById("idName") 来取得 id 为 idName 的HTML对象;Firefox下,只能使用 getElementById("idName") 来取得 id 为 idName 的HTML对象。
解决方法:统一用 getElementById("idName") 来取得 id 为 idName 的HTML对象。 


五、变量名与某HTML对象ID相同的问题
问题说明:IE下,HTML对象的ID可以作为 document 的下属对象变量名直接使用,Firefox下则不能;Firefox下,可以使用与HTML对象ID相同的变量名,IE下则不能。
解决方法:使用 document.getElementById("idName") 代替 document.idName。最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var关键字,以避免歧义。 


六、const问题
问题说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量。
解决方法:统一使用var关键字来定义常量。 


七、input.type属性问题
问题说明:IE下 input.type 属性为只读;但是Firefox下 input.type 属性为读写。
解决办法:不修改 input.type 属性。如果必须要修改,可以先隐藏原来的input,然后在同样的位置再插入一个新的input元素。 


八、window.event问题
问题说明:window.event 只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。
解决方法:在事件发生的函数上加上event参数,在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)
       示例: <input type="button" onclick="doSomething(event)"/> 
<script language="javascript"> 
function doSomething(evt) { 
var myEvent = evt?evt:(window.event?window.event:null)
… 
}

九、event.x与event.y问题
问题说明:IE下,even对象有x、y属性,但是没有pageX、pageY属性;Firefox下,even对象有pageX、pageY属性,但是没有x、y属性。
解决方法:var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
如果考虑第8条问题,就改用myEvent代替event即可。 


十、event.srcElement问题
问题说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。
解决方法:使用srcObj = event.srcElement ? event.srcElement : event.target;
如果考虑第8条问题,就改用myEvent代替event即可。 


十一、window.location.href问题
问题说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location。
解决方法:使用 window.location 来代替 window.location.href。当然也可以考虑使用 location.replace()方法。 


十二、模态和非模态窗口问题
问题说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能。
解决方法:直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。 
如 果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口。如果需要父窗口控制子窗口的话,使用 var subWindow = window.open(pageURL,name,parameters); 来获得新开的窗口对象。 


十三、frame和iframe问题

以下面的frame为例: 
<frame src="http://www.devdao.com/123.html" id="frameId" name="frameName" /> 
(1)访问frame对象
IE:使用window.frameId或者window.frameName来访问这个frame对象;
Firefox:使用window.frameName来访问这个frame对象;
解决方法:统一使用 window.document.getElementById("frameId") 来访问这个frame对象;
(2)切换frame内容
在 IE和Firefox中都可以使用 window.document.getElementById("frameId").src = "devdao.com.html"或 window.frameName.location = "devdao.com.html"来切换frame的内容;
如果需要将frame中的参数传回父窗口,可以在frame中使用parent关键字来访问父窗口。

十四、body载入问题
问题说明:Firefox的body对象在body标签没有被浏览器完全读入之前就存在;而IE的body对象则必须在body标签被浏览器完全读入之后才存在。
[注] 这个问题尚未实际验证,待验证后再来修改。
[注] 经验证,IE6、Opera9以及FireFox2中不存在上述问题,单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素,即使这个元素还没有载入完成。


十五、事件委托方法
问题说明:IE下,使用 document.body.onload = inject; 其中function inject()在这之前已被实现;在Firefox下,使用 document.body.onload = inject();
解决方法:统一使用 document.body.onload=new Function(’inject()’); 或者 document.body.onload = function(){/* 这里是代码 */}
[注意] Function和function的区别 


十六、访问的父元素的区别
问题说明:在IE下,使用 obj.parentElement 或 obj.parentNode 访问obj的父结点;在firefox下,使用 obj.parentNode 访问obj的父结点。
解决方法:因为firefox与IE都支持DOM,因此统一使用obj.parentNode 来访问obj的父结点。 


十七、cursor:hand VS cursor:pointer
问题说明:firefox不支持hand,但ie支持pointer ,两者都是手形指示。
解决方法:统一使用pointer。 


十八、innerText的问题.
问题说明:innerText在IE中能正常工作,但是innerText在FireFox中却不行。
解决方法:在非IE浏览器中使用textContent代替innerText。
示例: if(navigator.appName.indexOf("Explorer") >-1){ 
document.getElementById(’element’).innerText = "my text"; 
} else{ 
document.getElementById(’element’).textContent = "my text"; 
}
[注] innerHTML 同时被ie、firefox等浏览器支持,其他的,如outerHTML等只被ie支持,最好不用。 


十九、对象宽高赋值问题
问题说明:FireFox中类似 obj.style.height = imgObj.height 的语句无效。
解决方法:统一使用 obj.style.height = imgObj.height + ‘px’; 


二十、Table操作问题
问题说明:ie、firefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChild方法也不管用。
解决方法: //向table追加一个空行: 
var row = otable.insertRow(-1); 
var cell = document.createElement("td"); 
cell.innerHTML = ""; 
cell.className = "XXXX"; 
row.appendChild(cell); [注] 由于俺很少使用JS直接操作表格,这个问题没有遇见过。建议使用JS框架集来操作table,如JQuery。 


二一、ul和ol列表缩进问题
消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px; 
其中margin属性对IE有效,padding属性对FireFox有效。← 此句表述有误,详细见↓
[注] 这个问题尚未实际验证,待验证后再来修改。
[注] 经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list- style:none才 能去除列表编号或圆点。也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置 margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。 


二二、CSS透明问题
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 
FF:opacity:0.6。
[注] 最好两个都写,并将opacity属性放在下面。 


二三、CSS圆角问题
IE:ie7以下版本不支持圆角。
FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。
[注] 圆角问题是CSS中的经典问题,建议使用JQuery框架集来设置圆角,让这些复杂的问题留给别人去想吧。
关于CSS中的问题实在太多了,甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。更多的知识请参考devdao.com的文章。一个合乎发展的建议是,页面采用标准DHTML标准 编写,较少使用table,CSS定义尽量依照标准DOM,同时兼顾IE、Firefox、Opera等主流浏览器。BTW,很多情况下,FF和 Opera的CSS解释标准更贴近CSS标准,也更具有规范性。

虽然我对knowsky网站上的广告颇有微词,但这并不妨碍他上面的文章。原文如下:http://www.knowsky.com/536615.html,估计也是转载来的,因为我看到里面有一些排版内容有变化。

Tags: ie, firefox, js

Records:912