暂停更新！！！
由于博主需要去实习，所以近期会停止一段时间更新博客，什么时候更新这就要看情况了。在下面提供一下《web即时通讯项目》的部分前端的页面代码可供新手参考，写的很差，轻喷。
结果预演
HTML
<!DOCTYPE html>
<html>
<head>
<title>
<!-- 此处就用聊天对象名称 -->
</title>
<meta charset="utf-8">
<!-- 样式 -->
<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css">
<link rel="stylesheet" href="css/wechatCSS.css">
<!-- js脚本 -->
<script type="text/javascript" src="lib/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="lib/js/bootstrap.min.js"></script>
</head>
<body>
<dir id="container">
<!-- 待定状态栏 -->
<div id="spread"></div>
<!-- 聊天框主体 -->
<div id="chatDiv">
<div class="chatDiv">
<!-- 聊天对象list -->
<div id="chatObjectList">
<!-- 聊天对象列表item -->
<div class="listTitle">
消息列表
</div>
<div class="listItem">
<div class="lavatar"></div>
<div class="nameBox">你的名字</div>
</div>
<div class="listItem">
<div class="lavatar"></div>
<div class="nameBox">你的名字</div>
</div>
<div class="listItem">
<div class="lavatar"></div>
<div class="nameBox">你的名字</div>
</div>
</div>
<!-- 聊天窗口 -->
<div id="chatWindow">
<div class="title">
你的名字
</div>
<!-- 消息显示框 -->
<div id="showChat">
<div class="msg heSay">
<a class="avatar"></a>
<div class="msg-content">他说的</div>
</div>
<div class="msg iSay">
<a class="avatar"></a>
<div class="msg-content">我说的</div>
</div>
<div class="msg heSay">
<a class="avatar"></a>
<div class="msg-content">他说的他说的他说的他说的他说的他说的他说的他说的他说的他说的他说的他说的
他说的他说的他说的他说的他说的他说的他说的他说的他说的他说他说的他说的他说的他说的他说的他说的他说的他说的他说的他说他说的他说的他说的他说的他说的他说的他说的他说的他说的他说他说的他说的他说的他说的他说的他说的他说的他说的他说的他说</div>
</div>
</div>
<!-- 消息发送框 -->
<div id="chatTextView">
<!-- 多行文本发送框 -->
<div id="textBox"><textarea id="sayMe" class=" sayMe" autofocus="autofocus" maxlength="500" placeholder="这里输入哦(๑•̀ㅂ•́)و✧" wrap="hard"></textarea></div>
<div id="buttonBox"><div class="maxlength">0/500</div><button id="sendMe" class=" sendMe" title="CTRL+Enter键换行">发送</button>
<div id="sendResult" class="sendResult"></div>
</div>
</div>
</div>
</div>
</div>
</dir>
<script type="text/javascript" src="js/wechat.js"></script>
</body>
</html>CSS
/**
作者：kannokaze
*/
*::-webkit-scrollbar {
width:8px;
height:8px;
background:#CCC;
}
*::-webkit-scrollbar-button {
display:none;
}
*::-webkit-scrollbar-track-piece {
display:none;
}
*::-webkit-scrollbar-thumb {
background:#999;
border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
background:#3399CC;
}
/**主体位置大小设定**/
body{ font-size: 12px;line-height: 12px;padding: 0;margin: 0;background: url(../icon/main_bg_l.jpg) top/cover no-repeat fixed;background-position: center;}
#container{ width: 1060px;margin:0 auto; }
#chatDiv{ width: 1020px;margin:0 auto;margin-top: 10px;background-color: rgba(255,255,255,0.5);padding: 10px;border-radius: 4px; }
.chatDiv{ width: 1000px;height: calc(100vh - 120px);position: relative;border-radius: 4px;box-shadow: 0 2px 4px 0 rgba(121,146,185,0.54);overflow: hidden; }
/**待定**/
#spread{ margin-top: 30px;width: 1020px; height: 42px;
background-color: #fff;
-webkit-box-shadow: 0 2px 4px 0 rgba(121,146,185,0.54);
box-shadow: 0 2px 4px 0 rgba(121,146,185,0.54);
-ms-flex-negative: 0;
flex-shrink: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0 16px;
font-size: 15px; color: #666;
border-radius: 4px; }
/**聊天列表设置**/
#chatObjectList{ position: absolute;top: 0;left: 0;width: 250px;height:100%;background-color: #66ccff;overflow: auto;border-right: 1px solid #e9eaec; }
.listTitle{ width: 100%;height: 30px;font-size: 14px;background-color: #ffffff;line-height: 30px;padding-left: 30px;border-bottom: 1px solid #e9eaec;color: #666; }
.listItem{ width: 100%;padding:20px;float: left;cursor: pointer; }
.listItem:hover{ background-color: #e4e5e6 }
.listItem > .lavatar{
display: block;
width: 42px;
height: 42px;
border-radius: 50%;
-ms-flex-negative: 0;
flex-shrink: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url(//static.hdslb.com/images/member/noface.gif);
margin-right: 8px;
position: relative;
float: left; }
.nameBox{ font-size: 14px;padding-top: 5px; }
/**聊天窗口**/
#chatWindow{ position: absolute;top: 0;left: 250px;width:750px;height:100%;background-color: #66cc99; }
#chatWindow > .title{ width: 100%;height: 30px;font-size: 14px;background-color: #ffffff;line-height: 30px;padding-left: 30px;text-align: center;border-bottom: 1px solid #e9eaec; }
#chatWindow > .title { }
#showChat{ position: absolute;top: 30px;left: 0;width: 100%;height:calc(100vh - 300px);overflow: auto;border-bottom: 1px solid #e9eaec; }
.msg{ padding:0 18px 20px;width: 100%;min-height: 50px;float: left;font-size: 14px; }
/*.iSay{ text-align: right; }
.heSay{ text-align: left; }*/
.avatar{ display: block;
width: 35px;
height: 35px;
border-radius: 50%;
-ms-flex-negative: 0;
flex-shrink: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url(//static.hdslb.com/images/member/noface.gif);
float: left; }
.msg-content{ max-width: 450px;word-wrap: break-word;word-break: break-word;font-size: 14px;padding:14px 14px;margin-bottom: 10px;border-radius: 10px;line-height: 1.5;margin: 0 10px; }
.iSay >.avatar{ float: right; }
.iSay >.msg-content{ float: right;background-color: #66ccff; }
.heSay >.avatar{ float: left; }
.heSay >.msg-content{ float: left;background-color: #ffffff; }
/**聊天输入框**/
#chatTextView{ position: absolute;bottom: 0;width: 100%;height:150px;background-color: #ddeecc; }
#textBox{ padding-top:20px;width: 700px;margin: 0 auto;padding-bottom: 5px; }
textarea{ width: 100%;height: 80px;resize: none;font-size: 14px;color: #333;background-color: transparent;outline: none;border:none; }
#buttonBox{ width: 700px;margin: 0 auto; }
#sendResult{ float:right;height: 30px;background-color: #fb7299;border-radius: 4px;margin-right: 20px;color: #fff;font-size: 14px;line-height: 30px;transition: all 0.2s ease;opacity: 0; }
.sendResultError{ height: 30px;background-color: #ff2233;border-radius: 4px;margin-right: 20px; }
#sendMe{ cursor: pointer;margin: 0;float:right;position: relative;width: 88px;height: 30px;text-align: center;border: 1px solid #e7e7e7;background-color: #fff;border-radius: 4px; }
.maxlength{ font-size: 14px;float: left;height: 30px;line-height: 30px;color:#666; }JS
/*
* 主体实现
*
*/
! function() {
var
codenChat = "codenChat1.0",
tooKit = {
createElement: function(tag, attr) {
var an, av, e;
e = document.createElement(tag);
//添加元素属性
if (typeof attr === "object") {
for (an in attr) {
av = attr[an];
if (an != 0 || av != 0) {
e.setAttribute(an, av);
}
}
} else if (attr === "string") {
}
return e;
},
},
codenChatElement = function() {
return {
container: getId('container'),
chatDiv: getId('chatDiv'),
chatDivClass: getClassOne('chatDivClass'),
chatObjectList: getId('chatObjectList'),
listTitle: getId('listTitle'),
listItem: getClass('listItem'),
chatWindow: getId('chatWindow'),
title: getId('title'),
showChat: getId('showChat'),
chatTextView: getId('chatTextView'),
textBox: getId('textBox'),
textBoxClass: getClassOne('textBox'),
sendResult: getId('sendResult'),
sendMe: getId('sendMe'),
sendMeClass: getClassOne('sendMe'),
sayMe: getId('sayMe'),
sayMeClass: getClassOne('sayMe'),
maxLength: getClassOne('maxlength'),
heSayElement: ['<div class="msg heSay"><a class="avatar"></a><div class="msg-content"></div></div>'],
iSayElement: ['<div class="msg iSay"><a class="avatar"></a><div class="msg-content"></div></div>'],
listItemElement: ['<div class="listItem"><div class="lavatar"></div><div class="nameBox"></div></div>']
}
},
codenChatProgram = {
codenChatElement: codenChatElement(),
// 发送聊天消息
sendMSG: {
cElement: this.codenChatElement,
ajaxObject: new XMLHttpRequest(),
ajax: function(object) {
var
//
xhr = window.XMLHttpRequest?(this.ajaxObject || new XMLHttpRequest()):new ActiveXObject("Microsoft.XMLHTTP"),
status = true,
responseType=object.dataType || "text";
xhr.onabort = xhr.onerror = xhr.ontimeout = object.error;
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
// console.log(typeof object.success)
if (typeof object.success == "function") {
// object.success(xhr.responseText)
// console.log(responseType === "text")
responseType == "text"?object.success(xhr.responseText):object.success(xhr.responseXML);
}
}
if (xhr.onabort || xhr.onerror || xhr.ontimeout) {
status = false;
}
}
xhr.timeout = object.timeout || 60000;
xhr.open(object.type || 'get', object.url,object.async || true);
// console.log(object.url,object.async || true)
xhr.setRequestHeader("Content-type",object.contentType || "application/x-www-form-urlencoded");
xhr.send(object.data || null);
if (status) {
return true;
}
},
ResultShowView: false,
sendMSGErrorResult: function(msg) {
codenChatProgram.codenChatElement.sendResult.style.opacity = 1;
// alert(codenChatProgram.codenChatElement.sendResult)
codenChatProgram.codenChatElement.sendResult.innerText = msg;
if (!codenChatProgram.sendMSG.ResultShowView) {
codenChatProgram.sendMSG.ResultShowView = true;
setTimeout(function() {
// codenChatProgram.codenChatElement.sendResult.innerText = "";
codenChatProgram.codenChatElement.sendResult.style.opacity = 0;
codenChatProgram.sendMSG.ResultShowView = false;
}, 1800)
}
},
sendMSGSuccess: function(response) {
var cElement = codenChatProgram.codenChatElement;
cElement.showChat.innerHTML += cElement.iSayElement[0];
// a = cElement.sayMe.value.replace(new RegExp("\r\n", "g"),"<br>");
getClass('msg-content')[getClass('msg-content').length - 1].innerHTML = cElement.sayMe.value.replace(/\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029)/g, "<br>");
cElement.sayMe.value = null;
codenChatProgram.displayTool.countWord(cElement.sayMe,cElement.maxLength, 0, 500);4
// cElement.maxLength.innerText = "0/500";
cElement.showChat.scrollTop = cElement.showChat.scrollHeight;
console.log(response);
},
sendMSGAction: function() {
var cElement = codenChatProgram.codenChatElement;
if (cElement.sayMe.value != (null || "")) {
var isActionSuccess = codenChatProgram.sendMSG.ajax({
url: "services.php",
data: "data={ msg:" + cElement.sayMe.value +"}",
type: "post",
success: codenChatProgram.sendMSG.sendMSGSuccess,
error: function() {
}
})
} else {
codenChatProgram.sendMSG.sendMSGErrorResult('不能发送空白文字！');
}
cElement.sayMe.focus();
}
},
UIAction: function() {
var cElement = this.codenChatElement;
cElement.sendMe.onclick = this.sendMSG.sendMSGAction;
cElement.sayMe.onkeyup = function(e) {
//超过500提示
//再计算字数（避免backspace键等的特殊情况，出现计算错误）
codenChatProgram.displayTool.countWord(cElement.sayMe, cElement.maxLength, cElement.sayMe.value.length, 500);
}
cElement.sayMe.onkeydown = function(e) {
var event = e || document.event;
if (e.ctrlKey && e.keyCode == 13) {
cElement.sayMe.value = cElement.sayMe.value + "\r\n";
} else if (e.keyCode == 13 || e.keyCode == 108) {
codenChatProgram.sendMSG.sendMSGAction();
return false;
}
//计算字数
codenChatProgram.displayTool.countWord(cElement.sayMe, cElement.maxLength, cElement.sayMe.value.length, 500);
if (cElement.sayMe.value.length >= 500 && e.keyCode != 8) {
codenChatProgram.sendMSG.sendMSGErrorResult("超过500字咯，无法输入了！");
}
}
},
// 接收消息
acceptMSG: {
cElement: this.codenChatElement,
acceptMSGSuccess:function(){},
acceptMSGAction:function(){
}
},
// 选择聊天对象
selectChatObject:{
},
displayTool: {
countWord: function(object, box, cout, maxSize) {
if (cout < maxSize) {
box.innerText = cout + "/" + maxSize;
box.style.color = "#666";
return;
}
box.innerText = maxSize + "/" + maxSize;
box.style.color = "#fb7299";
}
}
}
function getClassOne(className) {
return document.getElementsByClassName(className)[0];
}
function getClass(className) {
return document.getElementsByClassName(className);
}
function getId(id) {
return document.getElementById(id);
}
codenChatProgram.UIAction();
}()