js 小技巧

setTimeout( "[执行的脚本   必须是字符串] ",[延时时间毫秒])

function   setFocus3(i,n)
{
  setTimeout(selectLayer3(i),n*1000);
}
function   selectLayer3(i)
{
  switch(i)
  {
  case   1:
  document.getElementById( "pic10 ").style.display= "block ";
  document.getElementById( "pic11 ").style.display= "none ";
  break;
  case   2:
  document.getElementById( "pic10 ").style.display= "none ";
  document.getElementById( "pic11 ").style.display= "block ";
  break;
  }
}

按钮由图片代替:

<input type="image"                                         src="http://pic1.blueidea.com/bbs/icon10.gif" />  仅用于提交(submit)

大小写变化:

Object.value=value.toUpperCase()

Object.value=value.toLowerCase()

div跟着鼠标的位置进行动态显示

 

 

<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <script type="text/javascript">
  //在鼠标显示一个层,该层的内空为div2的内容
  function showTip(){
   var div3 =  document.getElementById('div3'); //将要弹出的层
   div3.style.display="block"; //div3初始状态是不可见的,设置可为可见
    //window.event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状.
    //clientX是鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
      div3.style.left=event.clientX+10;  //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
   div3.style.top=event.clientY+5;
   div3.style.position="absolute"; //必须指定这个属性,否则div3层无法跟着鼠标动
   var div2 =document.getElementById('div2');
   div3.innerText=div2.innerHTML;
  }
  //关闭层div3的显示
  function closeTip(){
   var div3 =  document.getElementById('div3');
   div3.style.display="none";
  }
       
  //控制层div2显示的开关
  function switchDIV(){
   if(div2.style.display=='block'){
    div2.style.display='none';
   }
   else{
    div2.style.display='block';
   }    
  }
 </script>
 </HEAD>
 <BODY>
 <a href="#" onmousemove="showTip()" onmouseout="closeTip()" onclick="switchDIV()">链接</a>
 <div id="div2" style="display:none;background-color:green">
 <h1 color="blue">我是在div2里面的一句话!</h1>

 </div>

 <div id="div3" style="display:none;background-color :pink;width:250;height:50">
 </div>
 </BODY>
 </HTML>

 

类似于colorBox的显示操作

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<STYLE>
   #login{
     position: relative;
     display: none;
         top: 20px;
         left: 30px;
         background-color: #ffffff;
         text-align: center;
         border: solid 1px;
         padding: 10px;
         z-index: 1;
   }
 
</STYLE>


<script  type="text/javascript">

var W = screen.width;//取得屏幕分辨率宽度
var H = screen.height;//取得屏幕分辨率高度

//判断浏览器是否为IE
function isIE(){
      return (document.all && window.ActiveXObject && !window.opera) ? true : false;
}
//取得页面的高宽
function getBodySize(){
   var bodySize = [];
   with(document.documentElement) {
    bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;//如果滚动条的宽度大于页面的宽度,取得滚动条的宽度,否则取页面宽度
    bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;//如果滚动条的高度大于页面的高度,取得滚动条的高度,否则取高度
   }
   return bodySize;
}
//创建遮盖层

function popCoverDiv(){
   if (document.getElementById("cover_div")) {
   //如果存在遮盖层,则让其显示
    document.getElementById("cover_div").style.display = 'block';
   } else {
   //否则创建遮盖层
    var coverDiv = document.createElement('div');
    document.body.appendChild(coverDiv);
    coverDiv.id = 'cover_div';
    with(coverDiv.style) {
     position = 'absolute';
     background = '#CCCCCC';
     left = '0px';
     top = '0px';
     var bodySize = getBodySize();
     width = bodySize[0] + 'px'
     height = bodySize[1] + 'px';
     zIndex = 0;
     if (isIE()) {
      filter = "Alpha(Opacity=60)";//IE逆境
     } else {
      opacity = 0.6;
     }
    }
   }
}


//让登陆层显示为块
    function showLogin()
    {
            var login=document.getElementById("login");
            login.style.border="3px solid #0099ff";
            login.style.display = "block";
        }

