js定时读取消息，并弹出动画效果的提示信息详解编程语言

      在网上经常看到一些很漂亮的效果，例如主动读取后台的消息，然后弹出一个很漂亮的弹出框，提示用户。

     其实看着像是一个对话框，可却不是使用alert，或者windows.open之类的方法制作的，其实就是在页面中添加了一个类似div之类的容器，然后读取后台消息，动态生成有div组成的弹出款，在使用jquery的动画效果，就很漂亮了。简单的代码实现如下：

 $(document).ready(function() 
{ 
   AddAlertContainer(); 
  setInterval("GetAlertInfo('ajaxPage/GetAjaxData.aspx')",3000); 
}); 
 
var id=1; 
var alertContainerID = "AlertContainer";  //弹出框容器id  
var distance=5; 
function AddAlertContainer() 
{  
    $("body").append("<div id ='"+alertContainerID+"' style='zIndex:1;height:10px;bottom:0px;right:0px'; ></div>");  
} 
 
function AddAlertDiv(content){ 
 var alertContainer=$("#"+alertContainerID)[0]; 
 //新弹出层 
    var newDivWidth = 400;//新弹出层宽度 
    var newDivHeight = 200;//新弹出层高度 
     var newDivtop=(document.body.scrollTop + document.body.clientHeight/2  
          - newDivHeight/2) ;//新弹出层距离上边距离 
    var newDivleft=(document.body.scrollLeft + document.body.clientWidth/2  
            - newDivWidth/2);//新弹出层距离左边距离 
             
    var alertDivID="alertDivID"+id; 
     id=id+1; 
    $("#"+alertContainerID).append("<div id ='"+alertDivID+"'></div>");  
     
     $("#" +alertDivID).css("position", "absolute");//  
     $("#" +alertDivID).css("zIndex", id);//  
     $("#" +alertDivID).css("width", newDivWidth+ "px");//  
     $("#" +alertDivID).css("height", newDivHeight+ "px");//  
      
    $("#" +alertDivID).css("top", newDivtop*2+ "px");//  
     $("#" +alertDivID).css("left", newDivleft*2+ "px");// 
      
     $("#" +alertDivID).css("background","#EFEFEF");//  
     $("#" +alertDivID).css("border", "1px solid #860001");// 
      $("#" +alertDivID).css("padding", "5px");// 
      distance=distance+5; 
      $("#" +alertDivID).append(content);  
       
     $("#" +alertDivID).animate({ 
   top:newDivtop+distance, left: newDivleft+distance 
   }, { duration: 1000 });  
       
    
    $("#"+alertDivID).append("<span id ='"+"alertCloseID"+id+"' style='position:absolute;left:350px;'>Close");  
    var newA =$("#"+"alertCloseID"+id);  
    newA.click( function ()  
    {     
            
       $("#" +alertDivID).fadeOut(1000,function(){ 
       $("#" +alertDivID).remove();  
       distance=distance-5; 
     });         
        return false;     
    }); 
     
     $("#"+alertDivID).append("<span id ='"+"alertSureID"+id+"' style='position:absolute;left:180px;top:150px;font-size:23px;'>确定");  
    var newA =$("#"+"alertSureID"+id);  
    newA.click( function ()  
    {      
       $("#" +alertDivID).fadeOut(1000,function(){ 
       $("#" +alertDivID).remove();  
        distance=distance-5; 
     });         
        return false;     
    }); 
     
} 
var lastReadTime=undefined; 
function GetAlertInfo(url) 
{ 
   
if(lastReadTime==undefined) 
{ 
   var time=new Date(); 
   lastReadTime=time.getFullYear()+"-"+(time.getMonth()+1)+"-"+time.getDate()+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();//+"."+time.getMilliseconds(); 
} 
 
    $.ajax({ 
        type: "GET", 
        url: url, 
        data: "oper=GetAlertInfo"+"&time=" + lastReadTime, 
        success: function(result) 
        {   
           var resultObj = eval('(' + result + ')'); 
          if (resultObj.totalProperty > 0&&resultObj.root.length > 0) 
          { 
            for(var i=0;i<resultObj.root.length;i++) 
            { 
               var content=resultObj.root[i].Content; 
                AddAlertDiv(content); 
            }            
          }           
             
        } 
    }); 
}