纯js 实现简单聊天室，可发送表情、图片、发送消息时间

对项目代码有什么不懂的，欢迎留言一起探讨

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>客服</title><link rel="stylesheet" type="text/css" href="../css/Cservice.css" /><link rel="stylesheet" href="../css/base.css"><style type="text/css">.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style><script type="text/javascript" src="//at.alicdn.com/t/font_2970465_b49mc7of9fp.js"></script>    <script src="../js/emoji-lib/emoji-list-with-image.js"></script></head><body><div class="wrap"><div class="left"><div class="UserHead"><div class="UserTop"><svg class="icon userT" aria-hidden="true"><use xlink:href="#icon-32"></use></svg><!-- <div class="name">123 <br> <svg class="icon iconName" aria-hidden="true"><use xlink:href="#icon-32"></use></svg></div> --></div><div class="souSuo"><svg class="icon sou" aria-hidden="true"><use xlink:href="#icon-sousuo"></use></svg><input type="text"></div></div><ul><li class="xuanZhong"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-icon-test"></use></svg>好友1 <span>官方</span></li><li><svg class="icon" aria-hidden="true"><use xlink:href="#icon-icon-test1"></use></svg>好友2</li><li><svg class="icon" aria-hidden="true"><use xlink:href="#icon-icon-test2"></use></svg>好友3</li></ul></div><div class="right"><div class="Rhead"><svg class="icon kefu" aria-hidden="true"><use xlink:href="#icon-38"></use></svg>杨杨</div><div class="content"><div class="dialogue"></div><div class="text"><div class="TextTop"><!-- 表情 --><div class="emoji-cont"></div><svg class="icon" aria-hidden="true" onclick="showEmoji()"><use xlink:href="#icon-smiling"></use></svg><!-- 图片 --><input class="file" type="file" name="file" accept="image/*" onchange="selectImg(this)" /> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-tupian"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jushoucang"></use></svg></div><div contenteditable="true" class="textarea"></div><div class="Enter">发送</div></div></div></div></div></body>
</html>
<script src="../js/Cservice.js"></script>

