js实现简易微信聊天

html

  <div class="background"><div class="box"><div class="header">鸡哥</div><div class="chat1" id="chat1"> </div><input type="text" class="txt" id="txt1"><span class="btn" id="btn1">发送</span></div><div class="box"><div class="header">ikun</div><div class="chat2" id="chat2"></div><input type="text" class="txt" id="txt2"><span class="btn" id="btn2">发送</span></div>
</div>

css

*{margin: 0px;padding: 0px;}
.background{width: 1500px;height: 800px;background: #999;
}
.box{width: 300px;height: 700px;border: 0px solid black;position: relative;left: 100px;float: left;margin: 20px 50px 0 0;
}
.header{width: 99.6%;height: 50px;background: #fff;border: 1px solid black;text-align: center;line-height: 50px;font-size: 20px;
}
.chat1{width: 100%;height: 612px;background: url(../img/vx1.webp);float: left;overflow: scroll;
}
.chat2{width: 100%;height: 612px;background: url(../img/vx2.webp);background-size: 100% 100%;float: left;overflow: scroll;
}
.content-txt{border: 0px solid red;padding: 8px;float: right;width: 95%;margin: 0 0 8px 0;
}
.content-txt2{border: 0px solid red;padding: 8px;float: left;width: 95%;margin: 0 0 8px 0;
}
.header2{float: right;width: 30px;height: 30px;border-radius: 100%;margin: 0px 0px 0 10px;
}
.header3{float: left;width: 30px;height: 30px;border-radius: 100%;margin: 0px 10px 0 0px;
}
.pao{float: right;border-radius: 5px;background: greenyellow;padding: 5px 10px;max-width: 200px;
}
.pao2{float: left;border-radius: 5px;background: greenyellow;padding: 5px 10px;
}
/* .txt6{width: 85%;
} */
.txt7{width: 85%;float: right;
}
.txt{display: inline-block;width: 75%;height: 35px;position: absolute;bottom: 0px;left: 0px;border: 0px;border-top: 1px solid black;background: #fff;
}
.btn{display: block;border: 1px solid black;width: 25%;height: 35px;line-height: 30px;text-align: center;position: absolute;bottom: -1px;right: 0px;background: #ddd;cursor: pointer;
}

var oTxt1 = document.getElementById("txt1"),oBtn1 = document.getElementById("btn1"),oChat1 = document.getElementById("chat1"),oChat2 = document.getElementById("chat2"),oTxt2 = document.getElementById("txt2"),oWords1 = document.getElementById("words1"),oWords2 = document.getElementById("words2"),oBtn2 = document.getElementById("btn2");
oBtn1.onclick = function (){oChat1.innerHTML += "<div class='content-txt'><img src='img/h1.webp' class='header2'/><p class='txt6'><span class='pao'>"+oTxt1.value+"</span></p></div>";oChat2.innerHTML += "<div class='content-txt2'><img src='img/h1.webp' class='header3'/><p class='txt7'><span class='pao2'>"+oTxt1.value+"</span></p></div>";oTxt1.value = "";
}
oBtn2.onclick = function (){oChat2.innerHTML += "<div class='content-txt'><img src='img/h2.webp' class='header2'/><p class='txt6'><span class='pao'>"+oTxt2.value+"</span></p></div>";oChat1.innerHTML += "<div class='content-txt2'><img src='img/h2.webp' class='header3'/><p class='txt7'><span class='pao2'>"+oTxt2.value+"</span></p></div>";oTxt2.value = "";
}

效果图

js实现简易微信聊天相关推荐

Android实现强制下线（不同应用之间）功能————简易微信聊天示例
具体需要看具体的实际情况,这是曾经遇到的问题以及解决方案实现强制下线(不同应用之间)功能----简易微信聊天示例强制下线功能需要先关闭所有活动,然后在回到登录界面. 新建一个ActivityCol ...
帮我用js写一个微信聊天那种气泡效果
当然可以! 下面是一个使用 JavaScript 实现微信聊天气泡效果的示例代码: .bubble {position: relative;background: #f1f1f1;border-rad ...
基于node.js实现分销类微信聊天机器人
基于node.js实现分销类微信聊天机器人文章目录基于node.js实现分销类微信聊天机器人前言一.涉及技术栈二.实现代码 1.登录模块 2.聊天消息接收事件总结 git地址前言最近遇 ...
使用js实现的带输入状态的简单的仿微信聊天界面
使用js实现的简单的仿微信聊天界面,实现固定的聊天回复功能,只能是固定的5句,但是回复的内容可以在代码的判断中进行修改. 实现的效果有:1.实现仿微信的聊天界面 2.实现仿微信的正在输入功能. 原理: ...
node.js,微信聊天
微信聊天 app.js var express = require('express'); var app = express();//实例化一个express的app服务器创建express服务器 ...
微信聊天框（html+css+js）实现
微信聊天框(html+css+js)实现 1.来源这是我在哔哩哔哩的上面的一个js网课的案例,说是有未添加js的版本(也就是只有样式的html),但我找不到,就只能自己写,比较丑. 主要是小图标,都 ...
html+css+js+python(QtWebEngineWidgets) 实现微信聊天界面-包括时间，文件，纯文本等
文章目录展示参考文章 html + js + css python 代码地址 user目录下的 chat.py为主页面, 图片都在user/images/filetype下面相关资源展示纯h ...
js封装毫秒时间戳转换仿微信聊天时间显示格式
js封装毫秒时间戳转换仿微信聊天时间显示格式先把微信的时间显示规则拍上来微信聊天消息时间显示说明 1.当天的消息,以每5分钟为一个跨度的显示时间: 2.消息超过1天.小于1周,显示星期+收发消息的 ...
js模拟群聊天php,jquery仿微信聊天界面实例分享
本文主要为大家详细介绍了jquery仿微信聊天界面的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 首先看一下我们的效果图. 这个颜色可能搭配的有些不合适,但基本功能大 ...

js实现简易微信聊天

js实现简易微信聊天相关推荐

最新文章

热门文章