<form name="form1" method="post" action="" onSubmit='submitonce(this)'> ........ function submitonce(theform) { if (document.all||document.getElementById) { for (i=0;i<theform.length;i++) { var tempobj=theform.elements[i]; if(tempobj.type.toLowerCase()=="submit" || tempobj.type.toLowerCase()=="reset") tempobj.disabled=true; } } }
3.关于浮动代码和 documentElement / body 常常有人提问,为什么 漂浮广告 / 对联代码 在 xHTML 1.1 DTD 文件头 / FF 下不能使用 这是因为,按照标准来说,我们看到的窗体的滚动条不应该是 body 的,而是 HTML 的(也就是 document.documentElement 对象) 所以,解决办法是,把以前不标准的代码中, document.body.scrollTop 或者类似的代码变换为 document.documentElement.scrollTop 4.让图片支持缩小放大<script language="JavaScript"> <!-- //改变图片大小 function resizepic(thispic) { if(thispic.width>700) thispic.width=700; } //无级缩放图片大小 function bbimg(o) { var zoom=parseInt(o.style.zoom, 10)||100; zoom+=event.wheelDelta/12; if (zoom>0) o.style.zoom=zoom+'%'; return false; } --> </script> <P align=center><IMG onmousewheel="return bbimg(this)" height=341 src="http://bbs.blueidea.com/images/blue/logo.gif" οnlοad=javascript:resizepic(this) border=0></P>
5。用js来构造邮件地址 如果你的邮件地址是abc@mail.com,那么你可以利用JavaScript编写一段小小的程序:<a href="javascript:navigate('mai' + 'lto:' + 'abc' + '@' + 'mail.com')">给我发信</a>
这样可以巧妙地隐藏你的邮件地址,而且在点击链接的时候弹出Outlook的功能却没有丝毫减少。 6。用js实现代码的COPY操作 [ 可以先修改再运行 ] 7。 用CSS+JS实现用flash做背景 [ 可以先修改再运行 ] 8. JS一些基础的东西 很有用哦location 地址对象 它描述的是某一个窗口对象所打开的地址。要表示当前窗口的地址,只需要使用“location”就行了;若要表示某一个窗口的地址,就使用“<窗口对象>.location”。 注意 属于不同协议或不同主机的两个地址之间不能互相引用对方的 location 对象,这是出于安全性的需要。例如,当前窗口打开的是“www.a.com”下面的某一页,另外一个窗口(对象名为:bWindow)打开的是“www.b.com”的网页。如果在当前窗口使用“bWindow.location”,就会出错:“没有权限”。这个错误是不能用错误处理程序(Event Handler,参阅 onerror 事件)来接收处理的。 属性 protocol 返回地址的协议,取值为 'http:','https:','file:' 等等。 hostname 返回地址的主机名,例如,一个“http://www.microsoft.com/china/”的地址,location.hostname == 'www.microsoft.com'。 port 返回地址的端口号,一般 http 的端口号是 '80'。 host 返回主机名和端口号,如:'www.a.com:8080'。 pathname 返回路径名,如“http://www.a.com/b/c.html”,location.pathname == 'b/c.html'。 hash 返回“#”以及以后的内容,如“http://www.a.com/b/c.html#chapter4”,location.hash == '#chapter4';如果地址里没有“#”,则返回空字符串。 search 返回“?”以及以后的内容,如“http://www.a.com/b/c.asp?selection=3&jumpto=4”,location.search == '?selection=3&jumpto=4';如果地址里没有“?”,则返回空字符串。 href 返回以上全部内容,也就是说,返回整个地址。在浏览器的地址栏上怎么显示它就怎么返回。如果想一个窗口对象打开某地址,可以使用“location.href = '...'”,也可以直接用“location = '...'”来达到此目的。 方法 reload() 相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键。 replace() 打开一个 URL,并取代历史对象中当前位置的地址。用这个方法打开一个 URL 后,按下浏览器的“后退”键将不能返回到刚才的页面
9 禁止ctrl+n和 禁止ctrl+r和 禁止shift+f10 禁止鼠标右键or左右键 和禁止f5 [ 可以先修改再运行 ] IE7 IE6下有效 FF下无效。。需要改进。。 10 . 加入收藏夹代码。。 IE7 + FF有效 [ 可以先修改再运行 ] 设为首页: [ 可以先修改再运行 ] 11.在一些JS应用中,涉及到CSS的重新渲染(即页面样式需要更新)的话,IE死活不变。 此时你需要让IE重新渲染一下:function handleIEhasLayout(){ //trigger re-rendering document.body.style.zoom = 1.1; //restore it document.body.style.zoom = ''; }
有问题,记得执行一下handleIEhasLayout,万事OK。 来源: realazy 12:用透明度+JS结合实现渐变<script language="JavaScript"> nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); function nereidFade(object, destOp, rate, delta){ if (!document.all) return if (object != "[object]"){ file://do this so I can take a string too setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return; } clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity; direction = 1; if (object.filters.alpha.opacity > destOp){ direction = -1; } delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta; if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object; nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate); } } </script> <img src="http://chenefei.com/upload/Gtalk.jpg" width="96" height="36" border="0" style="FILTER: alpha(opacity=100)" οnmοuseοver="nereidFade(this,50,50,5)" οnmοuseοut="nereidFade(this,100,50,5)">
实例: [ 可以先修改再运行 ] 14 .用JS来处理图片变形的问题,等比例缩放图片,还能防止图片在加载过程中因为图片太大而引起的变形<script language="JavaScript" type="text/javascript"> <!-- function DrawImage(ImgD,FitWidth,FitHeight){ var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ if(image.width/image.height>= FitWidth/FitHeight){ if(image.width>FitWidth){ ImgD.width=FitWidth; ImgD.height=(image.height*FitWidth)/image.width; }else{ ImgD.width=image.width; ImgD.height=image.height; } } else{ if(image.height>FitHeight){ ImgD.height=FitHeight; ImgD.width=(image.width*FitHeight)/image.height; }else{ ImgD.width=image.width; ImgD.height=image.height; } } } } //--> </script>
应用:<img src="XXXX" alt="自动缩放后的效果" width="200" height="200" οnlοad="javascript:DrawImage(this,"200","200");" />
这里给图片设置了固定的大小。用了JS函数之后,不影响效果:) 15.关于脚本,在xhtml1.1中不支持language属性 只需要把代码改为<script type="text/javascript">
16.JS 的页面跳转脚本 [ 可以先修改再运行 ] 17. IE下用JS去掉所有链接和图片的焦点(因点击而产生的虚线框)function bluring(){ if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus(); } document.οnfοcusin=bluring; </script>
18. 屏蔽右键类的代码<body οncοntextmenu="return false">
19 . 让div显示在select上面 二法 A:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Chenefei.com</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <body> <button onClick="oSelect.style.display='none';oLayer.style.display='inline'">显示层隐藏下拉选项</button> <button onClick="oSelect.style.display='inline';oLayer.style.display='none'">显示下拉选项隐藏层</button> <div style="position:absolute;left:0;top:50;z-index:2;background:red;width:120px;height:50px;z-index:1"> <select id="oSelect"><option>1<option>1<option>1<option>1<option>1<option>1<option>1<option>1<option>1<option>1<option>1</select> </div> <div id="oLayer" style="position:absolute;left:0;top:50;z-index:2;background:green;width:120px;height:70px;display:none;z-index:2"> <img src="http://www.baidu.com/img/logo.gif" /> </div> </body> </html>
B:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Chenefei.com</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Author" content="Chenefei" /> <script type="text/javascript"> function initBK(){ var o = document.createElement('iframe'); o.id = 'fram_bk'; document.body.appendChild(o); } function popMenu(e){ var o = window.event?event.srcElement:e.target; var p = getXY(e); if (document.all){ if (!$('fram_bk')){initBK();} with ($('fram_bk').style){ display='block'; top = p.y+"px"; left = p.x+"px"; } } with ($('menu').style){ display='block'; top = p.y+"px"; left = p.x+"px"; } } function getXY(e){ var posx=0,posy=0; if(e==null) e=window.event; if(e.pageX || e.pageY){ posx=e.pageX; posy=e.pageY; } else if(e.clientX || e.clientY){ if(document.documentElement.scrollTop){ posx=e.clientX+document.documentElement.scrollLeft; posy=e.clientY+document.documentElement.scrollTop; } else{ posx=e.clientX+document.body.scrollLeft; posy=e.clientY+document.body.scrollTop; } } return {x:posx,y:posy}; } function $(id){return document.getElementById(id)} </script> <style type="text/css"> div#menu{display:none;position:absolute;width:200px;height:300px;z-index:100;background:yellow;} iframe#fram_bk{border:0;position:absolute;display:none;z-index:0;width:200px;height:300px;} </style> </head> <body> <button οnclick="popMenu(event)">拉出菜单</button><br /> <div id="menu">这里是菜单... 拉出菜单时菜单不会被select遮住, 你可以试下效果... </div> <select><option>这是select哦</option></select> </body> </html>
19.用Javascript来修复IE下PNG 透明图不显示透明的问题// 说明:修复 IE 下 PNG 图片不能透明显示的问题 // 整理:http://www.CodeBit.cn function fixPNG(myImage) { var arVersion = navigator.appVersion.split("MSIE"); var version = parseFloat(arVersion[1]); if ((version >= 5.5) && (version < 7) && (document.body.filters)){ var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""; var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""; var imgTitle = (myImage.title) ? "title='" + myImage.title + "' " : "title='" + myImage.alt + "' "; var imgStyle = "display:inline-block;" + myImage.style.cssText; var strNewHTML = "<span " + imgID + imgClass + imgTitle+ " style=/"" + "width:" + myImage.width+ "px; height:" + myImage.height+ "px;" + imgStyle + ";"+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"+ "(src=/'" + myImage.src + "/', sizingMethod='scale');/"></span>"; myImage.outerHTML = strNewHTML; } } //在页面中需要用到 PNG 图片的地方,添加 οnlοad="fixPNG(this)"
20.JS对浏览器的版本判断 <script type="text/javascript">// 浏览器版本判断
var Client = {
Engine: {'name': 'unknown', 'version': ''},
Features: {}
};
Client.Features.xhr = !!(window.XMLHttpRequest);
Client.Features.xpath = !!(document.evaluate);
if (window.opera) Client.Engine.name = 'opera';
else if (window.ActiveXObject) Client.Engine = {'name': 'ie', 'version': (Client.Features.xhr) ? 7 : 6};
else if (!navigator.taintEnabled) Client.Engine = {'name': 'webkit', 'version': (Client.Features.xpath) ? 420 : 419};
else if (document.getBoxObjectFor != null) Client.Engine.name = 'gecko';
Client.Engine[Client.Engine.name] = Client.Engine[Client.Engine.name + Client.Engine.version] = true;
/*
浏览器判断实例:
if (Client.Engine.ie7){alert("IE7 Only!!!");}
参数解释:
Client.Engine.ie = true; //IE浏览器,版本不限
Client.Engine.ie6 = true; //IE 6
Client.Engine.ie7 = true; //IE 7
Client.Engine.opera = true; //opera
Client.Engine.gecko = true; //Mozilla/Gecko(包括firefox)
Client.Engine.webkit = true; //Safari
Client.Engine.webkit419 = true; //Safari2
Client.Engine.webkit420 = true; //Safari3
*/
</script> 21. 用JS判断上一个来源网站
var chenefei=document.referrer;// 获取来源
22. IE 不缓存背景图片的BUG 一般发生在用 innerHTML 方法输出的 html 中,比用脚本输出的html中包含 500个 li 列表,每个 li 都在css里定义了背景图(一个小箭头,太常见了),把这段 html 输出到页面,IE6 居然要载入 500 次背景图片,页面反应速度明显下降。 代码上加 document.execCommand("BackgroundImageCache", false, true); 即可解决问题。