Web实现QQ聊天窗口

MicrosoftInternetExplorer402DocumentNotSpecified7.8Normal0

  

腾讯的webqq做的挺不错的，我使用jquery仿照官方的实现了一个webqq的聊天框。下面就是实现过程遇到的一些问题的解决办 法。

1.webqq在页面被关闭的时候会询问是否离开页面，点否就会组织页面被关闭。在htm页面中添加下面代码即可

     window.onbeforeunload= function(){
         return "你确定要离开吗?";
     }

2.div并排

   #div{            //div 并排
     float:right;  //或者left    
     }

3.使用js格式化时间

 /*
   * 为date对象增加格式化时间方法
   */
   Date.prototype.format= function(format){
         var o= {
           "M+" :  this.getMonth()+1,  //month
           "d+" :  this.getDate(),    //day
           "h+" :  this.getHours(),    //hour
           "m+" :  this.getMinutes(),  //minute
           "s+" :  this.getSeconds(), //second
           "q+" :  Math.floor((this.getMonth()+3)/3),  //quarter
           "S"  :  this.getMilliseconds() //millisecond
         }
         if(/(y+)/.test(format)) {
                format= format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));//
         }
         for(var kin o) {
             if(new RegExp("("+ k+")").test(format)) {
                 format= format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
               }
         }
               return format;
       }

     /*
       * 获取当前格式化的时间
       */
     function getCurrentTime() {
         var date= new Date();
         return  date.format("yyyy-MM-dd hh:mm:ss");
     }

 4.使用js在网页中播放声音，这个需要针对ie和非ie做不同的处理

function playSound(){
     var k;
     if($.browser.msie){
     k= $("");
     }else{
          k= $("");
       }
     $('body').append(k);
     //在音乐播放完毕移除dom对象
     setTimeout(function(){ try{
         $('body').remove(k);
       }
       catch(e){}
   },3000)
 }

5.让div滚动条始终在最下边

 var msgDiv= $('#msg');
 msgDiv.scrollTop( msgDiv[0].scrollHeight);

6.处理组合键

$('#input').keydown(function(event){
       //这里处理ctrl+回车事件，更多按键可以在event对象里面找到
       if(event.ctrlKey&& event.keyCode==13){
             //
       }
});

 7.让div内的各种dom如img 文字等等全部垂直居中

.user*{
       vertical-align:middle;
}

  腾讯的webqq做的挺不错的，我使用jquery仿照官方的实现了一个webqq的聊天框。下面就是实现过程遇到的一些问题的解决办 法。

1.webqq在页面被关闭的时候会询问是否离开页面，点否就会组织页面被关闭。在htm页面中添加下面代码即可

     window.onbeforeunload= function(){
         return "你确定要离开吗?";
     }

2.div并排

   #div{            //div 并排
     float:right;  //或者left    
     }

3.使用js格式化时间

 /*
   * 为date对象增加格式化时间方法
   */
   Date.prototype.format= function(format){
         var o= {
           "M+" :  this.getMonth()+1,  //month
           "d+" :  this.getDate(),    //day
           "h+" :  this.getHours(),    //hour
           "m+" :  this.getMinutes(),  //minute
           "s+" :  this.getSeconds(), //second
           "q+" :  Math.floor((this.getMonth()+3)/3),  //quarter
           "S"  :  this.getMilliseconds() //millisecond
         }
         if(/(y+)/.test(format)) {
                format= format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));//
         }
         for(var kin o) {
             if(new RegExp("("+ k+")").test(format)) {
                 format= format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
               }
         }
               return format;
       }

     /*
       * 获取当前格式化的时间
       */
     function getCurrentTime() {
         var date= new Date();
         return  date.format("yyyy-MM-dd hh:mm:ss");
     }

 4.使用js在网页中播放声音，这个需要针对ie和非ie做不同的处理

function playSound(){
     var k;
     if($.browser.msie){
     k= $("");
     }else{
          k= $("");
       }
     $('body').append(k);
     //在音乐播放完毕移除dom对象
     setTimeout(function(){ try{
         $('body').remove(k);
       }
       catch(e){}
   },3000)
 }

5.让div滚动条始终在最下边

 var msgDiv= $('#msg');
 msgDiv.scrollTop( msgDiv[0].scrollHeight);

6.处理组合键

$('#input').keydown(function(event){
       //这里处理ctrl+回车事件，更多按键可以在event对象里面找到
       if(event.ctrlKey&& event.keyCode==13){
             //
       }
});

 7.让div内的各种dom如img 文字等等全部垂直居中

.user*{
       vertical-align:middle;
}

  腾讯的webqq做的挺不错的，我使用jquery仿照官方的实现了一个webqq的聊天框。下面就是实现过程遇到的一些问题的解决办 法。

1.webqq在页面被关闭的时候会询问是否离开页面，点否就会组织页面被关闭。在htm页面中添加下面代码即可

     window.onbeforeunload= function(){
         return "你确定要离开吗?";
     }

2.div并排

   #div{            //div 并排
     float:right;  //或者left    
     }

3.使用js格式化时间

 /*
   * 为date对象增加格式化时间方法
   */
   Date.prototype.format= function(format){
         var o= {
           "M+" :  this.getMonth()+1,  //month
           "d+" :  this.getDate(),    //day
           "h+" :  this.getHours(),    //hour
           "m+" :  this.getMinutes(),  //minute
           "s+" :  this.getSeconds(), //second
           "q+" :  Math.floor((this.getMonth()+3)/3),  //quarter
           "S"  :  this.getMilliseconds() //millisecond
         }
         if(/(y+)/.test(format)) {
                format= format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));//
         }
         for(var kin o) {
             if(new RegExp("("+ k+")").test(format)) {
                 format= format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
               }
         }
               return format;
       }

     /*
       * 获取当前格式化的时间
       */
     function getCurrentTime() {
         var date= new Date();
         return  date.format("yyyy-MM-dd hh:mm:ss");
     }

 4.使用js在网页中播放声音，这个需要针对ie和非ie做不同的处理

function playSound(){
     var k;
     if($.browser.msie){
     k= $("");
     }else{
          k= $("");
       }
     $('body').append(k);
     //在音乐播放完毕移除dom对象
     setTimeout(function(){ try{
         $('body').remove(k);
       }
       catch(e){}
   },3000)
 }

5.让div滚动条始终在最下边

 var msgDiv= $('#msg');
 msgDiv.scrollTop( msgDiv[0].scrollHeight);

6.处理组合键

$('#input').keydown(function(event){
       //这里处理ctrl+回车事件，更多按键可以在event对象里面找到
       if(event.ctrlKey&& event.keyCode==13){
             //
       }
});

 7.让div内的各种dom如img 文字等等全部垂直居中

.user*{
       vertical-align:middle;
}