实例：Ajax开发页面聊天系统

三、界面效果及位置的实现

上图为模拟网页页面的效果图，首先我们先看看上面标号文字的具体含义：

1.     document.documentElement.clientWidth

网页可见宽度,包括间隙，但不包括边框与滚动条

2.     document.documentElement.clientHeight

网页可见高度，包括间隙，但不包括边框与滚动条

3.     document.documentElement.scrollLeft

横向滚动条离左边距的距离

4.     document.documentElement.scrollTop

纵向滚动条离上边距的距离

5.     页面聊天系统所显示的区域,主要参数

宽度：document.getElementById("页面聊天系统ID"). offsetWidth

高度：document.getElementById("页面聊天系统ID").offsetHeight

左边距：document.getElementById("页面聊天系统ID").style.left

上边距：document.getElementById("页面聊天系统ID").style.top

由于我们要将页面聊天系统定位在页面的右下角，因此我们要做如下的算法:

左边距：document.getElementById("页面聊天系统ID").style.left=(document.documentElement.clientWidth+ document.documentElement.scrollLeft- document.getElementById("页面聊天系统ID").offsetHeight)+ "px"

上边距：document.getElementById("页面聊天系统ID").style.top= (document.documentElement.clientHeight + document.documentElement.scrollTop

- document.getElementById("页面聊天系统ID").style.top）+"px"

当网页触发以下事件时必须对位置进行重新设置：

1.     window.onresize

当窗口发生变化时触发

2．window.onscroll

         当窗口滚动条滚动条触发

      代码如下：

window.onload = getMsg; //页面加载时触发

window.onresize = resizeDiv; //页面大小发生变化时触发

window.onscroll= resizeDiv; //滚动条滚动时时触发

var divWidth,divHeight,docHeight,docWidth,objTimer,i = 0,nc,frompage,objTimerout,objTimeronline;

function getMsg()  //定位页面聊天系统位置

{

******//此处星号为下文所用到函数

    try{

    divHeight = parseInt(document.getElementById("eMsg").offsetHeight,10);

    divWidth = parseInt(document.getElementById("eMsg").offsetWidth,10);

    docWidth = document.documentElement.clientWidth;

    docHeight = document.documentElement.clientHeight;

    document.getElementById("eMsg").style.top =(parseInt(document.documentElement.scrollTop,10) + docHeight + 10)+"px";

    document.getElementById("eMsg").style.left =(parseInt(document.documentElement.scrollLeft,10) + docWidth - divWidth)+"px";

    document.getElementById("eMsg").style.visibility="visible" ;

    objTimer = window.setInterval("moveDiv()",10) ;  

    }

    catch(e){}

}

function resizeDiv()

{

    try{

    divHeight = parseInt(document.getElementById("eMsg").offsetHeight,10);

    divWidth = parseInt(document.getElementById("eMsg").offsetWidth,10);

document.getElementById("eMsg").style.top =(document.documentElement.clientHeight - divHeight + parseInt(document.documentElement.scrollTop,10))+"px";

   document.getElementById("eMsg").style.left = (parseInt(document.documentElement.scrollLeft,10) + document.documentElement.clientWidth - divWidth)+"px";

    }

    catch(e){}

}

function moveDiv()

{  try

    {

    if(parseInt(document.getElementById("eMsg").style.top,10) <= (docHeight - divHeight + parseInt(document.documentElement.scrollTop,10)))

    {

    window.clearInterval(objTimer);

    objTimer = window.setInterval("resizeDiv()",1);

    }

    divTop = (parseInt(document.getElementById("eMsg").style.top,10))+"px";

    document.getElementById("eMsg").style.top =( divTop - 1 )+"px";

    }

    catch(e){}

}

 

备注：

objTimer = window.setInterval("resizeDiv()",1)

含义：每隔1毫秒运行一次resizeDiv()函数

window.clearInterval(objTimer)

含义：停止setInterval所运行的函数

objTimeronline=window.setTimeout("OnlineNum()",2000) ;

含义：隔2000毫秒运行一次OnlineNum()函数

window.clearTimeout(objTimerout);

含义：停止运行OnlineNum()函数

是不是你会觉得这两个函数有点一样，其实不然。setInterval是每隔多少运行一次函数A，而setTimeout是隔了多少秒后运行一次函数A，而函数A中必须再一次指定运行函数A，当然你也可以再函数A中运行函数B，但setInterval却不可以。 我个人觉得setTimeout更自由、更随意。