整体的界面便是上面的样子，排版方面的知识就不多说了，毕竟我也不是做前真个，而且很多样式都是直接从官网拿过来。还是紧张说一说流程逻辑方面的知识。实在并没有太深的学问，只要有根本的Js,循环，判断语句就可以了。我紧张想表达的还是实战思路。接下来我先把问题抛出来，如果已经想到了很好的方法大可不必再摧残浪费蹂躏韶光看下去了。
1，中框部分的谈天记录显示问题（各部分均为独立iframe框架）
难点：由于显示的条数受限，假设只显示最近5条，那么该当是用韶光倒序获取5条数据，这样能实现最近5条数据，但是显示结果会是自上而下从晚到早。相反，如果按照韶光顺序提取5条，那么显示顺序没问题，可是获取的5条数据却不是最近的而是最早的。
2，与第1点同步的会涌现每条发送信息的韶光，但是每条数据后面随着一串‘2017-01-20 15:30:23’肯定会很丢脸。空想的效果是，短韶光内（例如半小时内）就显示一次发送韶光，当天谈天记录就只显示时分秒，本日以前的谈天就显示年月日时分秒。如果判断是否当天还好说，可是判断是否间隔上一条记录（严格来说是上一条显示韶光的记录）半小时以内就要动动脑筋了。
3，中框的谈天信息展示肯定要随时更新的，如果你发送一条信息用post提交，相称于刷新一次页面还好理解。但是如果是收到一条信息又怎么能即时刷新呢。
4，倘若中框的谈天记录有10条，窗口大小只能显示5条，怎么能让它显示到最底部一条信息。当然，你可以只让它获取到最近5条数据，但是如果某一条数据内容特殊长，还是会涌现滚动条，还是不是显示页面底部。
5，发送信息采取ctrl+enter发送，由于如果只按enter发送，就不能换行了。网上可以搜到干系代码，但是很有可能涌现ctrl+enter键按下时，打开新的窗口。以是我不才面会放上测试好的代码。
6，当谈天页面处于关闭状态，收到新信息会有提醒。这一点比较随意马虎就不说了。其余一种情形，你在谈天页面与某一个好友谈天时，另一个或多个好友来时，也须要在对应的头像和分组菜单有提醒。
7，发送办法一样平常采取post提交，提交后页面刷新也能获取到最新。但是如果提交信息用的是其它接口（比如用微信"大众年夜众号发送），就会首先获取到接口返回的数据后才能算发送成功，才能进行写入数据库或其它操作。在这个过程可能会3到5秒，体验效果就会变差。以是建议采取ajax异步提交，并且提交后利用Js显示到聊天主窗口（发送中状态），当收到ajax发送成功的反馈时刷新页面，否则提示发送失落败。
针对以上的问题，不才面逐一解答或者直接粘贴代码。
问题一思路：把获取到的最近5条信息遍历出来，逆序赋值给一个变量，然后把这个变量当成html元素放到页面。
$res= mysql_query(“select from msg where sid= 23 and user=23 order bycreat_time limit 0,5”);//从数据库获取最近5条数据
$str= ‘’;//声明变量
While($rows = mysql_fetch_array($res))
{
$str = “<div><span>{$rows[‘name’]}</span><span>{$rows[‘con’]}</span></div>”.$str;
}
Html 部分
<divclass=”content”>
{$str}
</div>
问题二思路：是否当天可以用拿到的韶光与当天日期进行比较（如果字段有时分秒可以截取前10位），判断是否与上一条显示韶光相隔半小时，就须要先声明一个韶光变量，当每次须要显示韶光时就赋值一次。
这里还有一个问题，由于显示时第一条信息是5条里面最早的，末了一条是最近的，然后获取数据的顺序恰好相反。以是判断韶光是否相隔半小时，是拿到的一条韶光与下一条韶光做比较。这当然是不可能的。那么我想到的方法先把获取的数据赋值给数组，再用数据遍历输出。
问题三思路：在<head>里加入一行代码
<metahttp-equiv=\公众Refresh\"大众 content=\公众5;URL=imshow.php\"大众>
让这个页面每5秒刷新一次。这当然是个方法，只是不太好。缘故原由很大略，页面会不断的闪动也会占用做事器承载量。以是建议用ajax获取是否有新，如果有，则启动刷新。
functionget_msg(){
var str = '';
$.get(\"大众./ajax/ajax_wechat_new_list.php?uid=\公众+uid+\公众&mid=\"大众+mid,function(data,status){
if(data>0){
window.location.reload();
}
});
setTimeout(function(){
get_msg();
},3000)
}
get_msg();
问题四思路：这个问题是个很实用的问题，曾很困扰。我考试测验用仿照点击事宜，自动运行js效果都不太好。实在最大略的方法是在页面末端加一个全局选择器，例如id.
<astyle=\"大众text-indent:-9999px\"大众 id=\"大众go_foot\公众href=\"大众#go_foot\公众></a>
然后在url地址尾处加一个#go_foot,,,倘若不好用的话，再设置瞄点仿照点击。
document.getElementById('go_foot').click();
问题五思路：
$(\公众#sms_content\"大众).keyup(function(event){
if(event.ctrlKey && event.which ==13) //13即是回车键(Enter)键值,ctrlKey 即是 Ctrl
{
$('#send').trigger(\"大众click\"大众);
}
});
备注：个中‘sms_content’是input提交标签的Id, keyup（松开按键）可以改为keydown（按下键盘），但是会涌现打开新窗口的情形。
问题六思路：预先给每个好友设置好提醒的html元素（id名须要与该好友的id干系联以便查找），并处理隐蔽状态。当用ajax获取到该好友的新时，则找到对应标签变为显示状态。
functionget_msg(){
var str = '';
$.get(\"大众./ajax/ajax_wechat_notice1.php?uid=\"大众+uid+\"大众&show=\"大众+show,function(data,status){
if(data!=0){
varmsg = eval(\"大众(\"大众+data+\"大众)\"大众);
for(vari=0;i<msg.length;i++)
{
varmid = msg[i].id;
vartime = msg[i].time;
varcon = msg[i].msg.substring(0,16)+'...';
$(\"大众#show_msg\"大众+mid).show();
$(\公众#show_msg\"大众+mid).parent().prevAll('.time_tag').text(time);
$(\公众#show_msg\公众+mid).parent().prevAll('.ext').children('.new_msg').text(con);
$(\公众#show_msg\公众+mid).parent().parent().parent().prev().prev('.group_user').children('img').show();
}
}
});
setTimeout(function(){
get_msg();
},10000);
}
get_msg();
备注：以上代码在提醒的同时，也会获取到未读的发送韶光和内容，须要在干系页面设置，仅供参考。
问题七思路：首先在中框谈天列表的页面里，预先插入一条备用谈天记录（包括发送人，发送信息，发送中状态图标），使其隐蔽状态。当点击发送时，须要处理几个动作。a,利用ajax把文本框内容发送，b,文本框的内容赋值给备用谈天记录，c,令备用谈天记录可见，同时文本框内容清空d,仿照点击事宜让谈天页面显示底部，f,获取ajax发送反馈，如果成功则刷新谈天记录窗口。如果失落败利用js把发送中图标改为失落败图标，并且弹出发出失落败的反馈信息。
