前端随意开发一个聊天室DEMO(可扩展)
示例：
希望各位小伙伴多多点赞收藏转发
源码给上：
HTML
<div id="talk-window" class="talk-window">
<div class="tw-title">
聊天窗口
<span class="close-tw-window">×</span>
</div>
<div class="tw-content">
<div class="talk-list-div">
<a href="javascript:;" id="bottom-link"></a>
</div>
<div class="talk-operate-div">
<div class="talk-operate-btn-list">
可添加emoji表情等附加功能按钮
</div>
<div class="talk-operate-textarea">
<textarea id="msg-text"></textarea>
</div>
<div class="send-btn">
<span onclick="sendMsg();">发 送</span>
</div>
</div>
</div>
</div>
CSS
* {
margin:0;
padding:0;
box-sizing:border-box;
}
.talk-window {
width:450px;
height:400px;
background-color:whitesmoke;
box-shadow:0 0 10px #ccc;
position:fixed;
bottom:10px;
right:30px;
}
.tw-title {
text-align:center;
line-height:40px;
font-size:14px;
font-weight:bold;
color:#666;
position:relative;
}
.close-tw-window {
display:inline-block;
width:20px;
height:20px;
position:absolute;
right:10px;
top:10px;
line-height:20px;
font-size:24px;
cursor:pointer;
color:#666;
}
.close-tw-window:hover {
color:#333;
}
.tw-content {
padding:0 10px 150px;
width:100%;
height:calc(100% - 40px);
}
.talk-list-div {
width:100%;
height:100%;
border:5px double #ccc;
padding:5px 10px;
overflow:auto;
}
.msg-div {
overflow:hidden;
margin:20px 0;
}
.other-msg-div {
float:left;
max-width:260px;
position:relative;
padding-left:35px;
}
.header-img-div {
width:30px;
height:30px;
overflow:hidden;
border-radius:30px;
}
.other-msg-div .header-img-div {
position:absolute;
left:0;
top:5px;
}
.my-msg-div {
float:right;
max-width:260px;
position:relative;
padding-right:35px;
}
.my-msg-div .header-img-div {
position:absolute;
right:0;
top:5px;
}
.header-img-div img {
width:100%;
height:100%;
}
.msg-content {
padding:10px;
border-radius:5px;
}
.other-msg-div .msg-content {
background-color:#f4ecdd;
color:#333;
}
.my-msg-div .msg-content {
background-color:#403dff;
color:white;
}
.talk-operate-div {
width:100%;
height:150px;
position:absolute;
bottom:0;
left:0;
padding:5px 10px 0 10px;
}
.talk-operate-btn-list {
width:100%;
height:30px;
line-height:30px;
background-color:white;
margin-bottom:5px;
font-size:12px;
}
.talk-operate-textarea {
height:75px;
}
.talk-operate-textarea textarea {
width:100%;
max-height:70px;
min-height:70px;
height:70px;
padding:5px 10px;
background-color:white;
outline:none;
max-width:100%;
min-width:100%;
resize:none;
}
.send-btn {
text-align:right;
}
.send-btn span {
display:inline-block;
padding:0 20px;
background-color:#403dff;
color:white;
font-size:14px;
line-height:30px;
cursor:pointer;
border-radius:5px;
}
JS
var replyData = [
'[自动回复]您好，我现在有事不在，一会再和您联系',
'[自动回复]因为工作的关系，曾面对无数好友呼叫不能回应，最痛苦的事莫过于此。如果给我一次机会，我要说三个字：我离开。如果一定要给这三个字加个期限，我希望是：一会儿！',
'[自动回复]这次是我不经意的离开，却造成我们失之交臂的遗憾。于是我忘记了吃饭，无法再安睡，于是我不甘寂寞急忙归来。',
'[自动回复]您所呼叫的用户尚在厕所中，稍后请拿厕纸给他！',
'[自动回复]你所呼叫的用户正在系统整理，请稍后再呼。',
'[自动回复]你好，我去杀几个人，很快回来。',
'[自动回复]对不起，你所联系的用户因为太过帅气，已被TC公司删除。详情请咨询110，谢谢，再见。',
'[自动回复]走开一下，如果3分钟之内还没回请不要发飙，因为我正在对着设相头摆POSE！',
'[自动回复]有事留下你的真实姓名,家庭住址,电话号码,你的银行账号和密码、我会和你联系!?',
'[自动回复]计算机正在处理你的信息，请稍候，如果长时间没有响应，请重新启动计算机！',
];
function sendMsg() {
if (!$("#msg-text").val()) {
return;
}
var scrollHeight = 0;
var str = '<div class="msg-div">';
str += '<div class="my-msg-div">';
str += '<div class="header-img-div">';
str += '<img src="http://www.jq22.com/img/cs/500x500-2.png" />';
str += '</div>';
str += '<div class="msg-content">';
str += $("#msg-text").val();
str += '</div>';
str += '</div>';
str += '</div>';
$("#bottom-link").before(str);
scrollHeight = $('.talk-list-div').prop("scrollHeight");
$('.talk-list-div').scrollTop(scrollHeight, 200);
$("#msg-text").val("").focus();
setTimeout(function() {
reply();
}, 300);
}
function reply() {
var num = parseInt(Math.random() * 10);
var str = '<div class="msg-div">';
str += '<div class="other-msg-div">';
str += '<div class="header-img-div">';
str += '<img src="http://www.jq22.com/img/cs/500x500-3.png" />';
str += '</div>';
str += '<div class="msg-content">';
str += replyData[num];
str += '</div>';
str += '</div>';
str += '</div>';
$("#bottom-link").before(str);
scrollHeight = $('.talk-list-div').prop("scrollHeight");
$('.talk-list-div').scrollTop(scrollHeight, 200);
}
$(function() {
$('#msg-text').bind('keypress', function(event) {
if (event.keyCode == "13") {
event.preventDefault();
sendMsg();
}
});
})