//设置DIV层的样式
function change(){
          var login = document.getElementById("login");
      login.style.position = "absolute";
      login.style.border = "1px solid #CCCCCC";
      login.style.background ="#F6F6F6";
      var i=0;
          var bodySize = getBodySize();
      login.style.left = (bodySize[0]-i*i*4)/2+"px";
      login.style.top = (bodySize[1]/2-100-i*i)+"px";
      login.style.width =      i*i*4 + "px";
      login.style.height = i*i*1.5 + "px";
    
      popChange(i);
}
//让DIV层大小循环增大
function popChange(i){
      var login = document.getElementById("login");
          var bodySize = getBodySize();
      login.style.left = (bodySize[0]-i*i*4)/2+"px";
      login.style.top = (bodySize[1]/2-100-i*i)+"px";
      login.style.width =      i*i*4 + "px";
      login.style.height = i*i*1.5+ "px";
      if(i<=10){
           i++;
           setTimeout("popChange("+i+")",10);//设置超时40毫秒
      }
}
//打开DIV层
function openl()
{   
         alert('open');
        change();
        showLogin();
        popCoverDiv()
        void(0);//不进行任何操作,如:<a href="#">aaa</a>
 
}
//关闭DIV层
function closel(){
         alert('close');
         document.getElementById('login').style.display = 'none';
         document.getElementById("cover_div").style.display = 'none';
        void(0);
}
function a(){
  alert(document.getElementById("ddd").value);
}

</script>
</head>

<body>

<a href="javascript:openl();">登陆</a><br>
<p onmouseover="javascript:window.open('http://www.qq.com');">打开腾讯</p>
<a href="javascript:window.close();">关闭</a>
<input type="button" value="do" onclick="window.location.href('javascript:openl();');"/>
<input type="button" value="do2" onclick="openl();"/>

<div id="login">
  <span>用户登陆</span>
   <div id="panel">
   <lable>用户名:&nbsp;</lable><input type="text" size="20" id="ddd"/>
   <lable>密码:&nbsp;</lable><input type="password" size="20">
   <input type="checkbox" /><lable>登陆</lable>
   </div>
   <input type="button" value="提交" onclick="a();"/>
   <a href="javascript:closel();">关闭</a> 
</div>
</body>
</html>

 

 

 

 

前端网页的高度和宽度属性

<body> 
<SCRIPT  LANGUAGE="JavaScript"> 
var    s  ="网页可见区域宽+clientWidth:"+  document.body.clientWidth; 
s+="/r/n网页可见区域高+clientHeight:"+  document.body.clientHeight; 
s  +=  "/r/n网页正文全文宽+scrollWidth:"+  document.body.scrollWidth; 
s  +=  "/r/n网页正文全文高+scrollHeight:"+  document.body.scrollHeight; 
s  +=  "/r/n网页正文部分上+screenTop:"+  window.screenTop; 
s  +=  "/r/n网页正文部分左+screenLeft:"+  window.screenLeft; 
s  +=  "/r/n屏幕分辨率的高+screen.height:"+  window.screen.height; 
s  +=  "/r/n屏幕分辨率的宽+screen.width:"+  window.screen.width; 
s  +="/r/n屏幕可用工作区高度+screen.availHeight:"+  window.screen.availHeight; 
s  +="/r/n屏幕可用工作区宽度+screen.availWidth:"+  window.screen.availWidth; 
s+="/r/n当前鼠标所指定位置+x:"+window.event.clientX+"+Y:"+window.event.clientY;
   alert(s); 
</SCRIPT>

 

阅读更多
想对作者说点什么? 我来说一句

javascript小技巧-js小技巧收集.doc

2011年07月20日 152KB 下载

javascript中的小技巧

2008年10月13日 2KB 下载

js中的小技巧

2008年04月09日 12KB 下载

js使用小技巧

2013年01月29日 17KB 下载

javascript技巧

2008年04月21日 213KB 下载

JavaScript小技巧全集

2009年11月16日 12KB 下载

JS网页常用小技巧

2008年01月26日 68KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