百度空间 | 百度首页 
               
 
查看文章
  
JS小技巧总汇
2007-12-11 09:32
1。一个js文件。
如果其中有对ID的获取操作，最好把代码加载在HTML语言后面。。否则，会产生错误！
原因很简单，html都没有加载，怎么能获取到呢？
但是，如果是特效的话，似乎还是放head区域比较好的！
2。防止表单的重复提交：

<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"
onload=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操作
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>用js实现代码的复制功能</title> <script language="javascript"> function copycode(obj) { var rng = document.body.createTextRange(); rng.moveToElementText(obj); rng.scrollIntoView(); rng.select(); rng.execCommand("Copy"); rng.collapse(false); } function findobj(n, d) { var p, i, x; if(!d) d = document; if((p = n.indexOf("?"))>0 && parent.frames.length) { d = parent.frames[n.substring(p + 1)].document; n = n.substring(0, p); } if(x != d[n] && d.all) x = d.all[n]; for(i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n]; for(i = 0; !x && d.layers && i < d.layers.length; i++) x = findobj(n, d.layers[i].document); if(!x && document.getElementById) x = document.getElementById(n); return x; } </script> </head> <body> <a href="javascript:;" onclick="copycode(findobj('code'));">复制代码</a></p> <p> <pre id="code"> <!--[if IE 5]> <h1> <h1>这些文字只有在IE5 或 IE5.5 才可以看得见. </h1></h1> <![endif]--> </pre> </p> </body> </html>
[ 可以先修改再运行 ]

7。 用CSS+JS实现用flash做背景
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> <!-- body { background:url("JAVASCRIPT:window.onload=function plays(){ var player='<object type="application/x-shockwave-flash" width="210" height="20"><param name="movie" value="http://www.0hao2.com/flash/mp3player1.swf?&mp3=http://plus.snailcn.com/upload/M.mp3"></object>'; music.innerHTML=player;}"); } --> </style> <div id="music">播放器</div> <div>来源：http://bbs.blueidea.com/thread-2695148-1-1.html</div>
[ 可以先修改再运行 ]

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
<script> //禁止ctrl+n和 禁止ctrl+r和 禁止shift+f10 禁止鼠标右键or左右键 和禁止f5 var oLastBtn=0,bIsMenu=false if (window.Event) { document.captureEvents(Event.MOUSEUP); } function nocontextmenu() { event.cancelBubble=true; event.returnValue=false; return false; } function norightclick(e) { if(window.Event) { if (e.which !=1) { return false; } } else if(event.button!=1) { event.cancelBubble=true; event.returnValue=false; return false; } } document.oncontextmenu=nocontextmenu; document.onmousedown=norightclick; function onKeyDown() { if ((event.altKey)||((event.keyCode==8)&&(event.srcElement.type!="text"&&event.srcElement.type!="textarea"&&event.srcElement.type!="password"))||((event.ctrlKey)&&((event.keyCode==78)||(event.keyCode==82)))||(event.keyCode==116)) { event.keyCode=0; event.returnValue=false; } } </script> <body onkeydown="onKeyDown()"> //禁止ctrl+n和 禁止ctrl+r和 禁止shift+f10 禁止鼠标右键or左右键 和禁止f5 </body>
[ 可以先修改再运行 ]
IE7 IE6下有效 FF下无效。。需要改进。。


10 . 加入收藏夹代码。。 IE7 ＋ FF有效
<script> function addfavorite(){ if (document.all){ window.external.addFavorite(window.location.href,'描述息'); } else if (window.sidebar) { window.sidebar.addPanel('描述信息', window.location.href, ""); } } </script> <a href="#" onclick="addfavorite()">把本站加入收藏</a>
[ 可以先修改再运行 ]
设为首页：
<a href="#;" onclick="this.addBehavior('#default#homepage');>加入收藏</a>
[ 可以先修改再运行 ]

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)" onmouseover="nereidFade(this,50,50,5)" onmouseout="nereidFade(this,100,50,5)">

实例：
<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" border="0" style="FILTER: alpha(opacity=100)" onmouseover="nereidFade(this,50,50,5)" onmouseout="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" onload="javascript:DrawImage(this,"200","200");" />

这里给图片设置了固定的大小。用了JS函数之后，不影响效果：）

15.关于脚本，在xhtml1.1中不支持language属性
只需要把代码改为

<script   type="text/javascript">


16.JS 的页面跳转脚本
<script language="javascript"> location.assign ("HTTP://chenefei.com") </script>
[ 可以先修改再运行 ]

17. IE下用JS去掉所有链接和图片的焦点(因点击而产生的虚线框)

function bluring(){
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
}
document.onfocusin=bluring;
</script>

18. 屏蔽右键类的代码

<body oncontextmenu="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 onclick="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 图片的地方，添加   onload="fixPNG(this)"



20.JS对浏览器的版本判断

类别：默认分类 | 添加到搜藏 | 浏览() | 评论 (0)
 
最近读者：
 
网友评论：
发表评论：
姓　名：
网址或邮箱： (选填)
内　容：
验证码： 请点击后输入四位验证码，字母不区分大小写
      

     

©2009 Baidu