页面载入中...
首页 » Tag ‘JS’

js 设为首页 加入收藏 兼容FF和IE浏览器

//兼容FF和IE浏览器的设为首页、本页收藏

<script type=”text/javascript” language=”javascript”>
//兼容FF和IE浏览器的设为首页、本页收藏
function AddFavorite(sURL, sTitle) {
try {
window.external.addFavorite(sURL, sTitle);
} catch (e) {
try {
window.sidebar.addPanel(sTitle, sURL, “”);
} catch (e) {
alert(“加入收藏失败,请使用Ctrl+D进行添加”);
}
}
}
function SetHome(obj,vrl) {
try {
obj.style.behavior=’url(#default#homepage)’;obj.setHomePage(vrl);
} catch(e) {
if(window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege(“UniversalXPConnect”);
} catch (e) {
alert(“此操作被浏览器拒绝!\n请在浏览器地址栏输入”about:config”并回车\n然后将[signed.applets.codebase_principal_support]设置为’true’”);
}
var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
prefs.setCharPref(‘browser.startup.homepage’,vrl);
}
}
}
</script>

<a onclick=”AddFavorite(‘http://www.sina.com.cn’,document.title)” style=”cursor:hand”>加入收藏</a>
<a onclick=”SetHome(this,’http://www.sina.com.cn’)” >设为首页</a>

Technorati : ,
Del.icio.us : ,
Zooomr : ,
Flickr : ,

动态加载script标签的js

下面为动态加载script标签的js

JavaScript代码

1. <script>

2.

3. var element = document.createElement(“script”);

4.

5. function createScript(compId,dataId){

6. element.src = “http://othersite.com/json.php?comp_id=” + compId + “&data_id=” + dataId + “”;

7. element.type = “text/javascript”;

8. element.language = “javascript”;

9. }

10.

11. function writeContent(){

12. alert(productJSON.product[0].name);

13. }

14.

15. window.onload = function(){

16. createScript(1,2);

17. document.getElementsByTagName(“head”)[0].appendChild(element);

18. }

19.

20. if(document.all){

21. element.onreadystatechange = function(){//IE用

22. var state = element.readyState;

23. if (state == “loaded” || state == “interactive” || state == “complete”) {

24. writeContent();

25. }

26. };

27.

28. } else {

29. element.onload = function() {//FF用

30. writeContent();

31. };

32. }

33.

34.

35. </script>

下面是json.php echo出来的内容
var productJSON = {‘product’: [
{'name' : '物件名1'},
{'building' : '建物名1'},
{'address' : '5'}
]
};

算法的力量(转李开复)—适合计算机专业新生

算法的力量
2006年5月

算法是计算机科学领域最重要的基石之一,但却受到了国内一些程序员的冷落。许多学生看到一些公司在招聘时要求的编程语言五花八门,就产生了一种误解,认为学计算机就是学各种编程语言,或者认为,学习最新的语言、技术、标准就是最好的铺路方法。其实,大家被这些公司误导了。编程语言虽然该学,但是学习计算机算法和理论更重要,因为计算机语言和开发平台日新月异,但万变不离其宗的是那些算法和理论,例如数据结构、算法、编译原理、计算机体系结构、关系型数据库原理等等。在”开复学生网”上,有位同学生动地把这些基础课程比拟为”内功”,把新的语言、技术、标准比拟为”外功”。整天赶时髦的人最后只懂得招式,没有功力,是不可能成为高手的。

算法与我

当我在1980年转入计算机科学系时,还没有多少人的专业方向是计算机科学。有许多其他系的人嘲笑我们说:”知道为什么只有你们系要加一个’科学’,而没有’物理科学系’或’化学科学系’吗?因为人家是真的科学,不需要画蛇添足,而你们自己心虚,生怕不’科学’,才这样欲盖弥彰。” 其实,这点他们彻底弄错了。真正学懂计算机的人(不只是”编程匠”)都对数学有相当的造诣,既能用科学家的严谨思维来求证,也能用工程师的务实手段来解决问题–而这种思维和手段的最佳演绎就是”算法”。

记得我读博时写的Othello对弈软件获得了世界冠军。当时,得第二名的人认为我是靠侥幸才打赢他,不服气地问我的程序平均每秒能搜索多少步棋,当他发现我的软件在搜索效率上比他快60多倍时,才彻底服输。为什么在同样的机器上,我可以多做60倍的工作呢?这是因为我用了一个最新的算法,能够把一个指数函数转换成四个近似的表,只要用常数时间就可得到近似的答案。在这个例子中,是否用对算法才是能否赢得世界冠军的关键。

还记得1988年贝尔实验室副总裁亲自来访问我的学校,目的就是为了想了解为什么他们的语音识别系统比我开发的慢几十倍,而且,在扩大至大词汇系统后,速度差异更有几百倍之多。他们虽然买了几台超级计算机,勉强让系统跑了起来,但这么贵的计算资源让他们的产品部门很反感,因为”昂贵”的技术是没有应用前景的。在与他们探讨的过程中,我惊讶地发现一个O(n*m)的动态规划(dynamic programming)居然被他们做成了O(n*n*m)。更惊讶的是,他们还为此发表了不少文章,甚至为自己的算法起了一个很特别的名字,并将算法提名到一个科学会议里,希望能得到大奖。当时,贝尔实验室的研究员当然绝顶聪明,但他们全都是学数学、物理或电机出身,从未学过计算机科学或算法,才犯了这么基本的错误。我想那些人以后再也不会嘲笑学计算机科学的人了吧!

网络时代的算法

有人也许会说:”今天计算机这么快,算法还重要吗?”其实永远不会有太快的计算机,因为我们总会想出新的应用。虽然在摩尔定律的作用下,计算机的计算能力每年都在飞快增长,价格也在不断下降。可我们不要忘记,需要处理的信息量更是呈指数级的增长。现在每人每天都会创造出大量数据(照片,视频,语音,文本等等)。日益先进的记录和存储手段使我们每个人的信息量都在爆炸式的增长。互联网的信息流量和日志容量也在飞快增长。在科学研究方面,随着研究手段的进步,数据量更是达到了前所未有的程度。无论是三维图形、海量数据处理、机器学习、语音识别,都需要极大的计算量。在网络时代,越来越多的挑战需要靠卓越的算法来解决。

再举另一个网络时代的例子。在互联网和手机搜索上,如果要找附近的咖啡店,那么搜索引擎该怎么处理这个请求呢?

最简单的办法就是把整个城市的咖啡馆都找出来,然后计算出它们的所在位置与你之间的距离,再进行排序,然后返回最近的结果。但该如何计算距离呢?图论里有不少算法可以解决这个问题。

这么做也许是最直观的,但绝对不是最迅速的。如果一个城市只有为数不多的咖啡馆,那这么做应该没什么问题,反正计算量不大。但如果一个城市里有很多咖啡馆,又有很多用户都需要类似的搜索,那么服务器所承受的压力就大多了。在这种情况下,我们该怎样优化算法呢?

首先,我们可以把整个城市的咖啡馆做一次”预处理”。比如,把一个城市分成若干个”格子(grid)”,然后根据用户所在的位置把他放到某一个格子里,只对格子里的咖啡馆进行距离排序。

问题又来了,如果格子大小一样,那么绝大多数结果都可能出现在市中心的一个格子里,而郊区的格子里只有极少的结果。在这种情况下,我们应该把市中心多分出几个格子。更进一步,格子应该是一个”树结构”,最顶层是一个大格–整个城市,然后逐层下降,格子越来越小,这样有利于用户进行精确搜索–如果在最底层的格子里搜索结果不多,用户可以逐级上升,放大搜索范围。

上述算法对咖啡馆的例子很实用,但是它具有通用性吗?答案是否定的。把咖啡馆抽象一下,它是一个”点”,如果要搜索一个”面”该怎么办呢?比如,用户想去一个水库玩,而一个水库有好几个入口,那么哪一个离用户最近呢?这个时候,上述”树结构”就要改成”r-tree”,因为树中间的每一个节点都是一个范围,一个有边界的范围(参考:http://www.cs.umd.edu/~hjs/rtrees/index.html)。

通过这个小例子,我们看到,应用程序的要求千变万化,很多时候需要把一个复杂的问题分解成若干简单的小问题,然后再选用合适的算法和数据结构。

并行算法:Google的核心优势

上面的例子在Google里就要算是小case了!每天Google的网站要处理十亿个以上的搜索,GMail要储存几千万用户的2G邮箱,Google Earth要让数十万用户同时在整个地球上遨游,并将合适的图片经过互联网提交给每个用户。如果没有好的算法,这些应用都无法成为现实。

在这些的应用中,哪怕是最基本的问题都会给传统的计算带来很大的挑战。例如,每天都有十亿以上的用户访问Google的网站,使用Google的服务,也产生很多很多的日志(Log)。因为Log每分每秒都在飞速增加,我们必须有聪明的办法来进行处理。我曾经在面试中问过关于如何对log进行一些分析处理的问题,有很多面试者的回答虽然在逻辑上正确,但在实际应用中是几乎不可行的。按照他们的算法,即便用上几万台机器,我们的处理速度都跟不上数据产生的速度。

那么Google是如何解决这些问题的呢?

首先,在网络时代,就算有最好的算法,也要能在并行计算的环境下执行。在Google的数据中心,我们使用的是超大的并行计算机。但传统的并行算法运行时,效率会在增加机器数量后迅速降低,也就是说,十台机器如果有五倍的效果,增加到一千台时也许就只有几十倍的效果。这种事倍功半的代价是没有哪家公司可以负担得起的。而且,在许多并行算法中,只要一个结点犯错误,所有计算都会前功尽弃。

那么Google是如何开发出既有效率又能容错的并行计算的呢?

Google最资深的计算机科学家Jeff Dean认识到, Google 所需的绝大部分数据处理都可以归结为一个简单的并行算法:Map and Reduce(http://labs.google.com/papers/mapreduce.html)。 这个算法能够在很多种计算中达到相当高的效率,而且是可扩展的(也就是说,一千台机器就算不能达到一千倍的效果,至少也可以达到几百倍的效果)。Map and Reduce的另外一大特色是它可以利用大批廉价的机器组成功能强大的server farm。最后,它的容错性能异常出色,就算一个server farm里面的机器down掉一半,整个farm依然能够运行。正是因为这个天才的认识,才有了Map and Reduce算法。借助该算法,Google几乎能无限地增加计算量,与日新月异的互联网应用一同成长。

算法并不局限于计算机和网络

举一个计算机领域外的例子:在高能物理研究方面,很多实验每秒钟都产生几个TB的数据量。但因为处理能力和存储能力的不足,科学家不得不把绝大部分未经处理的数据丢弃掉。可大家要知道,新元素的信息很有可能就藏在我们来不及处理的数据里面。同样的,在其他任何领域里,算法都可以改变人类的生活。例如人类基因的研究,就可能因为算法而发明新的医疗方式。在国家安全领域,有效的算法可能避免下一个911的发生。在气象方面,算法可以更好地预测未来天灾的发生,以拯救生命。

所以,如果你把计算机的发展放到应用和数据飞速增长的大环境下,你一定会发现,算法的重要性不是在日益减小,而是在日益加强。

给程序员的七个建议

(1)练内功。不要只花功夫学习各种流行的编程语言和工具,以及某些公司招聘广告上要求的科目。要把数据结构、算法、数据库、操作系统原理、计算机体系结构、计算机网络,离散数学等基础课程学好。大家不妨试试高德纳所著The Art of Computer Programming里的题目,如果你能够解决其中的大部分题目,就说明你在算法方面有一定的功力了。

(2)多实战。通过编程的实战积累经验、巩固知识。很多中国大学毕业生缺乏编程和调试经验;学习C语言,考试过关就算学会了;课题项目中,只要程序能够编译,运行,并且输入输出满足要求就算了事。这些做法是不行的。写程序的时候,大家必须多想想如何把程序写得更加精炼、高效、高质量。建议大家争取在大学四年中积累编写十万行代码的经验。我们必须明白的是:好程序员是写出来的,不是学出来的。

(3)求实干。不要轻视任何实际工作,比如一些看似简单的编码或测试。要不懈追求对细节一丝不苟的实干作风与敬业精神。我发现不少程序员对于知识的掌握很肤浅,不求甚解,没有好奇心,不会刨根问底。比如,学会了C++,是否了解一个对象在编译后,在汇编代码中是如何被初始化的?这个对象的各个成员在内存中是如何存放的?当一个成员函数被调用时,编译器在汇编代码中加入了哪些额外的动作?虚函数的调用是如何实现的? 这些东西恐怕在编程语言或编译原理中都没有详细提到,只有通过踏实的实干才能真正掌握。

(4)重视数学学习。数学是思维的体操,数学无处不在。学计算机至少要学习离散数学、概率论、布尔代数、集合论和数理逻辑。这些知识并不难,但是对你未来的工作帮助会很大。 尤其当你对一些”数学密集型”的领域如视频、图像处理等有兴趣时,这些知识将成为你手中的利器。

(5)培养团队精神,学会与人合作。今天的软件工程早已经不是一个人可以单独操作的,而必须靠团队合作才能成功。不懂得合作的人是不能成大器的。大家要多去寻找可以与人一起做项目的机会。

(6)激励创新意识,培养好奇心,不要死记硬背。没有掌握某种算法技术的根本原理,就不会有应变和创新的能力。想成为一位好程序员(其实从事任何一个行业都是如此),重要的是要养成钻研,好奇,创新,动手,合作的优秀习惯,不满足于填鸭,不满足于考试交差,不满足于表象。这不是学几门课能够一蹴而就的。

(7)有策略地”打工”。在不影响学业的前提下,寻找真正有意义的暑期工作或兼职。去找一个重视技术的公司,在一个好的”老板”指导下完成真正会被用户使用的程序。不要急于去一个要你做”头”而独挡一面的地方,因为向别人学习才是你的目的。找工作也是一样,不要只看待遇和职衔,要挑一个你能够学习的环境,一个愿意培养员工的企业,一个重视你的专业的公司。最后,还要挑一个好老板。

希望大家都能把握机会,养成好的学习习惯,把算法学精学透;希望大家都能有一个美好的未来!

个人标注:纯粹的程序员

一些很常用的JS方法

引用地址:http://www.baseclass.com.cn/article.asp?id=69

简化document.getElementById
用法:
$id(“d”).innerHTML;
(HTMLcode:<div id=”d”>cssrain</div>)
**************/
function $id(id) {
return document.getElementById(id);
}


/**************
函数:getElementsByClassName
使用方法:
获取document内的超链接class是”info-links”的。
getElementsByClassName(document, “a”, “info-links”);
获取container内的div的class是col的.
getElementsByClassName(document.getElementById(“container”), “div”, “col”);
获取document内的所有class是”click-me”的。
getElementsByClassName(document, “*”, “click-me”);
例子:
HTML code:
<a class=”a”>ccc</a>
<a class=”info-links”>aaa</a>
<a class=”info-links”>bbb</a>
<br/><br/>
<div class=”co”>dddd</div>
<div class=”col”>dddd</div>
<div id=”container”>
<div class=”co”>dddd</div>
<div class=”col”>dddd</div>
<div class=”co”>dddd</div>
<div class=”col”>dddd</div>
<a class=”a”>ccc</a>
</div>

JS code:
test 1 :
var a = getElementsByClassName(document,”a”,”info-links”);
alert(a[0].innerHTML +” “+a[1].innerHTML);
for(var i=0;i<a.length;i++){
a[i].style.color=”red”;
}
//test 2 :
var b = getElementsByClassName(document.getElementById(“container”), “div”, “col”);
for(var m=0;m<b.length;m++){
b[m].style.color=”red”;
}
**************/
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == “*” && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/-/g, “\-”);
var oregExp = new RegExp(“(^|\s)” + strClassName + “(\s|$)”);
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}




/**************
replaceAll:
替换字符串中的字符。
用法:
yourstring.replaceAll(“要替换的字符”, “替换成什么”);
例子:
“cssrain”.replaceAll(“s”, “a”);
” cs sr ai n”.replaceAll(” “, “”);
**************/
String.prototype.replaceAll = function (AFindText,ARepText){
raRegExp = new RegExp(AFindText,”g”);
return this.replace(raRegExp,ARepText);
}


/**************
* 字符串前后空格处理。
* 如果想替换中间的空格,请用replaceAll方法。
* 用法:
* ” cssrain “.trim();
**************/
String.prototype.trim=function()
{
return this.replace(/(^\s*)|(\s*$)/g,”");//将字符串前后空格,用空字符串替代。
}


/**************
* 计算字符串的真正长度
//String有个属性length,但是它不能区分英文字符,
//计算中文字符和全角字符。但是在数据存储的时候中文和全角都是用两个字节来存储的,
//所有需要额外处理一下。自己写了个函数,返回String正真的长度.
用法:
<input type=”text” name=”rain” id=”rain” />
<input type=”button” id=”test” value=”test” onclick=”alert( document.getElementById(‘rain’).value.codeLength() )”/>
**************/
String.prototype.codeLength=function(){
var len=0;
if(this==null||this.length==0)
return 0;
var str=this.replace(/(^\s*)|(\s*$)/g,”");//去掉空格
for(i=0;i<str.length;i++)
if(str.charCodeAt(i)>0&&str.charCodeAt(i)<128)
len++;
else
len+=2;
return len;
}


//JS获取字符串的实际长度,用来代替 String的length属性
String.prototype.length = function(){
return this.replace.(/[\u4e00-\u9fa5]+/g,”**”).length;
}



/**************
//编码HTML 和 解码Html。
//在评论的时候为了防止用户提交带有恶意的脚本,可以先过滤HTML标签,过滤掉双引号,单引号,符号&,符号<,符号
用法:
<input type=”text” name=”rain” id=”rain” />
<input type=”button” value=”test” onclick=” document.getElementById(‘rain2′).value= document.getElementById(‘rain’).value.htmlEncode() “/>
<input type=”text” name=”rain2″ id=”rain2″ />
<input type=”button” value=”test” onclick=” document.getElementById(‘rain’).value= document.getElementById(‘rain2′).value.htmlDecode() “/>
**************/

String.prototype.htmlEncode=function(){
return this.replace(/&/g,”&”).replace(/</g,”<”).replace(/>/g,”>”).replace(/\”/g,”"”).replace(/\’/g,”‘”);
}
String.prototype.htmlDecode=function(){
return this.replace(/\&\;/g, ‘\&’).replace(/\>\;/g, ‘\>’).replace(/\<\;/g, ‘\<’).replace(/\”\;/g, ‘\”).replace(/\&\#39\;/g, ‘\”);
}



/*
当我们想在页面加载之后执行某个函数,肯定会想到onload了
但onload在浏览器看来,就是页面上的东西全部都加载完毕后才能发生,但那就为时已晚了。
如果只需要对DOM进行操作,那么这时就没必要等到页面全部加载了。我们需要更快的方法。
Firefox有DOMContentLoaded事件可以轻松解决,可惜的就是IE没有。
MSDN关于JSCRIPT的一个方法有段不起眼的话,当页面DOM未加载完成时,
调用doScroll方法时,会产生异常。那么我们反过来用,如果不异常,那么就是页面DOM加载完毕了!
跟jquery中的ready功能类似。

用法:
function a(){
alert(1);
}
IEContentLoaded( document.getElementById(“test”) , a );

*/
function IEContentLoaded (w, fn) {
var d = w.document, done = false,
// only fire once
init = function () {
if (!done) {
done = true;
fn();
}
};
// polling for no errors
(function () {
try {
// throws errors until after ondocumentready
d.documentElement.doScroll(‘left’);
} catch (e) {
setTimeout(arguments.callee, 50);
return;
}
// no errors, fire
init();
})();
// trying to always fire before onload
d.onreadystatechange = function() {
if (d.readyState == ‘complete’) {
d.onreadystatechange = null;
init();
}
};
}



/**************
用来window.load 多个函数。
window.onload是不能同时加载多个函数的;
比如:
function t(){
alert(“t”)
}
function b(){
alert(“b”)
}
window.onload =t ;
window.onload =b ;
这样做 ,只会输出 b ;

addLoadEvent()这个函数 就是解决这个问题的。
用法:
addLoadEvent(t);
addLoadEvent(b);
**************/

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}


//支持 FF的 onmouseenter 和 onmouseleave。
/*
由于ff 不支持 onmouseenter 和 onmouseleave。
下面这个方法 就是为了解决 ff 下的这个问题。
用法:
function init()
{
var theList = document.getElementById(‘theList’);
xb.addEvent(theList, ‘mouseenter’, enter, false);
xb.addEvent(theList, ‘mouseleave’, leave, false);
}

function enter(e)
{
alert(‘mouseenter: ‘ + this.id);
}

function leave(e)
{
alert(‘mouseleave: ‘ + this.id);
}
*/

var xb =
{
evtHash: [],

ieGetUniqueID: function(_elem)
{
if (_elem === window) { return ‘theWindow’; }
else if (_elem === document) { return ‘theDocument’; }
else { return _elem.uniqueID; }
},

addEvent: function(_elem, _evtName, _fn, _useCapture)
{
if (typeof _elem.addEventListener != ‘undefined’)
{
if (_evtName == ‘mouseenter’)
{ _elem.addEventListener(‘mouseover’, xb.mouseEnter(_fn), _useCapture); }
else if (_evtName == ‘mouseleave’)
{ _elem.addEventListener(‘mouseout’, xb.mouseEnter(_fn), _useCapture); }
else
{ _elem.addEventListener(_evtName, _fn, _useCapture); }
}
else if (typeof _elem.attachEvent != ‘undefined’)
{
var key = ‘{FNKEY::obj_’ + xb.ieGetUniqueID(_elem) + ‘::evt_’ + _evtName + ‘::fn_’ + _fn + ‘}’;
var f = xb.evtHash[key];
if (typeof f != ‘undefined’)
{ return; }

f = function()
{
_fn.call(_elem);
};

xb.evtHash[key] = f;
_elem.attachEvent(‘on’ + _evtName, f);

// attach unload event to the window to clean up possibly IE memory leaks
window.attachEvent(‘onunload’, function()
{
_elem.detachEvent(‘on’ + _evtName, f);
});

key = null;
//f = null; /* DON’T null this out, or we won’t be able to detach it */
}
else
{ _elem['on' + _evtName] = _fn; }
},

removeEvent: function(_elem, _evtName, _fn, _useCapture)
{
if (typeof _elem.removeEventListener != ‘undefined’)
{ _elem.removeEventListener(_evtName, _fn, _useCapture); }
else if (typeof _elem.detachEvent != ‘undefined’)
{
var key = ‘{FNKEY::obj_’ + xb.ieGetUniqueID(_elem) + ‘::evt’ + _evtName + ‘::fn_’ + _fn + ‘}’;
var f = xb.evtHash[key];
if (typeof f != ‘undefined’)
{
_elem.detachEvent(‘on’ + _evtName, f);
delete xb.evtHash[key];
}

key = null;
//f = null; /* DON’T null this out, or we won’t be able to detach it */
}
},

mouseEnter: function(_pFn)
{
return function(_evt)
{
var relTarget = _evt.relatedTarget;
if (this == relTarget || xb.isAChildOf(this, relTarget))
{ return; }

_pFn.call(this, _evt);
}
},

isAChildOf: function(_parent, _child)
{
if (_parent == _child) { return false };

while (_child && _child != _parent)
{ _child = _child.parentNode; }

return _child == _parent;
}
};
/* end */

//DOM没有提供insertAfter(),只提供了一个insertBefore()方法。
//在这里,我们自己编写一个 insertAfter().
/**************
用法:
//插入到 div b 的后面
window.onload=function(){
var a =document.createElement(“span”);
var b =document.createTextNode(“cssrain”);
a.appendChild(b);

var mubiao = document.getElementById(“b”);
insertAfter(a,mubiao);
}

<div id=”b”>bbbbbbbbb</div>
<div>dddddd</div>
**************/
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {// 如果最后的节点是目标元素,则直接添加。因为默认是最后
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);//如果不是,则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。
}
}


/**************
解决 style 外嵌样式 用js 获取不到 的问题。
用法:
window.onload = function(){
var e1 = document.getElementById(“exep1″);
alert(getStyle(e1,”fontSize”));
alert(getStyle(e1,”backgroundColor”));
}

<!–
currentStyle 对象返回了元素上的样式表,但是 style 对象只返回通过 STYLE 标签属性应用到元素的内嵌样式。
因此,通过 currentStyle 对象获取的样式值可能与通过 style 对象获取的样式值不同。
例如,如果段落的 color 属性值通过链接或嵌入样式表设置为红色( red ),
而不是内嵌的话,对象.currentStyle.color 将返回正确的颜色,
而对象 style.color 不能返回值。
但是,如果用户指定了 <P STYLE=”color:’red’”>,currentStyle 和 STYLE 对象都将返回值 red。
–>
</head>

<body>
<div id=”exep1″>c</div>
</body>
**************/
function getStyle(elem, name){
if(elem.style[name])
return elem.style[name];
else if(elem.currentStyle)//ie
return elem.currentStyle[name];
else if(document.defaultView && document.defaultView.getComputedStyle){//w3c
name = name.replace(/([A-Z])/g,”-$1″);
name = name.toLowerCase();

var s = document.defaultView.getComputedStyle(elem,”");
return s && s.getPropertyValue(name);
} else
return null
}


/**************
//获取当前元素的 元素节点
如果想获取当前元素的下一个节点。
那么可以扩展下:
比如:
var elem = getNextElement( node.nextSibling );
用法;
var elem = getNextElement( node );
**************/
function getNextElement(node) {//获取当前元素的元素节点
if(node.nodeType == 1) {
return node;
}
if (node.nextSibling) {
return getNextElement(node.nextSibling);//如果不是,继续查询下一个,直到 if(node.nodeType == 1) .
}
return null;
}


/**************
默认的 element.className = “” ;是 替换样式。
如果我们是想追加样式, 那么使用下面的方法
用法;
addClass(element,”classname”);
用了这个函数后:
那么将追加成 :
<p class=”b classname”>aaaaaaaaaaaaaaaaaaa</p>
**************/
function addClass(element,value) { //追加样式,而不是替换样式
if (!element.className) {
element.className = value;
} else {
element.className+= ” “;
element.className+= value;
}
}


/**************
表格隔行变色。
注意:引入 我们自己写的 addClass()函数。
**************/
function stripeTables() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName(“table”);
for (var i=0; i<tables.length; i++) {
var odd = false;
var rows = tables[i].getElementsByTagName(“tr”);
for (var j=0; j<rows.length; j++) {
if (odd == true) {
addClass(rows[j],”odd”);//odd为样式名
odd = false;
} else {
odd = true;
}
}
}
}

/**************
表格滑过变色.
注意:引入 我们自己写的 addClass()函数。
**************/
function highlightRows() {
if(!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName(“tr”);
for (var i=0; i<rows.length; i++) {
rows[i].oldClassName = rows[i].className
rows[i].onmouseover = function() {
addClass(this,”highlight”);//highlight为样式名
}
rows[i].onmouseout = function() {
this.className = this.oldClassName
}
}
}



/********************
隔行变色 + 滑过变色
参数设置:
id 为表格的id
class1为奇数行的颜色
class2为偶数行的颜色
class3为鼠标滑过颜色
用法:
sti_table(“cssrain” , “c” , “a” ,”d” );
<style>
.a{
background-color : #eee;
}

.c{
background-color : #96dd33;
}

.d{
background-color : #456577;
}
</style>
<TABLE id=”cssrain” >
<TR>
<TD>1</TD>
</TR>
</table>
*********************/
function sti_table( id , class1 , class2 , class3 ){
var para = document.getElementById(id);
var tr = para.getElementsByTagName(“tr”);
var odd = false;
for(var i=0 ; i < tr.length ; i++ ){
if(odd==true){
tr[i].className = class1;
odd=false;

tr[i].onmouseover =function(){
this.className = class3;
}
tr[i].onmouseout =function(){
this.className = class1;
}
}
else{
tr[i].className = class2;
odd=true;

tr[i].onmouseover =function(){
this.className = class3;
}
tr[i].onmouseout =function(){
this.className = class2;
}
}
}

}


//格式化日期和数字
//用法:
//var date=new Date();
//var dateText = format(“YYYY-MM-DD”,date)
//var numberText=format(“###.#”,5432.545)
//document.write(dateText)
//document.write(“<br />”+numberText)
//like the ISO 8895
//also see Java’s SimpleDateFormat.
//
//Letter Date or Time Component Presentation Examples UserDic
//Y Year Year 1996; 96
//M Month in year Month July; Jul; 07 *
//D Day in month Number 10
//w Day in week Text Tuesday; Tue; 2 *
//h Hour in day (0-23) Number 0
//m Minute in hour Number 30
//s Second in minute Number 55

//Pattern Sample
//YYYY-MM-DD hh:mm:ss 2001-07-04 12:08:56
//YYYY-MM-DDThh:mm:ss 2001-07-04T12:08:56
//YYYY/MM/DDThh:mm:ss 2001/07/04T12:08:56
//YYYY年MM月DD日,周w 2008年12月12日,周3
//hh:mm 12:08


//符号说明:
//0 表示补0 的数字占位
//. 表示小数点
//, 数字分组符号 如123,456.123
//# 表示不补0 的数字占位
//
//Number Pattern Result
//10000000000001124 #,###.### 10,000,000,000,001,124.000
//123.125 ##,#.#,# 1,2,3.1,3
//123.125 ###.# 123.1
//123.125 00000 00123
//123.125 .000 .125
//0.125 0.0000 0.1250
//0.125 00.0000 00.1250
//
//使用代码:
//var numberText = format(“##.#”,123.456)//output 123.45

function format(pattern,data){
if(data instanceof Date){
function dl(data,format){//3
format = format.length;
data = data || 0;
return format = 1 ? data : String(Math.pow(10,format)+data).substr(-format);
}
return pattern.replace(/([YMDhsm])\1*/g,function(format){
switch(format.charAt()){
case ‘Y’ :
return dl(data.getFullYear(),format);
case ‘M’ :
return dl(data.getMonth()+1,format);
case ‘D’ :
return dl(data.getDate(),format);
case ‘w’ :
return data.getDay()+1;
case ‘h’ :
return dl(data.getHours(),format);
case ‘m’ :
return dl(data.getMinutes(),format);
case ’s’ :
return dl(data.getSeconds(),format);
}
});
}else if(‘number’ == typeof data){
//hack:purePattern as floatPurePattern
function trim(data,pattern,purePattern){
if(pattern){
if(purePattern){
if(purePattern.charAt() == ‘0′){
data = data + purePattern.substr(data.length);
}
if(purePattern!=pattern){
var pattern = new RegExp(“(\\d{“+pattern.search(/[^\d#]/)+”})(\\d)”);
while(data.length < (data = data.replace(pattern,’$1,$2′)).length);
}
data = ‘.’ + data
}else{
var purePattern = pattern.replace(/[^\d#]/g,”);
if(purePattern.charAt() == ‘0′){
data = purePattern.substr(data.length) + data;
}
if(purePattern!=pattern){
var pattern = new RegExp(“(\\d)(\\d{“+(pattern.length-pattern.search(/[^\d#]/)-1)+”})\\b”);
while(data.length < (data = data.replace(pattern,’$1,$2′)).length);
}
}
return data;
}else{
return ”;
}
}
return pattern.replace(/([#0,]*)?(?:\.([#0,]+))?/,function(param,intPattern,floatPattern){
var floatPurePattern = floatPattern.replace(/[^\d#]/g,”);
data = data.toFixed(floatPurePattern.length).split(‘.’);
return trim(data[0] ,intPattern) + trim(data[1] || ”,floatPattern,floatPurePattern);
})
}
}


//除法函数,用来得到精确的除法结果
//说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。
//调用:accDiv(arg1,arg2)
//返回值:arg1除以arg2的精确结果
function accDiv(arg1,arg2){
var t1=0,t2=0,r1,r2;
try{t1=arg1.toString().split(“.”)[1].length}catch(e){}
try{t2=arg2.toString().split(“.”)[1].length}catch(e){}
with(Math){
r1=Number(arg1.toString().replace(“.”,”"))
r2=Number(arg2.toString().replace(“.”,”"))
return (r1/r2)*pow(10,t2-t1);
}
}
//给Number类型增加一个div方法
//用法: (37).div(3);
Number.prototype.div = function (arg){
return accDiv(this, arg);
}

//乘法函数,用来得到精确的乘法结果
//说明:javascript的乘法结果会有误差,在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
//调用:accMul(arg1,arg2)
//返回值:arg1乘以arg2的精确结果
function accMul(arg1,arg2)
{
var m=0,s1=arg1.toString(),s2=arg2.toString();
try{m+=s1.split(“.”)[1].length}catch(e){}
try{m+=s2.split(“.”)[1].length}catch(e){}
return Number(s1.replace(“.”,”"))*Number(s2.replace(“.”,”"))/Math.pow(10,m)
}
//给Number类型增加一个mul方法
//用法: (37).mul(3);
Number.prototype.mul = function (arg){
return accMul(arg, this);
}
//加法函数,用来得到精确的加法结果
//说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
//调用:accAdd(arg1,arg2)
//返回值:arg1加上arg2的精确结果
function accAdd(arg1,arg2){
var r1,r2,m;
try{r1=arg1.toString().split(“.”)[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(“.”)[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2))
return (arg1*m+arg2*m)/m
}
//给Number类型增加一个add方法
//用法: (37).add(3);
Number.prototype.add = function (arg){
return accAdd(arg,this);
}

//减法函数,用来得到精确的减法结果
function Subtr(arg1,arg2){
var r1,r2,m,n;
try{r1=arg1.toString().split(“.”)[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(“.”)[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2));
//last modify by deeka
//动态控制精度长度
n=(r1>=r2)?r1:r2;
return ((arg1*m-arg2*m)/m).toFixed(n);
}
//给Number类型增加一个add方法
//用法: (5.5).sub(37.5)
Number.prototype.sub = function (arg){
return Subtr(arg,this);
}


//格式化字符串
/*
用法:
var cls=”redclass”;
var text=”My name is “;
var str=’<div class=”{0}”>{1} {2}</div>’.diy_format(cls, text,”cssrain”);
alert(str);
*/
String.prototype.diy_format=function(){
var args=arguments;
return this.replace(/\{(\d+)\}/g, function(m, i){
return args[i];}
);}


//去掉数组中重复的元素
//用法:
//var arr=["abc",85,"abc",85,8,8,1,2,5,4,7,8];
//alert( arr.strip() );
Array.prototype.strip=function(){
if(this.length<2) return [this[0]]||[];
var arr=[];
for(var i=0;i<this.length;i++){
arr.push(this.splice(i–,1));
for(var j=0;j<this.length;j++){
if(this[j]==arr[arr.length-1]){
this.splice(j–,1);}}}
return arr;
}



//得到l-h下标的数组
//用法:
//var arr=["abc",85,"abc",85,8,8,1,2,5,4,7,8];
//alert( arr.limit(2,4) ); //输出 abc , 85 ,8
Array.prototype.limit = function(l, h) {
var _a = this; var ret = [];
l = l<0?0:l; h = h>_a.length?_a.length:h;
for (var i=0; i<_a.length; i++) {
if (i>=l && i<=h) ret[ret.length] = _a[i];
if (i>h) break;
}; return ret;
}

//指定array是否包含指定的item
//array.exists( item ) 包含true;不包含false;
//用法:
//var array1 = [1,2,3,4,5,"a","b"];
//var b1 = array1.exists(“b”) // 包含true;不包含false;//alert(b1)
function Array.prototype.exists( item )
{
for( var i = 0 ; i < this.length ; i++ )
{
if( item == this[i] )
{
return true;
}
}
return false;
}

//删除指定的item
//array.remove(item) 删除item
//用法:
//var array1 = [1,2,3,4,5,"a","b"];
//array1.remove(“2″);
//alert( array1[1] );
function Array.prototype.remove( item )
{
for( var i = 0 ; i < this.length ; i++ )
{
if( item == this[i] )
{
break;
}
}
if( i == this.length )
{
return;
}
for( var j = i ; j < this.length – 1 ; j++ )
{
this[ j ] = this[ j + 1 ];
}
this.length–;
}


//得到url参数值
// url: http:www.cssrain.cn/article.asp?id=100
// var id = getParameter(“id”);
// alert(id);
function getParameter(key)
{
var parameters = unescape(window.location.search.substr(1)).split(“&”);
for( var i = 0 ; i < parameters.length ; i++ )
{
var paramCell = parameters[i].split(“=”);
if( paramCell.length == 2 && paramCell[0].toUpperCase() == key.toUpperCase() )
{
return paramCell[1];
}
}
return new String();
}



//获取某月有几天 ,月份是从 0开始
//用法:alert( jscomGetMonthDays(2008 , 4) )
function jscomGetMonthDays(year,month)
{
if(month<0 || month>11)
{
return 30;
}
var arrMon = new Array(12);
arrMon[0] = 31;
if(year % 4 == 0)
{
arrMon[ 1] =29;
}else{
arrMon[ 1] =28;
}
arrMon[ 2] = 31; arrMon[ 3] = 30;
arrMon[ 4] = 31; arrMon[ 5] = 30;
arrMon[ 6] = 31; arrMon[ 7] = 31;
arrMon[ 8] = 30; arrMon[ 9] = 31;
arrMon[10] = 30; arrMon[11] = 31;
return arrMon[month];
}

/**
* 以document.write的方式向页面中写入js
* 参数 :
o {
id : id of the created tag,
url : String,
script : String
}
用法: dwScript({id : ‘cssrain’ , url : ‘js/fl.js’ });
*/
function dwScript(o){
o.id = o.id || “”;
o.charset = o.charset || “utf-8″;
if (o.script && o.script != “”){
document.write(“<script id=’” + o.id + “‘>” + o.script + “<\/script>”);
} else if (o.url && o.url != “”){
document.write(“<script id=’” + o.id + “‘ src=’” + o.url + “‘ charset=’” + o.charset + “‘><\/script>”);
} else throw new Error(“no script content or url specified”);
}


/**
* 以document.write的方式向页面中写入css
* @param o {
* id : id of the created tag,
* url : String,
* styles : styles text
* }
用法:dwCSS({ id : ‘cssrain’ , url:’css/default.template.css?’});
*/
function dwCSS(o){
o.id = o.id || “”;
if (o.url){
document.write(‘<link id=”‘ + o.id + ‘” rel=”stylesheet” type=”text/css” href=”‘ + o.url + ‘” />’);
} else if (o.styles){
document.write(‘<style id=”‘ + o.id + ‘” >’+o.styles+’<\/style>’);
}
}


/**
* 把字符串中 的 半角 转换为全角。
用法:
var a = “d’d'd’d()%[]“;
alert(toSafe(a));

当然可以用于表单的值转换。
*/
function toSafe(str)
{
var re;
re = /’/g;
str = str.replace(re,”'”);
re =/\)/g;
str = str.replace(re,”)”);
re = /\(/g;
str = str.replace(re,”(”);
re = /%/g;
str = str.replace(re,”%”);
re = /\[/;
str = str.replace(re,"[");
re = /\]/;
str = str.replace(re,”]”);
return str;
}
function makeToSafe(formName)
{
var i,form;
form = eval(formName);
for(i=0;i<form.elements.length;i++)
{
if(form.elements[i].type==”text” || form.elements[i].type==”textarea”)
{
form.elements[i].value = toSafe(form.elements[i].value);
}
}
}


/*
小数 四舍五入
//Dight 为要转换的数据
//How 要保留的小数位数
用法:
var k = ForDight( 222.5 , 0 ) ;
*/
function ForDight(Dight,How)
{
Dight = Math.round (Dight*Math.pow(10,How))/Math.pow(10,How);
return Dight;
}

/*
计时器。
用法:
<div id=”cssrain”>aaa</div>

<SCRIPT >
var test = document.getElementById(“cssrain”);

//测试一个例子,3秒后隐藏div。
function hideDiv()
{
test.style.color = “red”;
}

var cs = new timerPerActive(3 , hideDiv );
cs.callback();
*/

function timerPerActive(timer,comfunc) //对象
{
this.times=0;//定时器对象 ,初始化为0
this.change=function()
{
this.times++;
test.innerHTML = this.times;//测试用的
if(this.times==timer)
{
clearInterval(times);
this.complete(); //最终要回调的函数
}
}
this.callback=function() //每过1秒,调用
{
var css=this;
times=setInterval(function(){css.change();},1000);
}
this.complete=function() //完成后,调用
{
comfunc();
}
}


// 计算日期为当年的第几周
// 用法:
// 获取 2008-7-5 为当年的第几周
// 返回: 28
// document.write( weekOfYear(2008 , 7 , 5) );
function weekOfYear(year, month, day){
// year 年
// month 月
// day 日
// 每周从周日开始
var date1 = new Date(year, 0, 1);
var date2 = new Date(year, month-1, day, 1);
var dayMS = 24*60*60*1000;
var firstDay = (7-date1.getDay())*dayMS;
var weekMS = 7*dayMS;
date1 = date1.getTime();
date2 = date2.getTime();
return Math.ceil((date2-date1-firstDay)/weekMS)+1;
}

// 通过周数和星期计算日期
// 获取 2005 年第 37 周的周六的日期 。 (0-6, 0代表周日)
// 返回: 2005年9月10号
// alert(dateFromWeek(2005, 37, 6));
function dateFromWeek(year, week, day){
// year 年
// week 周
// day 星期 (0-6, 0代表周日)
var date1 = new Date(year, 0, 1);
var dayMS = 24*60*60*1000;
var firstDay = (7-date1.getDay())*dayMS;
var weekMS = (week-2)*7*dayMS;
var result = date1.getTime()+firstDay+weekMS+day*dayMS;
date1.setTime(result);
return date1.toLocaleDateString();
}


/**************
format:
格式化时间。
用法:
yourdate.format(“你的日期格式”);
例子:
obj0 = new Date(“Sun May 04 2008″).format(“yyyy-MM-dd”);
obj1 = new Date().format(“yyyy-MM-dd hh:mm:ss”);
obj2 = new Date().format(“yyyy-MM-dd”);
obj3 = new Date().format(“yyyy/MM/dd”);
obj4 = new Date().format(“MM/dd/yyyy”);
**************/
Date.prototype.format = function(format)
{
var o = {
“M+” : this.getMonth()+1, //month
“d+” : this.getDate(), //day
“h+” : this.getHours(), //hour
“m+” : this.getMinutes(), //minute
“s+” : this.getSeconds(), //second
“q+” : Math.floor((this.getMonth()+3)/3), //quarter
“S” : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(this.getFullYear()+”").substr(4 – RegExp.$1.length));
for(var k in o)if(new RegExp(“(“+ k +”)”).test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length==1 ? o[k] :
(“00″+ o[k]).substr((“”+ o[k]).length));
return format;
}

/**************
日期减去天数 得到 第二个日期 。
例子:
data_sub_day(“12/23/2002″,30)
**************/
function data_sub_day(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a – dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + “年” + (a.getMonth() + 1) + “月” + a.getDate() + “日”)
}


/**************
format:
格式化数字.
例子:
var n = format_number( 123456.45656 , 2 ); // .toFixed(2)也可以实现,不过不兼容FF.
alert(n);
**************/
function format_number(str,digit)
{
if(isNaN(str))
{
alert(“您传入的值不是数字!”);
return 0;
}
else if(Math.round(digit)!=digit)
{
alert(“您输入的小数位数不是整数!”);
return 0;
}
else
return Math.round(parseFloat(str)*Math.pow(10,digit))/Math.pow(10,digit);
}



/**************
* 得到单选框选中的值。
* 用法:
*<input type=”radio” value=”1″ name=”cssrain”/>
*<input type=”radio” value=”2″ name=”cssrain” checked/>
*<input type=”radio” value=”3″ name=”cssrain”/>
*<input type=”button” onclick=”alert(getRadioValue(‘cssrain’))” value=”test”/>
**************/
function getRadioValue(radioName){
var obj=document.getElementsByName(radioName);
for(var i=0;i<obj.length;i++){
if(obj[i].checked){
return obj[i].value;
}
}
}

/**************
* 复选框全选/不选/反选
* 用法:
<form id=”form_a”>
<input type=”checkbox” value=”1″ name=”a”/>
<input type=”checkbox” value=”2″ name=”a” checked/>
<input type=”checkbox” value=”3″ name=”a”/>
<input type=”button” value=”全选” onclick=”checkAll(document.getElementById(‘form_a’),’all’)”/>
<input type=”button” value=”不选” onclick=”checkAll(document.getElementById(‘form_a’),’none’)”/>
<input type=”button” value=”反选” onclick=”checkAll(document.getElementById(‘form_a’),”)”/>
</form>
**************/
function checkAll(form, sel) {
for (i = 0, n = form.elements.length; i < n; i++) {
if(form.elements[i].type == “checkbox”) {
if(form.elements[i].checked == true) {
form.elements[i].checked = (sel == “all” ? true : false);
} else {
form.elements[i].checked = (sel == “none” ? false : true);
}
}
}
}
/**************
* 复选框检查是否选中。
* 如果没一个选中,会返回false.
* 用法:
<form id=”form_a” name=”form_a”>
<input type=”checkbox” value=”1″ name=”a”/>
<input type=”checkbox” value=”2″ name=”a” checked/>
<input type=”checkbox” value=”3″ name=”a”/>
<input type=”button” value=”全选” onclick=”alert( SCheckBox(‘form_a’,'a’) )”/>
</form>
**************/
function SCheckBox(_formName,_checkboxName){
var selflag = {‘checked’:0,’cvalues’:[]};
_scheckbox = eval(‘document.’+_formName+’.'+_checkboxName);
if(_scheckbox){
if(eval(_scheckbox.length)){
for(i=0;i<_scheckbox.length;i++){
if(_scheckbox[i].checked){
selflag.checked++;
selflag.cvalues.push(_scheckbox[i].value);
}
};
}else if(_scheckbox.checked){
selflag.checked++;
selflag.cvalues.push(_scheckbox.value);
}
if(selflag.checked){
return selflag;
}
}
return false;
}


/**************
收藏到书签.(兼容IE和FF)。
用法:
<input type=”button” value=”收藏” onclick=”addBookmark(‘cssrain(前端开发)’,’http://www.cssrain.cn‘)”/>
**************/
function addBookmark(title,url) {
if (window.sidebar) {
window.sidebar.addPanel(title, url,”");
} else if( document.all ) {
window.external.AddFavorite( url, title);
} else if( window.opera && window.print ) {
return true;
}
}

/**************
函数 : 文本框得到与失去焦点 操作。
这个方法经常在文本框搜索的时候出现。
文本里显示 ” 搜索 “,然后当用户鼠标点击此文本,
文本框内容清空。如果用户没填写内容,那么文本的值又复原。
如果填写了,就显示用户填写的。
用法:
<input type=”" value=”关键字搜索” name=”a” onfocus=”clearTxt(‘a’,'关键字搜索’)” onblur=”fillTxt(‘a’,'关键字搜索’)”/>
<input type=”text” value=”test” name=”test” />
**************/
function clearTxt(id,txt) {
if (document.getElementById(id).value == txt)
document.getElementById(id).value=”" ;
return ;
}
function fillTxt(id,txt) {
if ( document.getElementById(id).value == “” )
document.getElementById(id).value=txt;
return ;
}
//也可以使用 defaultValue属性 来做:
//例子:
/*
<input type=”text” value=”搜索”/>
<input type=”text” value=”请输入名称”/>
<SCRIPT LANGUAGE=”JavaScript”>
var inputs =document.getElementsByTagName(“input”);
for(var i=0;i<inputs.length;i++){
if (inputs[i].type == “submit”) continue;
if (!inputs[i].defaultValue) continue;
inputs[i].onfocus = function(){
if(this.value == this.defaultValue )
{
this.value = “”;
}
} //end of onfocus
inputs[i].onblur = function(){
if(this.value == “” )
{
this.value = this.defaultValue;
}
} //end of onblur
}
</SCRIPT>
*/




/**************
函数 : 用来判断鼠标按的是左键还是右键。(兼容IE和ff)
用法:
onmousedown=”mouse_keycode(event)”
**************/
function mouse_keycode(event){
var event=event||window.event;
var nav=window.navigator.userAgent;
if (nav.indexOf(“MSIE”)>=1) //如果浏览器为IE.解释:因为 document.all 是 IE 的特有属性,所以通常用这个方法来判断客户端是否是IE浏览器 ,document.all?1:0;
{
if(event.button==1){alert(“左键”)}
else if(event.button==2){alert(“右键”)}
}
else if(nav.indexOf(“Firefox”)>=1) ////如果浏览器为Firefox
{
if(event.button==0){alert(“左键”);}
else if(event.button==2){alert(“右键”);}
}
else{ //如果浏览器为其他
alert(“other”);
}
}


/**************
函数 :触发某个对象的onclick事件。(兼容IE和FF)
用法:
<input type=”button” value=”aaa” id=”a” onclick=” alert(‘cssrain’) ” />
<input type=”button” value=”触发ID为a的onclick事件” onclick=” handerToClick(‘a’) ” />
**************/
function handerToClick(objid){
var obj=document.getElementById(objid);
if(document.all){
obj.fireEvent(“onclick”);
}else{
var e=document.createEvent(‘MouseEvent’);
e.initEvent(‘click’,false,false);
obj.dispatchEvent(e);
}
}


/**************
回车提交。
用法:
<input type=text onkeydown=”keysubmit()”>
**************/
function keysubmit()
{
if(event.keyCode==13)
{
form.submit();
}
}

/**************
实现Ctrl+Enter 提交的效果.(兼容IE和FF)
在做这个效果时,发现一个问题,
当表单中如果只有一个文本框时,
回车会默认提交。(没有提交按钮也一样。)
用法:
<form action=”#” name=”a”>
<input type=”text” />
<input type=”text” onkeydown=”QuickPost( event , document.a )” />
</form>
**************/
function QuickPost(event,form){
var event=event||window.event;
if((event.ctrlKey && event.keyCode == 13)||(event.altKey && event.keyCode == 83)){
// event.srcElement.form.submit();
form.submit();
}
}


/**************
回车自动跳到下一个文本框。
注;此方法不兼容FF,
因为在FF下,event.keycode是只读属性,不能赋值。
用法:
<form action=”#” name=”a” onkeydown=”QuickNext()”>
<input type=”text” />
<input type=”text” />
<input type=”button” value=”test” />
</form>
**************/
function QuickNext()
{
//判断是否为button, 是因为在HTML上会有type=”button”
//判断是否为submit,是因为HTML上会有type=”submit”
//判断是否为reset,是因为HTML上的”重置”应该要被执行
//判断是否为空,是因为对于HTML上的”<a>链接”也应该被执行,
//这种情况发生的情况不多,可以使用”tabindex=-1″的方式来取消链接获得焦点.
if(event.keyCode==13 && event.srcElement.type!=’button’ && event.srcElement.type!=’submit’ && event.srcElement.type!=’reset’ && event.srcElement.type!=’textarea’ && event.srcElement.type!=”)
{ event.keyCode = 9; }
}


/**************
按TAB键移动到下一个输入框时,光标停在文本框文字的最后,方便用户继续输入.
IE默认是全部选中。此方法不兼容FF。
用法:
<input type=’text’ value=’0592′ onfocus=”moveEnd()”>
**************/
function moveEnd()
{
var e=event.srcElement;
var r=e.createTextRange();
r.moveStart(‘character’,e.value.length);
r.collapse(true);
r.select();
}



/**************
TEXTAREA自适应文字的行数 .
注;此方法不兼容FF,(onpropertychange)
参数:当前对象 和 最小高度
用法:
<textarea rows=5 name=s1 cols=27 onpropertychange=”textarea_scroll(this,60)” style=”overflow-y:hidden”>
</textarea>
**************/
function textarea_scroll(obj,min)
{
if(obj.scrollHeight<min){
obj.style.posHeight=min
}else{
obj.style.posHeight=obj.scrollHeight
}
}


/**************
改变下拉框选项后,根据选项的不同弹出不同的窗口.
用法:
<select onchange=”return select_pop(this);” >
<option selected=”selected”>–分公司–</option>
<option value=”http://www.bj.chinaunicom.com“>北京</option>
<option value=”http://www.sh.chinaunicom.com“>上海</option>
</select>
**************/
function select_pop(fileurl){
if (fileurl.options[fileurl.selectedIndex].value != “”)
window.open(fileurl.options[fileurl.selectedIndex].value,”_blank”,”toolbar=yes,location=yes,menubar=yes,scrollbars=yes,resizable=yes,left=50,height=500,width=700″);
return true;
}



/**************
得到字符串的字节数。
用法:
<input type=”text” name=”a” />
<input type=”button” value=”test” onclick=”alert( strlen(document.getElementById(‘a’).value ) )” />
**************/
//
function strlen(string){
var str=”";
str=string;
str=str.replace(/[^\x00-\xff]/g,”**”);
return str.length;
}
//或者
function ByteLength(string){
return string.replace(/[^\x00-\xff]/g,”00″).length;
}


/**************
文本框输入字符控制。
只能输入数字。
用法:
<input onkeyup=”input_shuzi(this)” onbeforepaste=”input_shuzi_before()” />
**************/
function input_shuzi(obj)
{
obj.value=obj.value.replace(/[^\d]/g,”);
}
function input_shuzi_before(){
clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\d]/g,”));
}

/**************
文本框输入字符控制。
只能输入数字和英文。
用法:
<input onkeyup=”input_shuziyinwen(this)” onbeforepaste=”input_shuziyinwen_before()” />
**************/
function input_shuziyinwen(obj)
{
obj.value=obj.value.replace(/[\W]/g,”);
}
function input_shuziyinwen_before(){
clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[\W]/g,”));
}

/**************
文本框输入字符控制。
只能输入汉字。
用法:
<input onkeyup=”input_hanzi(this)” onbeforepaste=”input_hanzi_before()” />
**************/
function input_hanzi(obj)
{
obj.value=obj.value.replace(/[^\u4E00-\u9FA5]/g,”);
}
function input_hanzi_before(){
clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\u4E00-\u9FA5]/g,”));
}

/**************
文本框输入字符控制。
只能输入全角。
用法:
<input onkeyup=”input_quanjiao(this)” onbeforepaste=”input_quanjiao_before()” />
**************/
function input_quanjiao(obj)
{
obj.value=obj.value.replace(/[^\uFF00-\uFFFF]/g,”);
}
function input_quanjiao_before(){
clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\uFF00-\uFFFF]/g,”));
}


/**************
*只允许输入数字和小数点。
*用法:
*<input type=text onkeyup=”clearNoNum(this)”/>
**************/
function clearNoNum(obj)
{
//先把非数字的都替换掉,除了数字和.
obj.value = obj.value.replace(/[^\d.]/g,”");
//必须保证第一个为数字而不是.
obj.value = obj.value.replace(/^\./g,”");
//保证只有出现一个.而没有多个.
obj.value = obj.value.replace(/\.{2,}/g,”.”);
//保证.只出现一次,而不能出现两次以上
obj.value = obj.value.replace(“.”,”$#$”).replace(/\./g,”").replace(“$#$”,”.”);
}

/**************
*把输入的字母转成大写。
*用法:
*<input type=”text” name=”d” onkeyup=”input_to_uppercase(this)” />
**************/
function input_to_uppercase(obj)
{
obj.value=obj.value.toUpperCase();
}
/**************
*把输入的字母转成小写。
*用法:
*<input type=”text” name=”e” onkeyup=”input_to_lowercase(this)” />
**************/
function input_to_lowercase(obj)
{
obj.value=obj.value.toLowerCase();
}


/**************
*判断字符中是否包含有 http:// .
*用法:
<input type=”text” name=”a” />
<input type=”button” value=”test” onclick=” alert( urlcheck(document.getElementById(‘a’).value) )” />
**************/
function urlcheck(string){
var re;
re=new RegExp(“http://“);
return re.test(string.toLowerCase());
}


/**************
从URL地址中提取文件名
*用法:
var a =url_filename(“http://www.cssrain.cn/abc.rar”);
alert( a ) ;// “abc”
**************/
function url_filename(string){
string=string.replace(/(.*\/){0,}([^\.]+).*/ig,”$2″)
return string
}

/**************
*实时检测输入框的字数
*用法:
<input type=”text” name=”explain” id=”explain” onkeyup=”check_input_Length(this)” >
<small>文字最大长度: 20. 还剩: <span id=”chLeft”>20</span>.</small>
**************/
function check_input_Length(which)
{
var maxChars = 20;
if (which.value.length > maxChars)
which.value = which.value.substring(0,maxChars);
var curr = maxChars – which.value.length;
document.getElementById(“chLeft”).innerHTML = curr.toString();
}


/**************
*判断电子邮箱是否符合规范
*用法:
<input type=”text” name=”a” />
<input type=”button” value=”test” onclick=” alert( emailcheck(document.getElementById(‘a’).value) )” />
**************/
function emailcheck(string){
var re;
re=new RegExp(“^[\\w-_\\.]+@([a-z|0-9|-]+\\.)+[a-z]{2,5}$”);
return re.test(string.toLowerCase());
}


/**************
*判断用户名是否符合要求
*用法:
<input type=”text” value=”aaa” id=”a” />
<input type=”button” value=”test” onclick=” alert( usernamecheck(document.getElementById(‘a’).value ) ) ” />
**************/
function usernamecheck(string){
if((string.length<4)||(string.length>20)){return false;}
var re;
re=new RegExp(“^[a-z|A-Z|0-9][a-z|A-Z|0-9|-]+$”);
return re.test(string);
}


/***************
* 用于检验手机号的位数以及检验此手机中是否为中国移动的手机号
* 如果还想判断联通的手机,可以改 GSMPhNo 。
用法 :
<form name=”toptransfer”>
<input type=”text” name=”phone” />
<input type=”button” value=”test” onclick=”checkFetionReg()”/>
</form>
**************/
function checkMBPhone(phone){
var GSMPhNo = /^(13[4-9])|(159)|(158)|(150)|(151)/; //以134(5、6、7、8、9)或159,158,151,150开头;
var num11 = /^\d{11}$/; //11位数字;
if( “” != phone ){
if(num11.exec(phone)){
if(GSMPhNo.exec(phone)){
return true;
}else{
alert(“对不起,请您正确输入中国移动GSM手机号码(以134-139、159、158、151或150开头)!”);
return false;
}
}else{
alert(“请正确输入11位手机号码(数字)!”);
return false;
}
}else{
alert(“对不起,请输入您的手机号码!”);
return false;
}
}
function checkFetionReg(){ //例子
if(checkMBPhone(document.toptransfer.phone.value))
{
alert(“正确”);
//do your things
}
}




//验证日期 yyyy/mm/dd 或 yyyy.mm.dd
//用法:
//<input id=”txtdata” /> <input type=”button” onclick=”dateCheck()” value=”test”/>
function dateCheck()
{
var str = document.getElementById(“txtdata”).value;//我这里写死了,如果需要可以自己抽象化。
var re = new RegExp(“^([0-9]{4})[./]{1}([0-9]{1,2})[./]{1}([0-9]{1,2})$”);

var ar;
var res = true;

if ((ar = re.exec(str)) != null){
var i;
i = parseFloat(ar[3]);
if (i <= 0 || i > 31){
res = false;
}
i = parseFloat(ar[2]);
if (i <= 0 || i > 12){
res = false;
}
}else{
res = false;
}
if (!res){
alert(‘情输入类似格式 : 2000/11/25′);
}
else{
alert(“success”);
}
return res;
}


//检查输入的值,小数点后的位数
//用法: checknumber( ‘22.22′ , 1 , “金额” );
function checknumber(value,num,str){
if(value!=”"){
if(value.indexOf(“.”)>0){
var temp=value.length-(value.indexOf(“.”)+1);
if(temp>num){
alert(str+”的小数点后只能有”+num+”位!”);
return true;
}
}
}
return false;
}




/***************
获取域名.
**************/
function getDomainName(){
var s,siteUrl;
s=document.location+”";
return s.substring(7,s.indexOf(‘/’,7));
}

/***************
判断cookie是否开启
返回 boolean类型
**************/
function open_cookie(){
//判断cookie是否开启
var cookieEnabled=(navigator.cookieEnabled)? true : false;
//如果浏览器不是ie4+或ns6+
if (typeof navigator.cookieEnabled==”undefined” && !cookieEnabled){
document.cookie=”testcookie”;
cookieEnabled=(document.cookie==”testcookie”)? true : falsedocument.cookie=”";
}

if(cookieEnabled){
return true;
}else{
return false;
}
}

/***************
* 写入COOKIE
用法 :
setcookie:<input type=”button” value=”test” onclick=” setCookie(‘a’,'cssrain’);alert(‘设置成功.’) ” />
getcookie:<input type=”button” value=”test” onclick=” alert( getCookie(‘a’) ) ” />
**************/
function setCookie(name, value){
//document.cookie = name+”=”+value
date = new Date();
document.cookie = name +”=” + escape(value) + “;expires=” + new Date(date.getYear()+1, date.getMonth(),date.getDate()).toGMTString() + “;path=/”;
}
/***************
* 简单的读取Cookie
**************/
function getCookie(Name){
var re=new RegExp(Name+”=[^;]+”, “i”);
if (document.cookie.match(re)){
return document.cookie.match(re)[0].split(“=”)[1];
}else{
return “”;
}
}
/*
读取Cookie写法2:
function getCookie(name){
var aCookie = document.cookie.split(“;”);
for(var i=0; i<aCookie.length; i++)
{
var aC = aCookie[i].split(“=”);
var nTemp = aC[0].replace(‘ ‘,”);
if(name == nTemp)
{
return unescape(aC[1]);
}
}
return “”;
}
*/


/*************
//增加Cookie
function addCookie(name,value,expireHours){
var cookieString=name+”=”+escape(value);
//判断是否设置过期时间
if(expireHours>0){
var date=new Date();
date.setTime(date.getTime+expireHours*3600*1000);
cookieString=cookieString+”; expire=”+date.toGMTString();
}
document.cookie=cookieString;
}
//获取Cookie值
function getCookie(name){
var strCookie=document.cookie;
var arrCookie=strCookie.split(“; “);
for(var i=0;i<arrCookie.length;i++){
var arr=arrCookie[i].split(“=”);
if(arr[0]==name){
return unescape(arr[1]);
}
}
return false;
}
//删除Cookie
function deleteCookie(name){
var date=new Date();
date.setTime(date.getTime()-10000);
document.cookie=name+”=; expire=”+date.toGMTString();
}
*************/


/***************
* 子窗口刷新父窗口.(写在子窗口里)
**************/
function opener_reload()
{
window.opener.location.reload();
}
//javascript:this.location.reload()// 刷新本页 window.history.go(0)
//<INPUT TYPE=”button” onclick=window.history.back() value=back> //后退 window.history.go(-1);
//<INPUT TYPE=”button” onclick=window.history.forward() value=forward>//前进 window.history.go(1);



/**************
* 不被浏览器拦截的弹出窗口JS代码:
* 程序弹出的窗口将不会被广告拦截软件拦截,但有一个缺点:你无法象对window.open弹出的窗口那样对外观进行定制。
* 用法:<input type=button onclick=’window.force.open(“a.html”)’ />
* 定义ForceWindow类构造函数
* 无参数
* 无返回值.
* 实例化一个ForceWindow对象并做为window对象的一个子对象以方便调用
* 定义后可以这样来使用:window.force.open(“URL”);
* 你当然也可以在使用前实例化一个ForceWindow对象:
* var myWindow = new ForceWindow();
* 这样来使用:
* myWindow.open(“URL”);
* 本程序测试通过的浏览器:IE 5+、Firefox 1.0、Mozilla 1.7.5、Netscape 7.2、Opera 7.23
**************/
function ForceWindow ()
{
this.r = document.documentElement;
this.f = document.createElement(“FORM”);
this.f.target = “_blank”;
this.f.method = “post”;
this.r.insertBefore(this.f, this.r.childNodes[0]);
}
ForceWindow.prototype.open = function (sUrl) //定义open方法 , 参数sUrl:字符串,要打开窗口的URL, 无返回值
{
this.f.action = sUrl;
this.f.submit();
}
window.force = new ForceWindow();


/**************
拷贝/复制文本框内容。(兼容IE和FF)
用法:
1,<input type=”text” name=”d” id=”d” value=”<http://www.cssrain.cn><http://www.cssrain.cn>” /><input id=”Button1″ type=”button” onclick=”copyText(document.getElementById(‘d’));” value=”复制” /> <br/>
2,<textarea name=”c” id=”c” rows=”4″ cols=”20″><http://www.cssrain.cn></textarea>
<input id=”Button2″ type=”button” onclick=”copyText(document.getElementById(‘c’));” value=”复制” />
**************/
function copyText(obj)
{
if( obj.type !=”hidden” )
{
obj.focus();
}
obj.select();
copyToClipboard(obj.value);
alert(“拷贝成功!”);
}
function copyToClipboard(txt) {
if(window.clipboardData)
{
window.clipboardData.clearData();
window.clipboardData.setData(“Text”, txt);
}
else if(navigator.userAgent.indexOf(“Opera”) != -1)
{
window.location = txt;
}
else if (window.netscape)
{
try {
netscape.security.PrivilegeManager.enablePrivilege(“UniversalXPConnect”);
}
catch (e)
{
alert(“您使用的浏览器不支持此复制功能,请使用ctrl+c或者浏览器右键复制”);
}
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip)
return;
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!trans)
return;
trans.addDataFlavor(‘text/unicode’);
var str = new Object();
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
var copytext = txt;
str.data = copytext;
trans.setTransferData(“text/unicode”,str,copytext.length*2);
var clipid = Components.interfaces.nsIClipboard;
if (!clip)
return false;
clip.setData(trans,null,clipid.kGlobalClipboard);
}
return true;
}


//运行代码
//用法:
//<textarea id=”a”>aaaaaaaa</textarea>
//<input type=”button” value=”运行” onclick=”runEx(‘a’)” />

function runEx(cod1) {
cod=document.getElementById(cod1)
var code=cod.value;
if (code!=”"){
var newwin=window.open(”,”,”);
newwin.opener = null
newwin.document.write(code);
newwin.document.close();
}
}


/*
插入Flash文件
在你要插入的位置 。
<script>
document.write( GetFlashStr(“pro.swf”,”400px”,”100px”,true) );
</script>
*/
function GetFlashStr(Path,Width,Height,Transparent){
var Temp,T=”";
Temp=’<object classid=”clsid:D27CDB6E-AE6D-11CF-96B8-444553540000″ id=”FlashH” codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″ border=”0″ width=”‘+Width+’” height=”‘+Height+’”>’
Temp+=’<param name=”movie” value=”‘+Path+’”/>’
Temp+=’<param name=”quality” value=”High”/>’
Temp+=’<param name=”scale” value=”ExactFit”/>’
if (Transparent) {Temp+=’ <param name=”wmode” value=”transparent”/>’;T=’wmode=”transparent”‘}
Temp+=’<embed src=”‘+Path+’” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” name=”FlashH” width=”‘+Width+’” height=”‘+Height+’” quality=”High”‘+T+’ scale=”ExactFit”/>’
Temp+=’</object>’
return Temp;
}

/**************
//间歇性循环滚动新闻。从下往上滚动。
//拷贝以下内容,到单独的页面 即可。

<div id=”icefable1″ style=”font-size:12px;”>
<div style=”text-align:left; width:100%; height:20px;”><a target=”_blank” href=”#” title=”111″>111</a></div>
<div style=”text-align:left; width:100%; height:20px;”><a target=”_blank” href=”#” title=”222″>222</a></div>
<div style=”text-align:left; width:100%; height:20px;”><a target=”_blank” href=”#” title=”333″>333</a></div>
<div style=”text-align:left; width:100%; height:20px;”><a target=”_blank” href=”#” title=”444″>444</a></div>
<SCRIPT LANGUAGE=”JavaScript”>
var marqueesRows=4; //滚动行数,与上面的div数目对应
var marqueesHeight=20; //滚动区域的高度,请同时修改上面div样式内的高度
var marqueeSpeed=30; //滚动速度(越小越快)
var pauseTime=70; //停留时间
var stopscroll=false;
var preTop=0, theTop=marqueesHeight*marqueesRows, currentTop=marqueesHeight, stoptime=0;
with(icefable1){
style.width=186; //滚动区域的宽度
style.height=marqueesHeight;
style.overflowX=”visible”;
style.overflowY=”hidden”;
noWrap=false;
onmouseover=new Function(“stopscroll=true”);
onmouseout=new Function(“stopscroll=false”);
innerHTML+=innerHTML;
scrollTop=0;
}
setInterval(“scrollUp()”,marqueeSpeed);
function scrollUp(){//Modified by Dakular
if(stopscroll==true) return;
currentTop+=1;
if(currentTop==marqueesHeight+1){
stoptime+=1; currentTop-=1;
if(stoptime==pauseTime){currentTop=0; stoptime=0;}
}else {
preTop=(++icefable1.scrollTop);
if(preTop==theTop){icefable1.scrollTop=0;}
}
}
</SCRIPT>
</div>
**************/


/**************
显示/隐藏内容。
用法:
<img src=”images/close.gif” id=”img_a” onClick=”show_hide_display(table_a,img_a)”>
<table id=”table_a”>
<tr>
<td>aaa</td>
</tr>
</table>
**************/
function show_hide_display(t_id,i_id){//显示/隐藏
var t_id;//表格ID
var i_id;//图片ID
var default_img=”images/close.gif”;//默认图片
var on_img=”images/close.gif”;//打开时图片
var off_img=”images/open.gif”;//隐藏时图片
if (t_id.style.display == “none”) {//如果为隐藏状态
t_id.style.display=”";//切换为显示状态
i_id.src=on_img;}//换图
else{//否则
t_id.style.display=”none”;//切换为隐藏状态
i_id.src=off_img;}//换图
}


/**************
使按钮有效/无效。
用法:
<form name=”form_a”>
<INPUT TYPE=”button” NAME=”aa” value=”test” onclick=”input_disabled()” />
<INPUT TYPE=”button” NAME=”bb” value=”cssrain” />
<INPUT TYPE=”button” NAME=”bb” value=”cssrain” />
</form>
**************/
function input_disabled()
{
for(var i=0;i<document.form_a.elements.length;i++)
{
if(document.form_a.elements[i].name.indexOf(“bb”)!=-1)
document.form_a.elements[i].disabled=!document.form_a.elements[i].disabled;
}
}


/**************
* 图片自动缩小方法。
* 用法:
<div id=”d”>
<img src=”http://www.baidu.com/img/logo-yy.gif” width=”300″ height=”300″/>
<img src=”http://www.baidu.com/img/logo-yy.gif” />
</div>

window.onload=function(){
resizeImg(50,’d');
}
**************/
function resizeImg(maxWidth,contentId){
var imgs=document.getElementById(contentId).getElementsByTagName(“img”);
for(var i=0;i<imgs.length;i++){
if(imgs[i].width>maxWidth){
imgs[i].removeAttribute(‘width’);
imgs[i].removeAttribute(‘height’);
imgs[i].removeAttribute(’style’);
imgs[i].width=maxWidth;
imgs[i].style.cursor=”hand”;
imgs[i].onclick = function(){
window.open(this.src);
}
}
}
}


/**************
判断浏览器和操作系统。
用法:
window.onload=function(){
alert(getPlatform());
}
**************/
/*–GLOBAL VARIABLES–*/
var OS;
var browser;
function checkIt(string) {
var detect = navigator.userAgent.toLowerCase();
return detect.indexOf(string) + 1;
}
function getPlatform() {
if (checkIt(‘konqueror’)) {
browser = “Konqueror”;
OS = “Linux”;
}
else if (checkIt(’safari’)) browser = “Safari”
else if (checkIt(‘omniweb’)) browser = “OmniWeb”
else if (checkIt(‘opera’)) browser = “Opera”
else if (checkIt(‘webtv’)) browser = “WebTV”;
else if (checkIt(‘icab’)) browser = “iCab”
else if (checkIt(‘msie 7′)) browser = “Internet Explorer 7″
else if (checkIt(‘msie’)) browser = “Internet Explorer”
else if (!checkIt(‘compatible’)) browser = “Netscape Navigator”
else browser = “Unknown Browser”;

if (!OS) {
if (checkIt(‘linux’)) OS = “Linux”;
else if (checkIt(‘x11′)) OS = “Unix”;
else if (checkIt(‘mac’)) OS = “Mac”
else if (checkIt(‘win’)) OS = “Windows”
else OS = “Unknown Operating System”;
}
return browser+”|”+OS;
}


/**************
图片,超链接提示效果.tooltips
用法:
Demo1:<img src=”a.gif” onmouseover=”showToolTip(event,’<font style=font-size:14px;font-weight:bold;color:#000000>测试1</font><img src=b.gif border=0 align=absmiddle>’);” alt=”" onmouseout=”hideToolTip();” />
Demo2:<a href=”a.html” onmouseover=”showToolTip(event,’<font style=font-size:14px;font-weight:bold;color:#000000>测试2</font><img src=b.gif border=0 align=absmiddle>’);” alt=”" onmouseout=”hideToolTip();”>cssrain.cn</a>
引用此方法注意 在页面上加入:
<div id=”frDiv_cssrain” style=”overflow: visible; position: absolute; visibility: hidden;z-index: 500″>
<iframe id=”ifr_cssrain” src=”javascript:null” style=”overflow: visible; position: relative;z-index: 500; width: 342px;height:0px;” scrolling=”no” frameborder=”0″ marginwidth=”0″ marginheight=”0″></iframe>
</div>
**************/
function hideToolTip(){
parent.document.getElementById(“frDiv_cssrain”).style.visibility=”hidden”;
}
function showToolTip(event,msg){
var event =event || window.event;
var ifr_cssrain = getIFrameDocument(“ifr_cssrain”);
var e_html = ifr_cssrain.createElement(“html”);
var e_body = ifr_cssrain.createElement(“body”);
e_body.style.marginLeft = “0px”;
e_body.style.marginTop = “0px”;
e_body.style.marginBottom = “0px”;
e_body.style.marginRight = “0px”;
var e_div = ifr_cssrain.createElement(“div”);
e_div.id = “divContent”;
e_div.style.wordWrap=”break-word”;
e_div.style.backgroundColor=”#aad5ff”;
e_div.style.borderStyle=”solid”;
e_div.style.borderWidth=”1px”;
e_div.style.borderColor=”#336699″;
e_div.style.paddingLeft = “3px”;
e_div.style.paddingTop = “3px”;
e_div.style.paddingBottom = “3px”;
e_div.style.paddingRight = “3px”;
e_div.innerHTML = msg;
e_body.appendChild(e_div);
e_html.appendChild(e_body);
ifr_cssrain.body.innerHTML = e_body.innerHTML;
var oBody = ifr_cssrain.getElementById(“divContent”);
var oFrame = document.getElementById(“ifr_cssrain”);
var oFrDiv = document.getElementById(“frDiv_cssrain”);
oFrame.style.height = oBody.offsetHeight;
//oFrame.style.width = oBody.offsetWidth;
oFrDiv.style.visibility=”visible”;
/*event.x与event.y问题
说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:
使用mX(mX = event.x ? event.x : event.pageX;)
来代替IE下的event.x或者Firefox下的event.pageX.
*/
oFrDiv.style.left = ((event.x ? event.x : event.pageX)+1)+”px”;
oFrDiv.style.top = ((event.y ? event.y : event.pageY)+1)+”px”;
}
function getIFrameDocument(aID) {
var rv = null;
if (document.getElementById(aID).contentWindow){
rv = document.getElementById(aID).contentWindow.document;
} else {
// IE
rv = document.frames[aID].document;
}
return rv;
}


/**************
*window.open居中打开.(兼容IE和FF)
*用法:
*<input type=button onclick=”NewWindow(‘a.html’,'cssrain’,'200′,’200′,yes)”/>
**************/
var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =’height=’+h+’,width=’+w+’,top=’+TopPosition+’,left=’+LeftPosition+’,scrollbars=’+scroll+’,resizable’;
win = window.open(mypage,myname,settings);
win.focus();
}


/**************
*大小写金额转换函数。
把数字转成中文 — “零壹” 这种。
*用法:
小写金额:<input type=”text” name=”aaa” id=”aaa” onkeyup=”nst_convert(this)”><br>
大写金额:<input type=”text” name=”bbb” id=”bbb” size=80>
**************/
function convertCurrency(currencyDigits) {
// Constants:
var MAXIMUM_NUMBER = 99999999999.99;
// Predefine the radix characters and currency symbols for output:
var CN_ZERO = “零”;
var CN_ONE = “壹”;
var CN_TWO = “贰”;
var CN_THREE = “叁”;
var CN_FOUR = “肆”;
var CN_FIVE = “伍”;
var CN_SIX = “陆”;
var CN_SEVEN = “柒”;
var CN_EIGHT = “捌”;
var CN_NINE = “玖”;
var CN_TEN = “拾”;
var CN_HUNDRED = “佰”;
var CN_THOUSAND = “仟”;
var CN_TEN_THOUSAND = “万”;
var CN_HUNDRED_MILLION = “亿”;
var CN_SYMBOL = “人民币”;
var CN_DOLLAR = “元”;
var CN_TEN_CENT = “角”;
var CN_CENT = “分”;
var CN_INTEGER = “整”;

// Variables:
var integral; // Represent integral part of digit number.
var decimal; // Represent decimal part of digit number.
var outputCharacters; // The output result.
var parts;
var digits, radices, bigRadices, decimals;
var zeroCount;
var i, p, d;
var quotient, modulus;

// Validate input string:
currencyDigits = currencyDigits.toString();
if (currencyDigits == “”) {
alert(“Empty input!”);
return “”;
}
if (currencyDigits.match(/[^,.\d]/) != null) {
alert(“Invalid characters in the input string!”);
return “”;
}
if ((currencyDigits).match(/^((\d{1,3}(,\d{3})*(.((\d{3},)*\d{1,3}))?)|(\d+(.\d+)?))$/) == null) {
alert(“Illegal format of digit number!”);
return “”;
}

// Normalize the format of input digits:
currencyDigits = currencyDigits.replace(/,/g, “”); // Remove comma delimiters.
currencyDigits = currencyDigits.replace(/^0+/, “”); // Trim zeros at the beginning.
// Assert the number is not greater than the maximum number.
if (Number(currencyDigits) > MAXIMUM_NUMBER) {
alert(“Too large a number to convert!”);
return “”;
}
// http://www.knowsky.com/ Process the coversion from currency digits to characters:
// Separate integral and decimal parts before processing coversion:
parts = currencyDigits.split(“.”);
if (parts.length > 1) {
integral = parts[0];
decimal = parts[1];
// Cut down redundant decimal digits that are after the second.
decimal = decimal.substr(0, 2);
}
else {
integral = parts[0];
decimal = “”;
}
// Prepare the characters corresponding to the digits:
digits = new Array(CN_ZERO, CN_ONE, CN_TWO, CN_THREE, CN_FOUR, CN_FIVE, CN_SIX, CN_SEVEN, CN_EIGHT,CN_NINE);
radices = new Array(“”, CN_TEN, CN_HUNDRED, CN_THOUSAND);
bigRadices = new Array(“”, CN_TEN_THOUSAND, CN_HUNDRED_MILLION);
decimals = new Array(CN_TEN_CENT, CN_CENT);
// Start processing:
outputCharacters = “”;
// Process integral part if it is larger than 0:
if (Number(integral) > 0) {
zeroCount = 0;
for (i = 0; i < integral.length; i++) {
p = integral.length – i – 1;
d = integral.substr(i, 1);
quotient = p / 4;
modulus = p % 4;
if (d == “0″) {
zeroCount++;
}
else {
if (zeroCount > 0)
{
outputCharacters += digits[0];
}
zeroCount = 0;
outputCharacters += digits[Number(d)] + radices[modulus];
}
if (modulus == 0 && zeroCount < 4) {


outputCharacters += bigRadices[quotient];
}
}
outputCharacters += CN_DOLLAR;
}
// Process decimal part if there is:
if (decimal != “”) {
for (i = 0; i < decimal.length; i++) {
d = decimal.substr(i, 1);
if (d != “0″) {
outputCharacters += digits[Number(d)] + decimals[i];
}
}
}
// Confirm and return the final output string:
if (outputCharacters == “”) {
outputCharacters = CN_ZERO + CN_DOLLAR;
}
if (decimal == “”) {
outputCharacters += CN_INTEGER;
}
//outputCharacters = CN_SYMBOL + outputCharacters;
outputCharacters = outputCharacters;
return outputCharacters;
}//
var stmp = “”;
function nst_convert(t)
{
if(t.value==stmp) return;//如果等于上次输入则返回
var ms = t.value.replace(/[^\d\.]/g,”").replace(/(\.\d{2}).+$/,”$1″).replace(/^0+([1-9])/,”$1″).replace(/^0+$/,”0″);
//replace(/[^\d\.]/g,”")去掉输入当中不是数字和.的字符
//replace(/(\.\d{2}).+$/,”$1″)
//匹配从字符开始的第一个.后面的所有字符,由于没有使用g标记,
//所以只匹配开始第一次 然后用小数点和后两位进行替换以确定数值最后的格式正确 高.
//replace(/^0+([1-9])/,”$1″) 匹配以多个0开头的数值替换为去掉0后的数值做为数字的第一位 也是匹配开始的一次.
//replace(/^0+$/,”0″) 匹配以0开始和结束的多个0为一个0 也就是0000000 输入->转换成一个0
//以下确定输入的为过滤后的合法数字
//alert(ms);
var txt = ms.split(“.”);
//alert(txt[0]);
//如果ms值不小数点存在则txt[0]=小数点前的值否则等于ms
//regexp:/\d{4}(,|$)/ 匹配四位数字和,的集合或者四位数字和字符结尾的集合
while(/\d{4}(,|$)/.test(txt[0]))//如果为txt[0]=4123
txt[0] = txt[0].replace(/(\d)(\d{3}(,|$))/,”$1,$2″);
//txt[0].replace(/(\d)(\d{3}(,|$))/,”$1,$2″)是将txt[0]进行替换后再赋给它
//regexp:/(\d)(\d{3}(,|$))/ 将四个数字份为两组第一个数字为第一位,后三位和其他结尾为每二位
//并替换成 第一位,第二位 注意 ,的使用很好. 也就是将4123先替换成4,123
//由于此表达式默认采用贪婪匹配所以从数值后向前匹配再通过循环进行再匹配替换从而可以将
//12345678分成你想要的123,456,78 楼主彩用(,|$)很精典,因为它略去了第二次匹配时的,问题
t.value = stmp = txt[0]+(txt.length>1?”.”+txt[1]:”");
//最终赋值到输入框中
//如果有小数点则加上并购成最终数字否则显示替换后的txt[0]
bbb.value = convertCurrency(ms-0);
//将ms转换为数字送到number2num1去转换
}

/**********
简单的实时时间显示.
<body onload=”startclock()”>
<form name=”clock”>
<script language=”JavaScript”>
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;}
function startclock () {
stopclock();
showtime();}
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = now.getYear()+”年”+(now.getMonth()+1)+”月”+now.getDate()+”日” +((hours >= 12) ? ” 下午 ” : ” 上午 ” )
timeValue += ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? “:0″ : “:”) + minutes
timeValue += ((seconds < 10) ? “:0″ : “:”) + seconds
document.clock.thetime.value = timeValue;
timerID = setTimeout(“showtime()”,1000);
timerRunning = true;}
</script>
<input name=”thetime” style=”font-size:9pt;color:#000000;border:1px solid #FFFFFF;” size=”28″>
</form>
*/




/* pengpeng滚动组件 */
/*
组件注意地方:滚动的部分高度或宽度要高于滚动框架的高度或宽度。调用方式放在Html架构代码下方。
关于w_demo的问题,由于横向滚动的时候需要调整整体的宽度,所以要多套一层框架。
<script language=”JavaScript” type=”text/javascript” src=”ppRoll.js”></script>
(上下)
<div id=”demo”>
<div id=”demo1″>
滚动主题
</div>
<div id=”demo2″>
</div>
</div>
(左右)
<div id=”demo”>
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td id=”demo1″>滚动内容(注意横向滚动内容的东西里一定要有宽度,比如嵌入一table,一定要让它有宽度)</td>
<td id=”demo2″></td>
</tr>
</table>
</div>
//调用方式
<script type=”text/javascript”>
var ppRoll = new ppRoll({
speed:60, //速度
demo:”demo”, //外框架div
demo1:”demo1″, //滚动主体div
demo2:”demo2″, //复制的div
objStr:”ppRoll”, //创建的对象名
width:”192px”, //外框架demo的宽度
height:”360px”, //外框架demo的高度
direction:”top” //滚动方向,可选值:top、down、left、right
});
</script>
*/
function ppRoll(a)
{
this.myA = a;
this.myA.IsPlay = 1;
this.$(a.demo).style.overflow = “hidden”;
this.$(a.demo).style.width = a.width;
this.$(a.demo).style.height = a.height;
this.$(a.demo2).innerHTML=this.$(a.demo1).innerHTML;
this.$(a.demo).scrollTop=this.$(a.demo).scrollHeight;
this.Marquee();
this.$(a.demo).onmouseover=function() {eval(a.objStr+”.clearIntervalpp();”);}
this.$(a.demo).onmouseout=function() {eval(a.objStr+”.setTimeoutpp();”)}
}
ppRoll.prototype.$ = function(Id)
{
return document.getElementById(Id);
}
ppRoll.prototype.getV = function(){
alert(this.$(this.myA.demo2).offsetWidth-this.$(this.myA.demo).scrollLeft);
alert(this.$(this.myA.demo2).offsetWidth);
alert(this.$(this.myA.demo).scrollLeft);}
ppRoll.prototype.Marquee = function()
{
this.MyMar=setTimeout(this.myA.objStr+”.Marquee();”,this.myA.speed);
if(this.myA.IsPlay == 1)
{
//向上滚动
if(this.myA.direction == “top”)
{
if(this.$(this.myA.demo).scrollTop>=this.$(this.myA.demo2).offsetHeight)
this.$(this.myA.demo).scrollTop-=this.$(this.myA.demo2).offsetHeight;
else{
this.$(this.myA.demo).scrollTop++;
}
}
//向下滚动
if(this.myA.direction == “down”)
{
if(this.$(this.myA.demo1).offsetTop-this.$(this.myA.demo).scrollTop>=0)
this.$(this.myA.demo).scrollTop+=this.$(this.myA.demo2).offsetHeight;
else{
this.$(this.myA.demo).scrollTop–;
}
}
//向左滚动
if(this.myA.direction == “left”)
{
if(this.$(this.myA.demo2).offsetWidth-this.$(this.myA.demo).scrollLeft<=0)
this.$(this.myA.demo).scrollLeft-=this.$(this.myA.demo1).offsetWidth;
else{
this.$(this.myA.demo).scrollLeft++;
}
}
//向右滚动
if(this.myA.direction == “right”)
{
if(this.$(this.myA.demo).scrollLeft<=0)
this.$(this.myA.demo).scrollLeft+=this.$(this.myA.demo2).offsetWidth;
else{
this.$(this.myA.demo).scrollLeft–;
}
}

}
}
ppRoll.prototype.clearIntervalpp = function()
{
this.myA.IsPlay = 0;
}
ppRoll.prototype.setTimeoutpp = function()
{
this.myA.IsPlay = 1;
}


/**************
*双击鼠标滚动屏幕的代码.(兼容IE和FF)
*用法:直接嵌入js,就可以用了。
**************/
var scroll_currentpos,scroll_timer;
function scroll_initialize()
{
scroll_timer=setInterval (“scrollwindow ()”,30);
}
function scroll_sc()
{
clearInterval(scroll_timer);
}
function scrollwindow()
{
scroll_currentpos=document.body.scrollTop;
window.scroll(0,++scroll_currentpos);
if (scroll_currentpos !=document.body.scrollTop)
scroll_sc();
}
document.onmousedown=scroll_sc
document.ondblclick=scroll_initialize


/**************
网页中常用的iframe分割.
经常我们看到由左,分割线,和右3部分组成的网站。
其实不难,分割线也是一个iframe,然后在里面写入下面的脚本 就可以了。
用法:
http://www.cssrain.cn/demo/2/iframe/iframe.rar
**************/
function switchSysBar(){
if (parent.document.getElementById(‘attachucp’).cols==”160,10,*”){
document.getElementById(‘leftbar’).style.display=”";
parent.document.getElementById(‘attachucp’).cols=”0,10,*”;
}
else{
parent.document.getElementById(‘attachucp’).cols=”160,10,*”;
document.getElementById(‘leftbar’).style.display=”none”
}
}
function c_load(){
if (parent.document.getElementById(‘attachucp’).cols==”0,10,*”){
document.getElementById(‘leftbar’).style.display=”";
}
}




/**************
根据年和月取当月的最后一天.(也就是当月有多少天)
用法:
var a =getLastDay(2008,5);
alert(a); // 31
**************/
function getLastDay(year,month)
{
//取年
var new_year = year;
//取到下一个月的第一天,注意这里传入的month是从1~12
var new_month = month++;
//如果当前是12月,则转至下一年
if(month>12)
{
new_month -=12;
new_year++;
}
var new_date = new Date(new_year,new_month,1);
return (new Date(new_date.getTime()-1000*60*60*24)).getDate();
}




/**************
*获取上一页的来源。
*注意此方法在本地上测试是为空。
必须放到服务器上,才有用。
**************/
function check_referrer(){
var url=document.referrer; //document.referrer是上一页的来源
var p=url.toLowerCase().indexOf(“cssrain.cn”);
if(p>=0){
}else{
}
}



/**************
创建用于ajax技术的 XMLHttpRequest对象。
用法:
try{
createXMLHttpRequest();
xmlHttp_siteTotal.open(“POST”, url);
xmlHttp_siteTotal.send(xml);
}catch(e) {
}
**************/
var xmlHttp_siteTotal;
function createXMLHttpRequest() {
if(window.XMLHttpRequest) {
xmlHttp_siteTotal = new XMLHttpRequest();
}else if(window.ActiveXObject) {
xmlHttp_siteTotal = new ActiveXObject(“Microsoft.XMLHTTP”);
}
}



/*
或其显示的高度和宽度:
必须等页面加载完后,才能获取。 onload后、
*/
// 获取显示高度
function getViewportHeight() {
if (window.innerHeight!=window.undefined) return window.innerHeight;
if (document.compatMode==’CSS1Compat’) return document.documentElement.clientHeight;
if (document.body) return document.body.clientHeight;
return window.undefined;
}
// 获取显示宽度
function getViewportWidth() {
if (window.innerWidth!=window.undefined) return window.innerWidth;
if (document.compatMode==’CSS1Compat’) return document.documentElement.clientWidth;
if (document.body) return document.body.clientWidth;
return window.undefined;
}


/*
对表单中 textarea 中的空格 和 换行处理。
*/
function convertToHtml(str)
{
var re;
re = / /g;
str = str.replace(re,” “);
re = /\r\n/g;
str = str.replace(re,”<br>”);
return str;
}
function makeToHtml(formName)
{
var form;
form = eval(formName);
for(i=0;i<form.elements.length;i++)
if(form.elements[i].type==”textarea”)
{
form.elements[i].value = convertToHtml(form.elements[i].value);
}
}


/*
得到Form数据,以 & 号 拼接起来。
在ajax传递数据中,经常用到这个方法。
用法:
<form id=”cs”>
<input type=”text” name=”aa” value=”aa”/>
<input type=”text” name=”bb” value=”bb”/>
<textarea name=”cc”>cc</textarea>
<input type=”button” value=”test” name=”btn” onclick=”alert( formdata(‘cs’) )” />
</form>
*/
function formdata(formN){
var str=”"
for(i=0;i<document.forms[formN].elements.length;i++){
if(document.forms[formN].elements[i].type!=”button”)
{ //这里可以根据需求,来判断那些类型不要
var e = document.forms[formN].elements[i];
str+=e.name+”=”+e.value+”&”
}
}
str=str+”date=”+new Date().getTime();
return str;
}


/*
字符串连接操作类
类似java里的。
用法:
var str=new StringBuilder();
str.append(“my “).append(“name “).append(“is “).append(“cssrain! “);
alert( str.toString() );
*/
function StringBuilder(sString){
this.length=0;
this.append=function(sString){
this.length+=(this._parts[this._current++]=String(sString)).length;
this._string=null;
return this;
}
this.toString=function(){
if(this._string!=null)
return this._string;
var s=this._parts.join(“”);
this._parts=[s];
this._current=1;
return this._string=s;
}
this._current=0;
this._parts=[];
this._string=null;
if(sString!=null)
this.append(sString);
}


/*
//判断两个object的值是不是相同
用法:
var a=new Object();
a["1"]=”1″
a["2"]=”2″
var b=new Object();
b["1"]=”1″
b["2"]=”2″
var c=new Object();
c["1"]=”2″
c["2"]=”3″
alert(a.compare(b))
alert(a.compare(c))
*/
function Object.prototype.compare(obj){
for(elements in this){
if(this[elements] != obj[elements])
return false
}
return true
}

/*
//得到选中的多选框值的Array
用法:
window.onload = function(){
var a = document.getElementsByName(“a”);
var get_a = getCheckBoxArray(a);
alert(get_a + ” | ” + get_a[1] )
}
<input type=”checkbox” value=”1″ name=”a” checked/>
<input type=”checkbox” value=”2″ name=”a” />
<input type=”checkbox” value=”3″ name=”a” checked/>
*/
function getCheckBoxArray(element){
var values = new Array();
if(null == element){
//alert(“no data!”);
}else if(null == element.length){
if(element.checked){
values.push(element.value);
}
}else{
for(i=0; i<element.length; i++){
if(element[i].checked){
values.push(element[i].value);
}
}
}
return values;
}

window.name和JSONP的跨域实现(jQuery)【推荐】

1,window.name
原理:
name 在浏览器环境中是一个全局/window对象的属性,且当在 iframe 中加载新页面时,name 的属性值依旧保持不变。
但 此时 name 属性仅对相同域名的 iframe 可访问 ,所以第二次加载时需要加载本地的文件(空文件也可),把name引到本地来使用。
当然iframe的name使用完后,应该把iframe删除(涉及动态创建iframe和删除iframe)。请看例子2。


本地端:
function sendData(){
var state = 0;
var $iframe = $(“#iframeId”);
$iframe.bind(‘load’, function(){
if(state === 1){
var data = $(this)[0].contentWindow.name;//iframe的src已经转到同域,所以可以访问iframe的name了.即:实现了跨域.
$(“#oldFish”).html( “你获取的数据是:”+data );
}else if(state === 0){
state = 1;
$(this)[0].contentWindow.location = “none.html”;//$(this)[0].contentWindow相当于iframe的window,再次触发iframe的onload事件
}
});
$iframe.attr(“src”,”http://www.cssrain.cn/test.html“);//第一次触发iframe的onload事件。
}
sendData();



远程访问端:
window.name = “CssRain”;



源文件下载:
http://www.cssrain.cn/demo/windowname.rar


一个简单的插件:
jQuery.getWindowName = function(url,callback){
if(!url || typeof url !== ’string’){return;}
url += (url.indexOf(‘?’) > 0 ? ‘&’ : ‘?’) + ‘remote=’+(+new Date());
var frame = $(‘<iframe style=”display:none;”></iframe>’).appendTo(“body”);
var state = 0;
frame.load(function(){
if(state === 0){
state = 1;
frame[0].contentWindow.location = “none.html”;
}else{
var data = frame[0].contentWindow.name;
frame.remove();
if(callback && typeof callback === ‘function’){
callback(data);
}
}
}).attr(“src”,url);
};


调用方法:
$.getWindowName(“http://cssrain.cn/test.html“,function(data){
alert(data);
});


2,JSONP

function jsonp(url,callback,name, query)
{
if (url.indexOf(“?”) > -1)
url += “&jsonp=”
else
url += “?jsonp=”
url += name + “&”;
if (query)
url += encodeURIComponent(query) + “&”;
url += new Date().getTime().toString(); // prevent caching

var script = document.createElement(“script”);
script.setAttribute(“src”,url);
script.setAttribute(“type”,”text/javascript”);
document.body.appendChild(script);
}

function callbackFunction(Result)
{
alert(Result.x + ” ” + Result.y) ;
}


调用jsonp函数,去服务器请求,地址此时是这样:
http://someserver.com/mypage.aspx?jsonp=callbackFunction

如果服务器想返回一个:
{ “x”: 10, “y”: 15} 这样的数据。

那么可以利用后台语言获取jsonp的值,然后拼接返回,代码如下:
string Callback = Request.QueryString["jsonp"];
Response.Write(Callback + “( {\”x\”:10 , \”y\”:15} );”);

前台接收的数据是:
callbackFunction( { “x”: 10, “y”: 15} );


这个数据正好执行了 先前 定义好的函数:
function callbackFunction(Result)
{
alert(Result.x + ” ” + Result.y) ;
}


关于jsonp的文章:
http://www.west-wind.com/Weblog/posts/107136.aspx

Javascript中最常用的55个经典技巧

1. oncontextmenu=”window.event.returnValue=false” 将彻底屏蔽鼠标右键
<table border oncontextmenu=return(false)> <td>no </table> 可用于Table

2. <body onselectstart=”return false”> 取消选取、防止复制

3. onpaste=”return false” 不准粘贴

4. oncopy=”return false;” oncut=”return false;” 防止复制

5. <link rel=”Shortcut Icon” href=”favicon.ico”> IE地址栏前换成自己的图标

6. <link rel=”Bookmark” href=”favicon.ico”> 可以在收藏夹中显示出你的图标


7. <input style=”ime-mode:disabled”> 关闭输入法


8. 永远都会带着框架
<script language=”JavaScript”> <!–
if (window == top)top.location.href = “frames.htm”; //frames.htm为框架网页
// –> </script>


9. 防止被人frame
<SCRIPT LANGUAGE=JAVASCRIPT> <!–
if (top.location != self.location)top.location=self.location;
// –> </SCRIPT>


10. 网页将不能被另存为
<noscript> <*** src=”/*.html>”; </***> </noscript>


11. <input type=button value=”/查看网页源代码
onclick=”window.location = “view-source:”+ “http://www.pconline.com.cn”">
12.删除时确认
<a href=”"javascript :if(confirm(“确实要删除吗?”))location=”boos.asp?&areyou=删除&page=1″”>删除 </a>


13. 取得控件的绝对位置
//Javascript
<script language=”Javascript”>
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert(“top=”+t+”/nleft=”+l);
}
</script>
//VBScript
<script language=”VBScript”> <!–
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName <>”BODY”
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
wend
msgbox “top=”&t&chr(13)&”left=”&l,64,”得到控件的位置”
end function
–> </script>


14. 光标是停在文本框文字的最后
<script language=”javascript”>
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart(“character”,e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value=”123″ onfocus=”cc()”>


15. 判断上一页的来源
javascript :
document.referrer


16. 最小化、最大化、关闭窗口
<object id=hh1 classid=”clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″>
<param name=”Command” value=”Minimize”> </object>
<object id=hh2 classid=”clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″>
<param name=”Command” value=”Maximize”> </object>
<OBJECT id=hh3 classid=”clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11″>
<PARAM NAME=”Command” value=”/Close”> </OBJECT>
<input type=button value=”/最小化 onclick=hh1.Click()>
<input type=button value=”/demoblog/最大化 onclick=hh2.Click()>
<input type=button value=关闭 onclick=hh3.Click()>
本例适用于IE


17.屏蔽功能键Shift,Alt,Ctrl
<script>
function look(){
if(event.shiftKey)
alert(“禁止按Shift键!”); //可以换成ALT CTRL
}
document.onkeydown=look;
</script>


18. 网页不会被缓存
<META HTTP-EQUIV=”pragma” CONTENT=”no-cache”>
<META HTTP-EQUIV=”Cache-Control” CONTENT=”no-cache, must-revalidate”>
<META HTTP-EQUIV=”expires” CONTENT=”Wed, 26 Feb 1997 08:21:57 GMT”>
或者 <META HTTP-EQUIV=”expires” CONTENT=”0″>


19.怎样让表单没有凹凸感?
<input type=text style=”"”border:1 solid #000000″>

<input type=text style=”border-left:none; border-right:none; border-top:none; border-bottom:
1 solid #000000″> </textarea>


20. <div> <span>& <layer>的区别?
<div>(division)用来定义大段的页面元素,会产生转行
<span>用来定义同一行内的元素,跟 <div>的唯一区别是不产生转行
<layer>是ns的标记,ie不支持,相当于 <div>


21.让弹出窗口总是在最上面:
<body onblur=”this.focus();”>


22.不要滚动条?
让竖条没有:
<body style=”overflow:scroll;overflow-y:hidden”>
</body>
让横条没有:
<body style=”overflow:scroll;overflow-x:hidden”>
</body>
两个都去掉?更简单了
<body scroll=”no”>
</body>


23.怎样去掉图片链接点击后,图片周围的虚线?
<a href=”#” onFocus=”this.blur()”> <img src=”/logo.jpg” border=0> </a>


24.电子邮件处理提交表单
<form name=”form1″ method=”post” action=mailto:****@***.com
enctype=”text/plain”>
<input type=submit>
</form>


25.在打开的子窗口刷新父窗口的代码里如何写?
window.opener.location.reload()


26.如何设定打开页面的大小
<body onload=”top.resizeTo(300,200);”>
打开页面的位置 <body onload=”top.moveBy(300,200);”>


27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
<STYLE>
body
{background-image:url(/logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</STYLE>


28. 检查一段字符串是否全由数字组成
<script language=”Javascript”> <!–
function checkNum(str){return str.match(//D/)==null}
alert(checkNum(“1232142141″))
alert(checkNum(“123214214a1″))
// –> </script>


29. 获得一个窗口的大小
document.body.clientWidth; document.body.clientHeight


30. 怎么判断是否是字符
if (/[^/x00-/xff]/g.test(s)) alert(“含有汉字”);
else alert(“全是字符”);


31.TEXTAREA自适应文字行数的多少
<textarea rows=1 name=s1 cols=27 onpropertychange
=”this.style.posHeight=this.scrollHeight”>
</textarea>


32. 日期减去天数等于第二个日期
<script language=Javascript>
function cc(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a – dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + “年” + (a.getMonth() + 1) + “月” + a.getDate() + “日”)
}
cc(“12/23/2002″,2)
</script>


33. 选择了哪一个Radio
<HTML> <script language=”vbscript”>
function checkme()
for each ob in radio1
if ob.checked then
window.alert ob.value
next
end function
</script> <BODY>
<INPUT name=”radio1″ type=”radio” value=”/style” checked>Style
<INPUT name=”radio1″ type=”radio” value=”/demoblog/barcode”>Barcode
<INPUT type=”button” value=”check” onclick=”checkme()”>
</BODY> </HTML>


34.脚本永不出错
<SCRIPT LANGUAGE=”JavaScript”>
<!– Hide
function killErrors() {
return true;
}
window.onerror = killErrors;
// –>
</SCRIPT>


35.ENTER键可以让光标移到下一个输入框
<input onkeydown=”if(event.keyCode==13)event.keyCode=9″>


36. 检测某个网站的链接速度:
把如下代码加入 <body>区域中:
<script language=Javascript>
tim=1
setInterval(“tim++”,100)
b=1
var autourl=new Array()
autourl[1]=1000){this.resized=true;this.style.width=1000;}” align=absMiddle border=0>www.njcatv.net”
autourl[2]=”javacool.3322.net”
autourl[3]=1000){this.resized=true;this.style.width=1000;}” align=absMiddle border=0>www.sina.com.cn”
autourl[4]=”www.nuaa.edu.cn”
autourl[5]=1000){this.resized=true;this.style.width=1000;}” align=absMiddle border=0>www.cctv.com”
function butt(){
***(” <form name=autof>”)
for(var i=1;i <autourl.length;i++)
***(” <input type=text name=txt”+i+” size=10 value=”/测试中……> =》 <input type=text
name=url”+i+” size=40> =》 <input type=button value=”/demoblog/GO
onclick=window.open(this.form.url”+i+”.value)> <br>”)
***(” <input type=submit value=刷新> </form>”)
}
butt()
function auto(url){
document.forms[0]["url"+b].value=url
if(tim>200)
{document.forms[0]["txt"+b].value=”/链接超时”}
else
{document.forms[0]["txt"+b].value=”/demoblog/时间”+tim/10+”秒”}
b++
}
function run(){for(var i=1;i <autourl.length;i++)***(” <img src=http://”+autourl+”/”+Math.random()+” width=1 height=1
onerror=auto(“http://”+autourl+”")>”)}
run() </script>


37. 各种样式的光标
auto :标准光标
default :标准箭头
hand :手形光标
wait :等待光标
text :I形光标
vertical-text :水平I形光标
no-drop :不可拖动光标
not-allowed :无效光标
help :?帮助光标
all-scroll :三角方向标
move :移动标
crosshair :十字标
e-resize
n-resize
nw-resize
w-resize
s-resize
se-resize
sw-resize


38.页面进入和退出的特效
进入页面 <meta http-equiv=”Page-Enter” content=”revealTrans(duration=x, transition=y)”>
推出页面 <meta http-equiv=”Page-Exit” content=”revealTrans(duration=x, transition=y)”>
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间,以秒为单位。transition表示使用哪种特效,取值为1-23:
  0 矩形缩小
  1 矩形扩大
  2 圆形缩小
  3 圆形扩大
  4 下到上刷新
  5 上到下刷新
  6 左到右刷新
  7 右到左刷新
  8 竖百叶窗
  9 横百叶窗
  10 错位横百叶窗
  11 错位竖百叶窗
  12 点扩散
  13 左右到中间刷新
  14 中间到左右刷新
  15 中间到上下
  16 上下到中间
  17 右下到左上
  18 右上到左下
  19 左上到右下
  20 左下到右上
  21 横条
  22 竖条
  23 以上22种随机选择一种


39.在规定时间内跳转
<META http-equiv=V=”REFRESH” content=”5;URL=http://www.51js.com”>


40.网页是否被检索
<meta name=”ROBOTS” content=”属性值”>
  其中属性值有以下一些:
  属性值为”all”: 文件将被检索,且页上链接可被查询;
  属性值为”none”: 文件不被检索,而且不查询页上的链接;
  属性值为”index”: 文件将被检索;
  属性值为”follow”: 查询页上的链接;
  属性值为”noindex”: 文件不检索,但可被查询链接;
  属性值为”nofollow”: 文件不被检索,但可查询页上的链接。


41、email地址的分割
把如下代码加入 <body>区域中
<a href=”mailto:webmaster@sina.com”>webmaster@sina.com </a>


42、流动边框效果的表格
把如下代码加入 <body>区域中
<SCRIPT>
l=Array(6,7,8,9,’a',’b',’b',’c',’d',’e',’f')
Nx=5;Ny=35
t=” <table border=0 cellspacing=0 cellpadding=0 height=”+((Nx+2)*16)+”> <tr>”
for(x=Nx;x <Nx+Ny;x++)
t+=” <td width=16 id=a_mo”+x+”>  </td>”
t+=” </tr> <tr> <td width=10 id=a_mo”+(Nx-1)+”>  </td> <td colspan=”+(Ny-2)+” rowspan=”+(Nx)+”>  </td> <td width=16 id=a_mo”+(Nx+Ny)+”> </td> </tr>”
for(x=2;x <=Nx;x++)
t+=” <tr> <td width=16 id=a_mo”+(Nx-x)+”>  </td> <td width=16 id=a_mo”+(Ny+Nx+x-1)+”>  </td> </tr>”
t+=” <tr>”
for(x=Ny;x>0;x–)
t+=” <td width=16 id=a_mo”+(x+Nx*2+Ny-1)+”>  </td>”
***(t+” </tr> </table>”)
var N=Nx*2+Ny*2
function f1(y){
for(i=0;i <N;i++){
c=(i+y)%20;if(c>10)c=20-c
document.all["a_mo"+(i)].bgColor=”"”"#0000″+l[c]+l[c]+”‘”}
y++
setTimeout(‘f1(‘+y+’)',’1′)}
f1(1)
</SCRIPT>

43、JavaScript主页弹出窗口技巧
窗口中间弹出
<script>
window.open(“http://www.cctv.com”,”",”width=400,height=240,top=”+(screen.availHeight-240)/2+”,left=”+(screen.availWidth-400)/2);
</script>
============
<html>
<head>
<script language=”LiveScript”>
function WinOpen() {
msg=open(“”,”DisplayWindow”,”toolbar=no,directories=no,menubar=no”);
msg.***(” <HEAD> <TITLE>哈 罗! </TITLE> </HEAD>”);
msg.***(” <CENTER> <H1>酷 毙 了! </H1> <h2>这 是 <B>JavaScript </B>所 开 的 视 窗! </h2> </CENTER>”);
}
</script>
</head>
<body>
<form>
<input type=”button” name=”Button1″ value=”Push me” onclick=”WinOpen()”>
</form>
</body>
</html>
==============
一、在下面的代码中,你只要单击打开一个窗口,即可链接到赛迪网。而当你想关闭时,只要单击一下即可关闭刚才打开的窗口。
  代码如下:
   <SCRIPT language=”JavaScript”>
   <!–
  function openclk() {
  another=open(‘1000){this.resized=true;this.style.width=1000;}” align=absMiddle border=0>http://www.ccidnet.com’,’NewWindow’);
  }
  function closeclk() {
  another.close();
  }
  //–>
   </SCRIPT>
   <FORM>
   <INPUT TYPE=”BUTTON” NAME=”open” value=”/打开一个窗口” onClick=”openclk()”>
   <BR>
   <INPUT TYPE=”BUTTON” NAME=”close” value=”/demoblog/关闭这个窗口” onClick=”closeclk()”>
   </FORM>
  二、上面的代码也太静了,为何不来点动感呢?如果能给页面来个降落效果那该多好啊!
  代码如下:
   <script>
  function drop(n) {
  if(self.moveBy){
  self.moveBy (0,-900);
  for(i = n; i > 0; i–){
  self.moveBy(0,3);
  }
  for(j = 8; j > 0; j–){
  self.moveBy(0,j);
  self.moveBy(j,0);
  self.moveBy(0,-j);
  self.moveBy(-j,0);
  }
  }
  }
   </script>
   <body onLoad=”drop(300)”>
  三、讨厌很多网站总是按照默认窗口打开,如果你能随心所欲控制打开的窗口那该多好。
  代码如下:
   <SCRIPT LANGUAGE=”JavaScript”>
   <!– Begin
  function popupPage(l, t, w, h) {
  var windowprops = “location=no,scrollbars=no,menubars=no,toolbars=no,resizable=yes” +
  ”,left=” + l + “,top=” + t + “,width=” + w + “,height=” + h;
  var URL = “http://www.80cn.com”;
  popup = window.open(URL,”MenuPopup”,windowprops);
  }
  // End –>
   </script>
   <table>
   <tr>
   <td>
   <form name=popupform>
   <pre>
  打开页面的参数 <br>
  离开左边的距离: <input type=text name=left size=2 maxlength=4> pixels
  离开右边的距离: <input type=text name=top size=2 maxlength=4> pixels
  窗口的宽度: <input type=text name=width size=2 maxlength=4> pixels
  窗口的高度: <input type=text name=height size=2 maxlength=4> pixels
   </pre>
   <center>
   <input type=button value=”打开这个窗口!” onClick=”popupPage(this.form.left.value, this.form.top.value, this.form.width.value,
this.form.height.value)”>
   </center>
   </form>
   </td>
   </tr>
   </table>你只要在相对应的对话框中输入一个数值即可,将要打开的页面的窗口控制得很好。
44、页面的打开移动
把如下代码加入 <body>区域中
<SCRIPT LANGUAGE=”JavaScript”>
<!– Begin
for (t = 2; t > 0; t–) {
for (x = 20; x > 0; x–) {
for (y = 10; y > 0; y–) {
parent.moveBy(0,-x);
}
}
for (x = 20; x > 0; x–) {
for (y = 10; y > 0; y–) {
parent.moveBy(0,x);
}
}
for (x = 20; x > 0; x–) {
for (y = 10; y > 0; y–) {
parent.moveBy(x,0);
}
}
for (x = 20; x > 0; x–) {
for (y = 10; y > 0; y–) {
parent.moveBy(-x,0);
}
}
}
//–>
// End –>
</script>


45、显示个人客户端机器的日期和时间
<script language=”LiveScript”>
<!– Hiding
today = new Date()
***(“现 在 时 间 是: “,today.getHours(),”:”,today.getMinutes())
***(” <br>今 天 日 期 为: “, today.getMonth()+1,”/”,today.getDate(),”/”,today.getYear());
// end hiding contents –>
</script>


46、自动的为你每次产生最後修改的日期了:
<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
<script language=”LiveScript”>
<!– hide script from old browsers
***(document.lastModified)
// end hiding contents –>
</script>
</body>
</html>


47、不能为空和邮件地址的约束:
<html>
<head>
<script language=”JavaScript”>
<!– Hide
function test1(form) {
if (form.text1.value == “”)
alert(“您 没 写 上 任 何 东 西, 请 再 输 入 一 次 !”)
else {
alert(“嗨 “+form.text1.value+”! 您 已 输 入 完 成 !”);
}
}
function test2(form) {
if (form.text2.value == “” ||
form.text2.value.indexOf(‘@’, 0) == -1)
alert(“这 不 是 正 确 的 e-mail address! 请 再 输 入 一 次 !”);
else alert(“您 已 输 入 完 成 !”);
}
// –>
</script>
</head>
<body>
<form name=”first”>
Enter your name: <br>
<input type=”text” name=”text1″>
<input type=”button” name=”button1″ value=”输 入 测 试” onClick=”test1(this.form)”>
<P>
Enter your e-mail address: <br>
<input type=”text” name=”text2″>
<input type=”button” name=”button2″ value=”输 入 测 试” onClick=”test2(this.form)”>
</body>


48、跑马灯
<html>
<head>
<script language=”JavaScript”>
<!– Hide
var scrtxt=”怎麽样 ! 很酷吧 ! 您也可以试试.”+”Here goes your message the visitors to your
page will “+”look at for hours in pure fascination…”;
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scroll() {
pos++;
var scroller=”";
if (pos==lentxt) {
pos=1-width;
}
if (pos <0) {
for (var i=1; i <=Math.abs(pos); i++) {
scroller=scroller+” “;}
scroller=scroller+scrtxt.substring(0,width-i+1);
}
else {
scroller=scroller+scrtxt.substring(pos,width+pos);
}
window.status = scroller;
setTimeout(“scroll()”,150);
}
//–>
</script>
</head>
<body onLoad=”scroll();return true;”>
这里可显示您的网页 !
</body>
</html>


49、在网页中用按钮来控制前页,后页和主页的显示。
<html>
<body>
<FORM NAME=”buttonbar”>
<INPUT TYPE=”button” VALUE=”Back” onClick=”history.back()”>
<INPUT TYPE=”button” VALUE=”JS- Home” onClick=”location=’script.html’”>
<INPUT TYPE=”button” VALUE=”Next” onCLick=”history.forward()”>
</FORM>
</body>
</html>
50、查看某网址的源代码
把如下代码加入 <body>区域中
<SCRIPT>
function add()
{
var ress=document.forms[0].luxiaoqing.value
window.location=”view-source:”+ress;
}
</SCRIPT>
输入要查看源代码的URL地址:
<FORM> <input type=”text” name=”luxiaoqing” size=40 value=”http://”> </FORM>
<FORM> <br>
<INPUT type=”button” value=”查看源代码” onClick=add()>
</FORM>


51、title显示日期
把如下代码加入 <body>区域中:
<script language=”JavaScript1.2″>
<!–hide
var isnMonth = new
Array(“1月”,”2月”,”3月”,”4月”,”5月”,”6月”,”7月”,”8月”,”9月”,”10月”,”11月”,”12月”);
var isnDay = new
Array(“星期日”,”星期一”,”星期二”,”星期三”,”星期四”,”星期五”,”星期六”,”星期日”);
today = new Date () ;
Year=today.getYear();
Date=today.getDate();
if (document.all)
document.title=”今天是: “+Year+”年”+isnMonth[today.getMonth()]+Date+”日”+isnDay[today.getDay()]
//–hide–>
</script>


52、显示所有链接
把如下代码加入 <body>区域中
<script language=”JavaScript1.2″>
<!–
function extractlinks(){
var links=document.all.tags(“A”)
var total=links.length
var win2=window.open(“”,”",”menubar,scrollbars,toolbar”)
win2.***(” <font size=’2′>一共有”+total+”个连接 </font> <br>”)
for (i=0;i <total;i++){
win2.***(” <font size=’2′>”+links[i].outerHTML+” </font> <br>”)
}
}
//–>
</script>
<input type=”button” onClick=”extractlinks()” value=”显示所有的连接”>


53、回车键换行
把如下代码加入 <body>区域中
<script type=”text/javascript”>
function handleEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ?
event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
}
else
return true;
}
</script>
<form>
<input type=”text” onkeypress=”return handleEnter(this, event)”> <br>
<input type=”text” onkeypress=”return handleEnter(this, event)”> <br>
<textarea>回车换行


54、确认后提交
把如下代码加入 <body>区域中
<SCRIPT LANGUAGE=”JavaScript”>
<!–
function msg(){
if (confirm(“你确认要提交嘛!”))
document.lnman.submit()
}
//–>
</SCRIPT>
<form name=”lnman” method=”post” action=”">
<p>
<input type=”text” name=”textfield” value=”确认后提交”>
</p>
<p>
<input type=”button” name=”Submit” value=”提交” onclick=”msg();”>
</p>
</form>


55、改变表格的内容
把如下代码加入 <body>区域中
<script ***script>
var arr=new Array()
arr[0]=”一一一一一”;
arr[1]=”二二二二二”;
arr[2]=”三三三三三”;
</script>
<select onchange=”zz.cells[this.selectedIndex].innerHTML=arr[this.selectedIndex]“>
<option value=a>改变第一格 </option>
<option value=a>改变第二格 </option>
<option value=a>改变第三格 </option>
</select>
<table id=zz border=1>
<tr height=20>
<td width=150>第一格 </td>
<td width=150>第二格 </td>
<td width=150>第三格 </td>
</tr>
</table>

转载出处:http://blog.csdn.net/java060515/archive/2007/08/09/1733396.aspx

2010-05-21 yy629 (资深程序员)

兼容ie, Firefox, Opera and Safari

Html代码 复制代码

  1. <html>
  2. <head>
  3. <script>
  4. function AddListeners () {
  5. var elemToCheck = document.getElementById (“myDiv”);
  6. if (elemToCheck.addEventListener) { // Firefox, Opera and Safari
  7. elemToCheck.addEventListener (‘DOMAttrModified’, OnAttrModified, false);
  8. } else if (elemToCheck.attachEvent) { // Internet Explorer
  9. elemToCheck.attachEvent (‘onpropertychange’, OnAttrModified);
  10. }
  11. }
  12. function OnAttrModified (event) {
  13. var txt = “”;
  14. if (event.attrChange) {
  15. // Firefox, Safari, Opera
  16. txt += “The element: ” + event.target;
  17. txt += “\nproperty: ” + event.attrName;
  18. txt += “\noriginal value: ” + event.prevValue;
  19. txt += “\n changed to: ” + event.newValue;
  20. } else {
  21. // Internet Explorer
  22. txt += “The element: ” + event.srcElement.tagName;
  23. txt += “\nproperty: ” + event.propertyName;
  24. var elem = event.srcElement;
  25. txt += “\nchanged value: ” + elem.attributes[event.propertyName].value;
  26. }
  27. alert (txt);
  28. }
  29. function ChangeDDD () {
  30. var div = document.getElementById (“myDiv”);
  31. div.setAttribute(“ddd”,”New Attribute”);
  32. }
  33. </script>
  34. </head>
  35. <body onload=“AddListeners ();”>
  36. <button onclick=“ChangeDDD ();”>Change ddd Attribute!</button>
  37. <div id=“myDiv” ddd=“Old Attribute”>
  38. divdivdivdivdivdivdivdiv
  39. </div>
  40. </body>
  41. </html>

来源:http://www.javaeye.com/problems/42763

70个新鲜实用的JavaScript和Ajax技术

http://www.javaeye.com/news/6272

随着互联网的不断发展,网页的制作也充满了活力,开发者使用各种各样的技术使网页变得更加丰富,我们将为你推荐70个新鲜实用的JavaScript和Ajax技术。这是本文的第二部分,第一部分:70个新鲜实用的JavaScript和Ajax技术(上)

8.预览图像:实例和演示

imgPreview是一个jQuery 插件,可以让用户在点击链接前对图像进行预览。 如果图片已经被点击过,当再次悬浮的时候,就会即时出现,因为已经加载过。


用来查看网页中内嵌的照片和图像的完整大小图片,而不需要单独的网页加载。
Fancyzoom主要为用户提供一个简洁实用的图片展示过程。


这是一个不错的JavaScript做的图片展示,不需要使用Flash,可以随便的挑选局部放大,并且还可以分页。



9.文件上传:实例和演示

让您创建一个form,允许用户上传多个文件



FancyUpload是一个采用Flash与Ajax(MooTools)技术实现包含上传进度条的多文件上传组件,类似于SWFUpload。



UploadForm基于ext开发的文件上传组件。可以把多个文件添加到上传队列里面,也可以从队列里面移除不需要的文件,或都清空整个队列。




10.自动填充:实例和演示

一个独立的控件,拥有自动填充功能。

创建一个google推荐的filter,使用自动填充控制。


帮助页面用户的文本框输入, 显示提示信息


11.Lightbox:实例和演示

高可配置性的具有幻灯片功能Javascript库

Sexy Lightbox 2是一个精美的Lightbox克隆,不过它更小巧。 支持显示图片和HTML元素,并且完全兼容HTML, 也就是说它可以显示条目,页面,视频和所有其它你想要显示的东西。


一个jQuery插件,拥有许多强大的功能:自动调整,以适应图像的窗口;一个不错的阴影缩放效果;可通过自定义设置和CSS,内嵌内容显示等……




LightWindow 是一个高度可配置支持任何媒体显示的Lightbox灯箱效果,基于Prototype & script.aculo.us创建。它可以支持任何媒体内容显示,包括Flash, Quicktime, Youtube视频或者是一个外部网页。另外,它还拥有Gallery功能支持,模态窗口可定制的位置和自动调整大小以适合内容。




12.Form:实例和演示

FancyForm是一个基于mootools的强大选择框脚本,它为选择框提供最大的灵活性用来替找HTML原来面貌和功能的表单元素。其使用简单,且支持各大主流浏览器。


本教程可以帮助您在您选择的form上添加css类和默认值。

Form.Check是一个方便你处理客户端表单校验的MooTools插件。


fValidator是一个用于处理表单校验的JavaScript工具。



这个脚本增强了表单元素包括:单选按钮,复选框,文件上传,文本,文本框,图像,还有选择,提交和重置按钮。



13.Table:实例和演示

TableGear将获得的数据存入一个网页,它处理提交的数据都来自于AJAX的调用和传递,并将数据传回应用程序。


这是一个能够将标准Table转换成可排序Grid的JavaScript程序。它能够自动识别每列的数据类型,指定需要排序的列。



DrasticGrid 是一个以Ajax 为基础的可编辑DataGrid


sorttable 是一个js库用来对表格做排序,使用超级简单




14.Worth Checking Out:实例和演示

提供了一个字体的解决方案,你能使用任何字体显示,不管客户端是否安装了这种字体,且不使用Flash。




Starbox 可以帮助你很容易地建立各种各样的星形评分条。它基于prototype 框架,还可以简单地通过定制CSS 样式文件来改变默认和悬停时星星的颜色。


jQuery Alert Dialogs模拟了alert、confirm、prompt的效果,这样在IE上prompt不再出现烦人的阻挡讯息。


这个地图尽可能使用平滑的动态效果和清晰的图像。


这是一个用于让图片产生淡入淡出效果的jQuery插件。

此教程详细的说明了如何使用script.aculo.us来实现改变透明度的效果。



在这个指南中,您将会了解如何添加一些惊人的效果,鼠标悬停和鼠标离开时的效果。

这是一个可定制的jQuery editable plugin。当前它能够将任意不可编辑的标签(span、div、p…等)转换成可编辑的text input、password、textarea、下拉列表(drop-down list)等标签。你可以利用它的editableFactory对象来扩展添加自己所需的input type。




15.Ajax:实例和演示

这个实例可以告诉您如何验证用户名的是否可用。


它是一个jQuery插件,能够将一个页面中的所有链接转换成Ajax加载和提交请求。


Ajax文件上传插件让用户能够很方便地上传多个文件而无需刷新页面。此外,可以使用任何元素(图片,文字,按纽等)来触发文件选择窗口。

一个很炫的MooTools效果:点击任何Fx.Explode的元素,将会关闭屏幕。再次点击,又会奇迹般的重新出现。

了解如何在WordPress中创建这样的效果,当你单击删除文件是,该菜单项将会变为红色然后消失,这里将告诉您如何使用MooTools JavaScript实现这一功能。

10种JavaScript特效实例

  我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预置好的脚本或那种从头开始开发的创建者。这篇文章适合那些打算提高工作效率或不愿意从头开发脚本的人阅读。

这里收集了10种强大的且容易上手的JavaScript特效来改进您的网页站界面,从而得到更多的用户体验。这10种javaScript特效回味你的网站带来意想不到的视觉盛宴,而且安装和使用都比较容易。

1.GreyBox

JavaScript-greybox

  GreyBox允许你以模式窗口的形式运行其它网站(类似于弹出式窗口,但又不运行新的浏览器窗口).如果你的网站上有一些其他网站的导出链接,但你又不想让你的用户离开你的网站或不想让他们打开另一个浏览器窗口的话,这真的是一个很好的解决方案。使用GreyBox 非常简单。

  这里是关于GreyBox的关键页面:下载页面, 说明页面, 实例, 安装,和 高级用法(如果你是JavaScript高手,看完这个页面中的一些技巧说明,你就能扩展它的函数库了)

2.instant.js

JavaScript-instant

  instant.js 特效会为你的照片动态添加类似偏振(Polaroid-like)的效果(将照片倾斜并添加阴影和边框)。现在我们可以使用这个照片特效模拟Photoshop的数码照片处理了。

  这个脚本技术可以用于在你的网站上有很多照片,但又不想一个个手动处理的情况。(也许你会使用批量处理,但那只是建立于单一的动作下的,如调整尺寸、裁剪等…)

3.mooTable

JavaScript-mootable

  mooTable允许你为表格中的数据进行排序(不用刷新页面),利用DOM替代数据库的请求的新式排序方法。使用简单,仅需轻微的配置即可。

  这个脚本库需要mooTools框架的支持,你可以在这里下载。你还可以在论坛中的mootools板块寻找一些创建mooTable的方法,会有很多mootools开发者的反馈。

4.FancyForm

JavaScript-fancyform

  FancyForm可以取代单调乏味的表单控件如单选按钮和复选框。基本的使用仅需两步:(1)在页面中调用JavaScript文件 (2)为你的表单控件指定类名,如复选框指定class=”checked” 或 class=”unchecked”,单选框指定class=”selected” 和 class=”unselected”。非常不显眼的javaScript.

  该脚本需要mootools的支持(版本1.1)

5.image menu

Javascipt-image-menu

  image menu,使用phatfusion开发而成。非常漂亮的横向菜单,当你悬停在某个菜单项上时,图片就会扩展开。

  你可以使用这个技术为照片的隐藏部分使用蒙太奇效果,但当用户将鼠标悬停在上面是就会显示全部。

  该脚本需要mootools的支持(版本1.1)

6.AmberJack: Site Tour Creator

JavaScript-amberjack

  这是一个轻量级的JavaScipt库,允许你为网站添加实施快速游览。允许用户事实的在浏览每个页面的时候查看简短的描述。

  您可以利用这个技术来演示如何让用户使用这个网站,用户只需要点击下一步的按钮,就能了解需要做的每一步。

7.ImageFlow

javascript-imageflow

  灵感来源于iPod的”coverflow”,ImageFlow是一个用来展示图片集合的特效。用户可以拖动下方的滚动条来控制图片的显示。

  用户点击图片以后,会转向到现实清晰大图的网页。

8.ShadowBox.js Media viewer

shadowbox

  ShadowBox是”完全使用JavaScipt编写的跨浏览器、跨平台、代码简洁且文档完整的媒体查看应用程序”(怎么样?一口气说下来这么多优点。)

  ShadowBox区别于其它Model Box(如Lightbox 2)的地方是,它还支持除图片以外的很多其它文件类型,如flash视频、内嵌式youtube视频、Apple.com预告片和网页(这样能让用户不用转到另一个页面就能完成登录、注册)。这是很有价值的脚本。

9.TJPzoom 3 – image magnifier

TJPzoom可以让你将某个高清图片的局部放大显示。按下并拖动鼠标的话,可以改变放大区域的尺寸。

10.mootools Tips

  mootools Tips是mooTools框架的一部分,它可以让你为用户提供一个高度可配置的工具提示,当用户将鼠标悬停在某个链接或图片上时,一些关于这个元素的附加的提示信息就会在屏幕上显示出来。

  一些可以调节的方法:CSS 样式(可以修改默认的黑背景白文字)、渐变速度、工具提示在屏幕上显示的风格、你希望工具提示显示多久。这个脚本需要mootools框架的支持。

英文原文:10 JavaScript Effects to Boost Your Website’s Fanciness Factor
翻译原文:10种JavaScript特效实例让你的网站更吸引人

firefox中用js提交表单

1.document.forms.from.submit();
document.form.sumbit();
document.form.submit.click();
this.form.submit();
以上几种形式的js表单提交在firefox浏览器下是不起作用的
2.必须遵循w3c标准:
1).获得form时应使用getElementById()方法
2).用.submit()方法提交表单
3).button的name/id绝对不能命名为”submit”
4).form中所有的组件(按钮,文本框等)的name/id也不能命名为”submit”

# 当提交按钮的name 或者 id为submit时候,用js 提交表单,表单名.submit()时候会报一个错误,提示对象不支持此属性或办法。
解决方法是修改提交按钮的 name 或者 id 不要与 submit或者action同名即可。
那么,请问为什么 当提交按钮的 name 或者 id为submit或者 action的时候 js提交表单会报错呢?这难道是 一个bug?
高手们请指教。。。。

因为”表单名.submit()提交”这种写法本身就是不符合W3C标准的规定的,在IE下没有报错因为IE支持这种写法,但是如果在FF下就会报错,要写成”document.getElementById(‘form id’).submit()”的?

# 我在项目中发现<input type=”submit”/>与<img src=”123.gif” onclick=”submit();”>
得出的效果截然不同, 谁能告诉我这两着有合不同
我又如何能用图片来替代原有的提交按钮

<input type=”submit” />是说这是一个按钮,它的是一个提交按钮.当点击它时,它会自动将它所在的表单进行提交.