jQuery模拟实现聊天对话框
分类:实例代码
jQuery模拟实现聊天对话框属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它实现了聊天对话框效果。
可以在输入文字,然后发送,比较好的模拟实现了QQ或者微信聊天效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> body{background:f6f6f6;} *{ padding: 0px; margin: 0px; font-style: normal; list-style-type: none; text-decoration: none; font-family: "微软雅黑"; border:0 none; line-height: 24px; color: #666; outline: 0px; font-size: 12px; } .fl{ float: left; } .fr{ float: right; } .oflr{ overflow: hidden; } .hide{ display:none; } .chatonline{ width: 700px; margin:0 auto; border:1px solid #ddd; border-radius:5px; } .chatonline .poptit{ background: #fff; border-bottom: 1px solid #ddd; } .chatonline .poptit h5{color: #666;} .chatonline .poptit a{ background: url(../images/close.png) no-repeat center!important; } .article{overflow: hidden;text-align: left;} .chatpanel{ width: 399px; border-right: 1px solid #ddd; overflow: auto; padding: 10px 15px 0px; height: 190px; } .ordrifo{width: 240px;background: #f8f8f8;height: 180px;} .ordrifo ul,.ordrifo li{padding: 0px;} .chatinfo{padding-bottom: 10px;} .chatinfo span{color: #999;display: block;} .chatinfo .text{ border-radius: 5px; background: #f0f0f0; padding: 5px 10px; position: relative; display: inline-block; *display: inline;*zoom: 1; } .chatinfo .text p{color: #333;} .chatinfo .arrl{ display: block; width: 10px; height: 12px; position: absolute; top: 50%; left: -10px; margin-top: -6px; background: url(../images/chat_arrl.png) no-repeat; } .isendmsg{text-align: right;} .isendmsg span{text-align: right;} .isendmsg .arrr{ display: block; width: 10px; height: 12px; position: absolute; top: 50%; right: -10px; margin-top: -6px; background: url(../images/chat_arrr.png) no-repeat; } .isendmsg .text{background: #43a1f1;} .isendmsg .text p{color: #fff;} .typetext{overflow: hidden;clear: both;border-top: 1px solid #ddd;padding: 15px;} .typetext textarea{width: 558px;height: 40px;border-right:0 none;border-radius: 0px;} .typetext button{ vertical-align: top; width: 100px; height: 48px; border-radius: 0px; background: #008cf0; color: #fff; } </style> <script src="http://www.hibity.com/js/jquery-1.11.3.min.js"></script> <script> $(function(){ function datetime(){ var mydate = new Date(); var str = "" + mydate.getFullYear() + "年"; str += (mydate.getMonth()+1) + "月"; str += mydate.getDate() + "日 "; str += mydate.getHours() + ":"; str += mydate.getMinutes() + ":"; str += mydate.getSeconds(); return str; } $(".typetext button").click(function(){ if ($(".typetext textarea").val().length<1) { alert("请输入内容"); }else{ $(".ichat_mudul .chatinfo p").text($(".typetext textarea").val()); $(".chatinfo .time").text(datetime); $(".ichat_mudul .chatinfo").clone().appendTo('.chatpanel'); $(".chatpanel").scrollTop( $('.chatpanel')[0].scrollHeight); $(".typetext textarea").val(""); } }); }) </script> </head> <body> <div class="popmain chatonline"> <div class="poptit"> <h5>问题件处理</h5> <a class="close" href="javascript:;"></a> </div> <div class="article oflr"> <div class="chatpanel fl"> </div> <div class="ordrifo tpadig fr"> <ul class="writefrom"> <li><span>客户单号:</span>123456</li> <li><span>服务商单号:</span>88888</li> <li><span>运输方式:</span>FedEx-SP</li> <li><span>问题类型:</span>有货无单</li> <li><span>处理人:</span>前端教程网</li> <li><span>发生时间:</span>2017-03-28 02:12:45</li> </ul> </div> <div class="typetext"> <textarea name="" placeholder="请输入内容" ></textarea> <button>发送</button> </div> <!-- 发送消息的模板 --> <div class="ichat_mudul hide"> <div class="chatinfo isendmsg"> <span class="time"></span> <div class="text"> <i class="arrr"></i> <p></p> </div> </div> </div> <!-- / --> </div> </div> </body> </html>
jQuery模拟实现聊天对话框,这样的场景在实际项目中还是用的比较多的,关于jQuery模拟实现聊天对话框就介绍到这了。