body {background: rgb(46, 47, 61);
}.wrap {width: 900px;height: 550px;background: #fff;margin: 100px auto;margin-top: 100px;margin-right: auto;margin-bottom: 100px;margin-left: auto;display: flex;
}/* 左边 */
.left {height: inherit;width: 30%;border-right: 1px solid #e1e1e1;
}.UserHead {padding: 10px;background: rgb(255, 76, 71);
}.UserTop {display: flex;
}.UserTop img {width: 54px;margin-right: 14px;
}.userT {font-size: 38px;margin-right: 10px;
}
.iconName {font-size: 16px;
}
.souSuo {display: flex;background: #fff;border-radius: 2px;margin-top: 10px;height: 30px;
}.souSuo .sou {font-size: 24px;
}.souSuo input {width: 100%;/* height:100% */border: none;box-shadow: 0px 0px 0px #fff;outline:none;}.left ul li {padding: 10px;font-size: 14px;
}.left ul li span {font-size: 12px;padding: 2px 6px;background: yellow;float: right;
}.xuanZhong {background-color: #0086B3;
}.left ul .icon {font-size: 30px;vertical-align: middle;margin-right: 10px;
}/* 右边 */
.right {width: 70%;/* background: red; */
}.Rhead {height: 12%;background: beige;line-height: 60px;
}.Rhead .kefu {font-size: 44px;vertical-align: middle;margin: 0 10px;
}.content {height: 88%;border-bottom: 1px solid #ccc;
}
.text {padding: 0 20px;position: relative;
}
.TextTop {height: 50px;position: relative;display: flex;align-items: center;font-size: 20px;
}.clearfix {width: 22.5rem;height: 12rem;border: 1px solid #CCC;border-right: none;position: absolute;display: flex;flex-wrap: wrap;bottom: 50px;overflow-x: hidden;overflow-y: scroll;background: #fff;left: -8px;
}
.clearfix li {width:28px;text-align:center;border-right:1px solid #ccc;border-bottom:1px solid #ccc;box-sizing: border-box;
}
.TextTop .icon {font-size: 20px;margin-right: 10px;}
.TextTop .file {width: 25px;height: 18px;position: absolute;left: 28px;top: 15px;opacity: 0;
}
.fileImg {width: 12rem;}
.dialogue {width: 100%;height: 64%;padding: 14px;box-sizing: border-box;overflow-x: hidden;overflow-y: scroll;
}.textarea {min-height: 88px;outline:none;overflow-y: auto;font-size: 0.9em;
}
.textAlign {text-align: center;
}
.right2 {display: flex;flex-direction: row-reverse;margin-bottom: 0.625rem;
}
.huanHang {width: 200px;word-wrap:break-word;
}
.right2 > div {padding: 10px;word-wrap:break-word;white-space:normal;background: rgb(208, 233, 255);
}
.left2 {display: flex;margin-bottom: 0.625rem;
}
.left2 > div {padding: 10px;word-wrap:break-word;background: rgb(208, 233, 255);
}
.HeadPortrait {width: 2.2rem;height: 2.2rem;margin-left: 14px;
}
.HeadPortrait2 {width: 2.2rem;height: 2.2rem;margin-right: 14px;
}
.Enter {width: 42px;height: 19px;border: 1px solid #999;font-size: #fff;text-align: center;position: absolute;right: 20px;bottom: -27px;}

var oIpt1 = document.querySelector(".textarea")   // 输入框
var oIpt2 = document.querySelector(".Enter");  // 发送按钮
var oText1 = document.querySelector(".dialogue");  // 内容【框var timeY = ''
console.log(timeY)
oIpt2.onclick = function() {faSong()cont.style.display = "none"fa = false
}
// 发送消息
function faSong() {var timestamp = Date.parse(new Date()); // 获取时间戳var newDate = new Date();var nian = newDate.getFullYear() // 年var month = newDate.getMonth() // 月var tian = newDate.getDate() // 日var oHouer = newDate.getHours(); // 时var oMinutes = newDate.getMinutes(); // 分var box1 = document.createElement("div")var oDiv1 = document.createElement("div")var box2 = document.createElement("div")var oDiv2 = document.createElement("div")var miteBox = document.createElement("div")// 头像var HeadPortrait = document.createElement("img")var HeadPortrait2 = document.createElement("img")HeadPortrait.src = "../images/9.png"HeadPortrait2.src = "../images/mm.png"HeadPortrait.className = "HeadPortrait"HeadPortrait2.className = "HeadPortrait2"box1.className = "right2"box2.className = "left2"miteBox.className = "textAlign"oDiv1.innerHTML = oIpt1.innerTextbox1.appendChild(HeadPortrait);box1.appendChild(oDiv1);var html =`<div><span style="font-size:0px" class="shijianchuo">${timestamp}</span>${tian}号${oHouer}:${oMinutes}</div>`if (!timeY) { // 先定义一个开关 ， 第一次进入第一层判断console.log("1")timeY = timestamp // 将最新的时间戳放到开关里miteBox.innerHTML = html // 把最新的时间渲染到页面} else if (timestamp - timeY > 20000) { //  如果这一条件成立 说明消息上一条消息时间间隔已经大于预定的值了(可以间隔1分~xx分自己定) 需要把最新的时间渲染到页面 然后把最新的消息的时间变更为最新的时间console.log(timestamp - timeY)timeY = timestampmiteBox.innerHTML = html} else { // 如果上面的条件不成立 就说明消息在接连发送，不需要渲染最新的时间到页面  ，将最新的时间赋值到上一次发送消息的时间  console.log("3")timeY = timestamp}oText1.appendChild(miteBox);oText1.appendChild(box1);if (oDiv1.offsetWidth > 200) { // 消息宽的长度超过 200px 就添加一个换行的类样式console.log(oDiv1.offsetWidth)oDiv1.className = "huanHang"}var iFtext = oIpt1.innerTextoIpt1.innerText = ''// 聊天机器人if (iFtext == "你好") {oDiv2.innerText = "你好";} else if (iFtext == "给我讲个笑话" || iFtext == "笑话") {oDiv2.innerText = "哈哈哈哈哈哈哈哈"} else {oDiv2.innerText = "抱歉！我还需多加学习"}// 插入消息 box2.appendChild(HeadPortrait2);box2.appendChild(oDiv2);oText1.appendChild(box2);// 每次有新消息滚动条都在最底部oText1.scrollTop = oText1.scrollHeight;}// 表情
var fa = false
//点击展示表情
var cont = document.querySelector(".emoji-cont")
console.log(cont)function showEmoji() {console.log("1111")if (fa) {cont.style.display = "none"fa = false} else {cont.style.display = "block"fa = true}let that = thisthis.renderEmoji();//点击表情将表情添加在emoji中var liArr = document.querySelectorAll(".emoji-icon")liArr.forEach(function(element) {element.onclick = function() {var code2 = this.getAttribute("unicode16")console.log(code2)var te = "&#" + parseInt(code2, 16) + ";"console.log(te)oIpt1.innerHTML += te;}});
}//表情列表
function renderEmoji() {var emos = getEmojiList()[0];console.log(emos)var html = '<ul class="clearfix">';for (var j = 0; j < emos.length; j++) {var emo = emos[j];// console.log("1")var data = 'data:image/png;base64,' + emo[2];if (j % 20 == 0) {// console.log("2")html += '<li >';} else {// console.log("3")html += '<li >';}html +=`<img style="display: inline;vertical-align: middle;" src="${data}"  unicode16="${emo[1]}"  class="emoji-icon"  /></li>`;}cont.innerHTML = html}
//表情 通过该方法 可以直接把表情在输入框中显示出来。
function parse(arg) {console.log(ioNull)if (typeof ioNull != 'undefined') {return ioNull.emoji.parse(arg);}return '';
}// 发送图片
var img = "";function selectImg(source) {var file = source.files[0];if (window.FileReader) {var fr = new FileReader();fr.onloadend = function(e) {// 通过img属性src设置显示区var img3 = document.createElement("img")var fileImgBox = document.createElement("div")// 头像var HeadPortrait = document.createElement("img")var HeadPortrait2 = document.createElement("img")HeadPortrait.src = "../images/9.png"HeadPortrait2.src = "../images/mm.png"HeadPortrait.className = "HeadPortrait"HeadPortrait2.className = "HeadPortrait2"img3.src = e.target.result;img3.className = "fileImg"fileImgBox.className = "right2"// document.querySelector("oText1")// img 作为传输到服务器的参数fileImgBox.appendChild(HeadPortrait);fileImgBox.appendChild(img3)oText1.appendChild(fileImgBox);// 每次有新消息滚动条都在最底部oText1.scrollTop = oText1.scrollHeight;};// 该方法将文件读取为一段以 data: 开头的字符串，// 这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案// 通过fr用于把图片显示出来fr.readAsDataURL(file);}
}

纯js 实现简单聊天室，可发送表情、图片、发送消息时间相关推荐

node.js入门 - 2.创建一个简单聊天室
这篇文章将通过开发一个简单聊天室的方式,介绍node.js的net模块. 一.第一版,只向客户端发送信息我们先实现一个简单的版本,代码如下: var net=require('net'); va ...
利用socket.io+nodejs打造简单聊天室
代码地址如下: http://www.demodashi.com/demo/11579.html 界面展示: 首先展示demo的结果界面,只是简单消息的发送和接收,包括发送文字和发送图片. ws说明: ...
SpringBoot +WebSocket实现简单聊天室功能实例
SpringBoot +WebSocket实现简单聊天室功能实例) 一.代码来源二.依赖下载三.数据库准备(sql) 数据库建表并插入sql 四.resources文件配置 application ...
swoole 项目实战——实现简单聊天室
前言:了解了概念之后就应该练练手啦,不然就是语言的巨人,行动的矮子啦代码仓库实战 swoole[聊天室] 在线体验准备工作需要先看初识 swoole[上],了解基本的服务端 WebSocket ...
Asp.Net SignalR - 简单聊天室实现
简单聊天室使用持久链接类我们就可以做一些即时通讯的应用了,我使用Group做了一个简单的聊天室,先上图技术细节下面再讲可以加入聊天室.创建聊天室.发送消息,下面就说说我是如何通过Group做出来的 ...
java jsp聊天系统_java web实现简单聊天室
目标 servlet.jsp实现简单聊天室,用户通过浏览器登录后进入聊天室,可发送消息进行群聊,点击聊天信息框中的用户名可实现拍一拍功能. 基础知识数据的存取 setAttribute / getA ...
c聊天室系统asp ajax,利用AJAX和ASP.NET实现简单聊天室
利用AJAX和ASP.NET实现简单聊天室我的第一个简单的Chatroom是用ASP3.0写成的.那无外乎有二个TextBox,他们发送消息给程序变量然后显示在一个每秒刷新的页面上.在那个时代,一 ...
基于C/S模式的简单聊天室
基于C/S模式的简单聊天室要求: 使用Socket实现网上聊天室,要求基于TCP或UDP协议,用户可以通过客户端连接到服务器端并进行聊天,聊天时可以启动多个客户端:服务器启动后,接收客户端发来的用户 ...
java 简单聊天室_java实现简单聊天室单人版
本文实例为大家分享了java实现简单聊天室的具体代码,供大家参考,具体内容如下先整理下思路: 1.创建一个通信服务端,传入端口号和相关的流后等待客户端连接,并初始化图形界面. 2.创建一个JFram ...

纯js 实现简单聊天室，可发送表情、图片、发送消息时间

纯js 实现简单聊天室，可发送表情、图片、发送消息时间相关推荐

最新文章

热门文章