三个小方块在屏幕上跳动

<html>
<head>
<script type="text/javascript">
var Con=5;
x=5;
y=5;
k=1;
g=1;
var screenH=window.screen.availHeight;
var screenW=window.screen.availWidth;
//var screenH=document.body.scrollHeight;
//var screenW=document.body.scrollWidth;
setInterval(func1,100);
setInterval(func2,100);
setInterval(func3,100);
function func1(){
  if(y>screenH){
    g=-g;
  }
  if(y<5){
    g=-g;
  }
  if(x<5){
    k=-k;
  }
  if(x>screenW){
    k=-k;
  }
  x+=Con*k;
  y+=Con*g;
  document.getElementById("div1").style.top=y;
  document.getElementById("div1").style.left=x;
}
x1=892;
y1=8;
k1=1;
g1=1;
function func2(){
  if(x1>screenW){
    k1=-k1;
  }
  if(x1<5){
    k1=-k1
  }
  if(y1>screenH){
    g1=-g1;
  }
  if(y1<5){
    g1=-g1
  }
  x1-=Con*k1;
  y1+=Con*g1;
  document.getElementById("div2").style.top=y1;
  document.getElementById("div2").style.left=x1;
}
x2=492;
y2=45;
k2=1;
g2=1;
function func3(){
  if(x2>screenW){
    k2=-k2;
  }
  if(x2<5){
    k2=-k2
  }
  if(y2>screenH){
    g2=-g2;
  }
  if(y2<5){
    g2=-g2
  }
  x2-=Con*k2;
  y2+=Con*g2;
  document.getElementById("div3").style.top=y2;
  document.getElementById("div3").style.left=x2;
}
</script>
</head>
<body>
<div id="div1" style="position:absolute;height:100px;width:100px;background-color:#f00;">
</div>
<div id="div2" style="position:absolute;height:100px;width:100px;background-color:#00f;"></div>
<div id="div3" style="position:absolute;height:100px;width:100px;background-color:#0f0;"></div>
</body>
</html>昨天晚上写的。
请问如何取得屏幕可用区域的像素，我写的这个，小方块跳到边上的时候还会出现滚动条。

解决方案 »

  1.   

    不想要滚动条，隐藏也可以。
    <style type="text/css">
    html,body{width:100%;height:100%;overflow:hidden}
    </style>
      

  2.   

    var screenW=document.body.clientWidth-100;
    var screenH=document.body.clientHeight-100;
    SCRIPT挪到</BODY>后面。
      

  3.   

    在IE中：
    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    document.documentElement.clientHeight ==> 可见区域高度
    在FireFox中：
    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    document.documentElement.clientHeight ==> 可见区域高度
    ?
    在Opera中： 
    document.body.clientWidth ==> 可见区域宽度
    document.body.clientHeight ==> 可见区域高度
    document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
    document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
    而如果没有定义W3C的标准，则
    IE为：
    document.documentElement.clientWidth ==> 0
    document.documentElement.clientHeight ==> 0
    FireFox为：
    document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
    Opera为：
    document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
    真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。//////////////////////////////////////////////////////////////////////////////////////
    网页可见区域宽:
    document.body.clientWidth网页可见区域高:
    document.body.clientHeight 网页可见区域宽:
    document.body.offsetWidth(包括边线的宽) 网页可见区域高:
    document.body.offsetHeight(包括边线的宽) 网页正文全文宽:
    document.body.scrollWidth 网页正文全文高:
    document.body.scrollHeight 网页被卷去的高:
    document.body.scrollTop 网页被卷去的左:
    document.body.scrollLeft 网页正文部分上:
    window.screenTop 网页正文部分左:
    window.screenLeft 屏幕分辨率的高:
    window.screen.height 屏幕分辨率的宽:
    window.screen.width 屏幕可用工作区高度:
    window.screen.availHeight 屏幕可用工作区宽度:
    window.screen.availWidth 
    本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ityuany/archive/2009/11/30/4906961.aspx