微信聊天框（html+css+js）实现

1.来源

这是我在哔哩哔哩的上面的一个js网课的案例，说是有未添加js的版本（也就是只有样式的html），但我找不到，就只能自己写，比较丑。
主要是小图标，都是用的之前的项目的图标，图片大小看着差不多就行了。还有就是颜色，随便整的。
2.界面

3.功能
功能及比较简单。就是按一下，左下角的小图标，就可以切换聊天者，就两个，user1和user2.
不同的用户，发出的文字分别是两边的，在中间的框内输入，按一下发送，就能在上面的聊天框里看见。
聊天长度大于页面大小的话，右边会出现滚动条（挺难看的，不想改了）。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.fl{float: left;}.clearfixd:after {content: "";display: block;clear: both;}.box{height: 1000px;width: 1000px;overflow: hidden;margin-top: 50px;}.box .phone{height: 520px;width: 280px;margin:50px auto;background:grey;border-radius: 10px;}.box .phone .top{width: 60px;height: 20px;margin: 0 auto;border-bottom: 4px solid black;margin-bottom: 20px;}.box .phone .bottom{height: 435px;width: 250px;margin: 0 auto;background: whitesmoke;}.box .phone .bottom .chat{height: 390px;width: 230px;margin: 0 auto;overflow-y:auto; overflow-x:auto;}.box .phone .bottom .chat ul{list-style: none;width: 230px;}.box .phone .bottom .chat ul li{padding-top: 10px;width: 230px;}.box .phone .bottom .chat .text1{width: 190px;font: 14px "微软雅黑";line-height: 20px;border-radius: 5px;padding: 10px 0;background: rgb(126, 124, 128);}.box .phone .bottom .chat .imag1{height: 30px;width: 40px;background-size: 28px 28px;margin-top: 5px;}.box .phone .bottom .diolog{margin: 6px auto;height: 33px;width: 220px;}.box .phone .bottom .diolog .left{height: 33px;width: 33px;background-size: 33px 33px;}.box .phone .bottom .diolog .txt{height: 33px;width: 147px;border-radius: 7px;background: white;margin-left: 3px;border: none;}.box .phone .bottom .diolog .send{height: 33px;width: 32px;line-height: 33px;font-size: 12px;padding-left: 5px;color: red;}</style>
</head>
<body><div class="box"><div class="phone"><div class="top"></div><div class="bottom"><div class="chat"><ul id="list" ><li class="clearfixd"><div class="text1 fl">第一段文字，单行</div><img class="imag1 fl" src="data:images/icon1.png"></img></li><li class="clearfixd"><img class="imag1 fl" src="data:images/icon2.png"></img><div class="text1 fl">第二段文字，多行哈哈哈哈哈哈</div></li></ul></div><div class="diolog"><img class="left fl" src="data:images/icon1.png"></img><input class="txt fl"></input><div class="send fl">发送</div></div></div></div></div><script>var left =document.querySelector('.left');var txt = document.querySelector('.txt');var send = document.querySelector('.send');var list = document.getElementById('list');var user=1left.onclick = function(){if(user==1){left.src ="images/icon2.png";user=2;}else {left.src="data:images/icon1.png"user=1;}}send.onclick = function(){if(user==1){list.innerHTML+='<li class="clearfixd"><div class="text1 fl">'+txt.value +'</div><img class="imag1 fl" src="data:images/icon1.png"></img></li>'txt.value='';}else{list.innerHTML+='<li class="clearfixd"></div><img class="imag1 fl" src="data:images/icon2.png"></img><div class="text1 fl">'+ txt.value +'</div></li>'txt.value='';}}</script>
</body>
</html>

微信聊天框（html+css+js）实现相关推荐

Andriod 实现一个微信聊天框(一)
Andriod 实现一个微信聊天框(一) 这周做了第一次Andriod作业,虽然是对着老师的视频桥的代码,还是遇到了相当多的技术问题和bug,再次记录一下解决问题的过程,以便于后期复习使用. 这次实验 ...
微信聊天框如何隐藏(微信教程分享)
微信是很多人经常使用的社交平台.其中还包括很多隐私内容.如果你担心别人借手机的时候翻来覆去.可以隐藏指定的聊天对话框.所以其他人在聊天界面找不到.你知道怎么设置吗?快来一起看看吧. 微信聊天框如何隐藏 ...
元素浮动布局，微信聊天框
元素浮动布局,微信聊天框知识导入: 文字的浮动布局浮动元素会脱离网页文档,与其他元素发生重叠,但是与文字内容不会发生重叠即文字环绕效果由此要注意:浮动元素是不占据空间的, 容器浮动:多个容器达到 ...
企业微信聊天框中点击自建应用获取当前聊天外部联系人userid，wx.agentConfig调用
目录企业微信自建应用获取当前聊天外部联系人userid,wx.agentConfig调用调用agentConfig wx.agentConfig 和 wx.config区别 wx.agentCon ...
php类似微信聊天框,仿微信聊天功能
摘要: 微信聊天 window.onload = () => { // 获取按钮 let btn = document.getElementById('btn'); // 获取输入框 let t ...
一个可在微信聊天框中生成短链接的微信公众号
我们都知道腾讯.新浪的短网址功能并没有官方网站,很多时候我们想生成短链接需要去一些第三方网站,费时费力,有些还带广告或流量劫持! 所以做了这个功能,在聊天框中直接生成短链接,只需要发送网址,一秒内就会 ...
头像裁剪框html css,js头像裁剪实现——canvas+Jcrop+jQuery
封好的插件不用写html啦,直接new一个就好了 var test = document.getElementById("test"); var clipBox = new cli ...
php类似微信聊天框,仿微信UI界面的PHP+Swoole多人聊天室 TP6框架
仿微信UI界面的PHP+Swoole多人聊天室 TP6框架介绍基于swoole实现模仿微信的即时通讯聊天室软件架构使用thinkphp6编写安装教程导入install.sql到数据库 == ...
Unity微信聊天框界面制作
[原理] 一个聊天界面主要由三个部分组成:内容区.可见区.滑动条可见区在内容区上边,内容区会随着聊天内容变得非常长,但只有位于可见区的部分才能被看见,其他区域的看不见.通过滑动条上下移动内容区,看见 ...

微信聊天框（html+css+js）实现

微信聊天框（html+css+js）实现

微信聊天框（html+css+js）实现相关推荐

最新文章

热门文章