终于有点时间写点博客了，最近在忙着找工作的事情。在进入正题之前，我必须得感谢下PHP中文网的所有老师，他们让我对前端有了更清晰的理解。不管什么问题，一个人很难考虑的很全面，但是多个人就不一样了，每个人的出发点不同，思考方式或也不尽相同，人数多了想到的自然会很全面，一个项目的完成如果包含了很多人的努力，那么用户体验、业务逻辑等肯定会很棒。前端这个圈子说大不大，感谢大家给我一个温馨的大家庭。大家在一起学习，聊聊技术，彼此相互照应，挺好。闲话不多说了，且进入正题。
1.首先预览下页面效果：
2.布局的HTML文档没什么好说的，消息区域用无序列表。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>聊天室</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/move3.js" charset="utf-8"></script>
<script src="js/javascript.js" charset="utf-8"></script>
</head>
<body>
<div>
<div>
<div>仿微信聊天</div>
<span id="time">00:00:00</span>
</div>
<ul id="chatContent">
</ul>
<div>
<input type="text" id="txt1"name="" value="" placeholder="请输入...">
<input type="button" id="btn" name="" value="发送">
</div>
</div>
</body>
</html>
3.层叠样式表部分，浮动和绝对定位混合使用来定位
style.css
html,body,ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.chat {
width: 450px;
height: 770px;
background: #eee;
margin: 20px auto 0;
box-shadow: 20px 20px 55px #777;
}
.chat .head {
width: 450px;
height: 45px;
background-color: #000000;
position: relative;
}
.chat .head .center {
display: inline-block;
position: absolute;
left: 90px;
width: 60%;
height: 45px;
text-align: center;
color: #FFEFE4;
line-height: 45px;
font-weight: bolder;
}
.chat .head span {
display: block;
line-height: 45px;
float: right;
color: white;
}
.chat #chatContent {
width: 450px;
height: 660px;
overflow: auto;
}
.chat .bottom{
width:434px;
height: 49px;
padding: 8px;
background-color: #666666;
}
.chat .bottom #txt1{
width: 330px;
height: 44px;
/*outline: solid 1px;*/
border-radius: 6px;
font-size: 20px;
}
.chat .bottom #btn {
width: 80px;
height: 47px;
color: white;
font-size: 22px;
border-radius: 6px;
/*background-color:#7DFC00;*/
background-color: #19AD17;
border:0px;
}
.chat #chatContent li >img{
width: 30px;
height: 30px;
display: inline-block;
border-radius: 50%;
/*float: right;*/
}
.chat #chatContent li>span {
padding: 10px;
/*float: right;*/
display: inline-block;
margin: 6px 10px 0 10px;
/*important*/
max-width: 310px;
border: 1px solid #ccc;
box-shadow: 0 0 3px #ccc;
background-color: #7DFC00;
border-radius: 6px;
padding: 10px;
}
.chat #chatContent li {
margin-top: 10px;
padding-left: 10px;
width: 412px;
margin: 2px 0;
display: block;
clear: both;
overflow: hidden;
}
.clear {
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
4.最重要的部分到了，原生JS实现人机交互和页面动态，具体的功能说明代码中我都加了注释
javascript.js
window.onload=function () {
var oBtn=document.getElementById('btn');
var oTxt=document.getElementById('txt1');
var oUl=document.getElementById('chatContent');
var oTime=document.getElementById('time');
// 标准化时间
function toDouble(num) {
if (num<10) {
return '0'+num;
}else {
return ''+num;
}
}
// 获取并返回时间字符串
var showTime=function () {
var oDate=new Date();
var hour=oDate.getHours();
var min=oDate.getMinutes();
var sec=oDate.getSeconds();
return ''+toDouble(hour)+':'+toDouble(min)+':'+toDouble(sec);
}
// 设置定时器定时刷新时间
setInterval(function () {
oTime.innerHTML=showTime();
},30);
// enter键键盘点击事件
document.onkeydown=function (ev) {
var oEvent=event||ev;
if (oEvent.keyCode==13) {
submit();
}
}
// 实现提交聊天内容
submit=oBtn.onclick=function () {
var timeStr=showTime();
var oLi=document.createElement('li');
oLi.innerHTML += '<img src="image/me.jpg" class="fr"><span class="fr"><span style="color:yellow;font-size:16px;">'+timeStr+'</span><br>'+oTxt.value+'</span>';
donghua();
// oUl.appendChild(oLi);
oTxt.value='';
var aData=['你好','吃饭没','吃饱了没','再来一瓶可乐','可以打包吗','您要买什么','我喜欢这条裤子','你要去哪里','这儿附近有饭馆吗'];
var oLi=document.createElement('li');
oLi.innerHTML += '<img src="image/github1.jpg" class="fl"><span class="fl" ><span style="color:yellow;font-size:16px;">'+timeStr+'</span><br>'+aData[Math.floor(Math.random()*aData.length)]+'</span>';
donghua();
// oUl.appendChild(oLi);
// 实现消息框延时滑出
function donghua() {
oUl.appendChild(oLi);
var iHeight=oLi.offsetHeight;
oLi.style.height='0';
startMove(oLi,{height:iHeight},function(){
// 内容过多时加滚动条
oUl.scrollTop=oUl.scrollHeight;
startMove(oLi,{opacity:100});
});
}
}
}
5.消息框延时滑出函数的定义部分
move3.js
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
}else {
return getComputedStyle(obj, false)[name];
}
}
function startMove(obj, json,fnEnd) {
clearInterval(obj.timer);
obj.timer=setInterval(function () {
// 假设所有的属性值都到达了目标值
var bStop=true;
for(var attr in json){
var cur=0;
if (attr=='opacity') {
cur=Math.round(parseFloat(getStyle(obj, attr))*100);
}else {
cur=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr]){
bStop=false;
}
if (attr=='opacity') {
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}else {
obj.style[attr]=cur+speed+'px';
}
}
if (bStop) {
clearInterval(obj.timer);
// alert('abc');
if(fnEnd)fnEnd();
}
},30);
}
6.issue与后期改进
经过测试，发现当消息区域的消息满屏后，后面输入的内容会在下面，经过修改后，提交消息时滚动条会先猛的向下一滑，很不自然，然后消息框动画正常显示。第二，aData数组数据内容不够全面，甲发出一条消息后乙的回复是随机的，这样不太好。应该可以做出根据甲的内容，乙的回复符合人类日常用语的逻辑，微软小娜是个不错的好例子，完成这个功能应该需要字符串搜索等的技术的支持。第三，这个还仅仅是一个基于前端的项目，应该拓展一下，加入服务器端的功能，使其可以实现远程聊天。这些我有时间了会去尝试一下，欢迎大家给出好的建议和改进。
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
