js定時讀取消息,並彈出動畫效果的提示信息

其實看著像是一個對話框,可卻不是使用alert,或者windows.open之類的方法制作的,其實就是在頁面中添加瞭一個類似p之類的容器,然後讀取後臺消息,動態生成有p組成的彈出款,在使用jquery的動畫效果,就很漂亮瞭。簡單的代碼實現如下:

[javascript] 
 $(document).ready(function() 

   AddAlertContainer(); 
  setInterval("GetAlertInfo('ajaxPage/GetAjaxData.aspx')",3000); 
}); 
 
var id=1; 
var alertContainerID = "AlertContainer";  //彈出框容器id  
var distance=5; 
function AddAlertContainer() 
{  
    $("body").append("<p id ='"+alertContainerID+"' style='zIndex:1;height:10px;bottom:0px;right:0px'; ></p>");  

 
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("<p id ='"+alertDivID+"'></p>");  
     
     $("#" +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</span>");  
    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;'>確定</span>");  
    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 + ')');   www.aiwalls.com
          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); 
            }            
          }           
             
        } 
    }); 

 作者:xuexiaodong2009

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *