⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 chat.html

📁 ajax chat you can test and study
💻 HTML
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="linb" />
<meta name="robots" content="all" />
<style>
<!--
div, p, span, td, li{
    font-size:1em;
    font-family: "Verdana", "Helvetica", "sans-serif";
}
.outter{

    border-left:solid 1px #ffffff;
    border-top:solid 1px #ffffff;
    border-right:solid 1px #808080;
    border-bottom:solid 1px #808080;
}
.inner{
    border-left:solid 1px #808080;
    border-top:solid 1px #808080;
    border-right:solid 1px #ffffff;
    border-bottom:solid 1px #ffffff;
}
-->
</style>

<script type="text/javascript" src="common.js"></script>
<title></title>
</head>
<body>

<div id="$chat_div" class="outter" style="position:absolute; left:100px; top:100px;  ">
<!--linb:code:begin-->

<div id="$chat_dd" >
    <table style="width:376px; background-color: #f0f5fb;border:none; ">
        <tr>
            <td width="40%">
                <span style="font-size:15px;">&nbsp;&nbsp;&nbsp;在线聊天</span>
            </td>
            <td width="30%">
            </td>
            <td width="30%" style="text-align:right;">
                <span style="font-size:12px; font-style:Verdana;"><a href="http://www.hahala.com" id="$tolinb">帮助</a></span>
            </td>
        </tr>
    </table>
</div>


<table id="$chat_table"  style="width:376px; background-color: #f0f5fb; ">
    <tr>
        <td style="height:200px; width:100%;">
            <div id="$out" class="inner" style="width:360px; padding:4px; height:100%; overflow:auto; background-color:#ffffff;">
            </div>
        </td>
    </tr>
    <tr>
        <td style="height:20px;text-align:right; vertical-align:middle; width: 100%;-moz-user-select: text;">
            <input id="$name" style="border: #5184c3 1px solid; width: 80px; " title="输入姓名"/>
            <input id="$chat_in" style="border: #5184c3 1px solid; width: 210px; " title="你想说的话" onkeypress="if($E$.getKey(event)=='$enter'){linb.dom('$say').e.onclick();}"/>
            <img id="$say"  onclick="linb.pool.$chat.say(linb.dom('$name').e.value, linb.dom('$chat_in').e.value);linb.dom('$chat_in').e.value='';" src="img/say.gif"  style="border:solid 1px #d4d0c8; vertical-align:middle; "  onmousemove="linb.dom(this).css('border','solid 1px green');" onmouseout="linb.dom(this).css('border','solid 1px #d4d0c8');"  title="输入信息" alt=''/>
            <img id="$toggle" onclick='linb.pool.$chat.toggle();' src="img/pause.gif" style="border:solid 1px #d4d0c8; vertical-align:middle; " onmousemove="linb.dom(this).css('border','solid 1px green');" onmouseout="linb.dom(this).css('border','solid 1px #d4d0c8');" title='暂停聊天' alt=''/>
        </td>
    </tr>
</table>

<script type="text/javascript">
    if (document.images){
      var preL = new Image(10,10);
      preL.src="img/pause.gif";
      preL.src="img/play.gif";
    }

    linb.pool.$chat={
        index:-1,
        uri:"chat.asp",
        pause: false,
        template : linb.html.template("<div style='cursor:default;padding-top:5px;'><span style='font-size:12px;font-weight:bold;color:#003399;' title='<%ip%> : <%time%>'><%name%>: </span><span style='font-size:12px;word-break: break-all;word-wrap:break-word;'><%words%></span></div>"),

        doChat : function(threadid, para){
            if(!linb.dom("$chat_table")){
                _.asyRun(function(){linb.thread("$chat").Abort(); delete linb.pool.$chat;},500);
                return;
            }
            linb.thread("$chat").Sleep();

            para=_.H(para);
            para.index = linb.pool.$chat.index;
            var success = function(txt){
                if(linb.pool.$chat.pause !== true){
                    var o = _.S2O(txt);
                    if(o.index>linb.pool.$chat.index){
                        var outA=[],outS='';
                        if(_.isA(o.updates)){
                            if(o.updates.length>50){
                                  o.updates.slice(-50);
                            }
                            o.updates.each(function(oo){
                                if(oo[0]>linb.pool.$chat.index){
                                        outA.push(
                                            linb.pool.$chat.template.build({
                                                 "<%name%>":oo[1],
                                                 "<%ip%>":oo[2],
                                                 "<%words%>":oo[3],
                                                 "<%time%>":oo[4]
                                           }).html()
                                        );
                                 }
                            });
                            outS=outA.join('');

                            if(outS!==''){
                                var _tmp = linb.dom('$out').html(linb.dom('$out').html() + outS);
                                linb.dom('$chat_table').fx1({'background-color':['#f0f5fb;', '#FBFBF2;']},null,null,300,2).merge(
                                   linb.dom('$chat_table').fx1({'background-color':['#FBFBF2;', '#f0f5fb;']},null,null,300,4)
                                ).Start();

                                _.asyRun(function(){_tmp.e.scrollTop = _tmp.e.scrollHeight;_temp=null;});

                                while(_tmp.byTag('div').length >50){
                                     _tmp.firstC().remove();
                                }
                            }
                            linb.pool.$chat.index = o.index;
                        }
                    }
                    o=null;
                    linb.thread("$chat").Resume();
                }
            };
            var fail =  function(){
                linb.thread("$chat").Resume();
            };
            linb.ajaxCall(linb.pool.$chat.uri, success, fail, null, _.O2S(para), 'POST', null, null, null, true);
        },
        say : function(n,s){
            s=s.left(256);
            n=_.S(n);
            n=n.left(32);
            if(_.S(s)==''){return;}
            linb.pool.$chat.doChat('$chat', {action:"say", index:linb.pool.$chat.index, arg:{who:n, words:s}});
            linb.SC('tools.cookie').set('$name',linb.dom('$name').e.value,30);
        },
        toggle : function(){
            var _t=linb.thread("$chat");
            if(_t.getStatus()=== 'run'){
                 linb.pool.$chat.pause =  true;
                 _t.Sleep();
                 linb.dom('$toggle').reSrc("play").attr('title','开始聊天!');
                 linb.dom("$name").enable(false);
    			 linb.dom("$chat_in").enable(false);
            }else{
                 linb.pool.$chat.pause = false;
                 _t.Resume();
                 linb.dom('$toggle').reSrc("pause").attr('title','暂停聊天!');
                 linb.dom("$name").enable(true);
                 linb.dom("$chat_in").enable(true);
            }
        }
    };

    if(linb.dom('$chat_div')){
      linb.dom('$chat_dd').cursor('move').signLeak().e.onmousedown=function(e){
          linb.dom('$chat_div').startDrag(e, {"$nobg":true,"$mode":"shape"})
      }
      linb.dom('$tolinb').signLeak().e.onmousedown=function(e){
          linb.event.stopBubble(e);
      }
    }
	linb.dom("$name").enable(true);
	linb.dom("$chat_in").enable(true);
    linb.thread("$chat", [linb.pool.$chat.doChat], 3000, null, null, null, true).Start();
    linb.dom('$name').e.value = linb.SC('tools.cookie').get('$name');

</script>

<!--linb:code:end-->
</div>


</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -