HTML5仿手机微信聊天界面

HTML5仿手机微信聊天界面，截图效果如下：

源代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>HTML5模拟微信聊天界面</title><style>/**重置标签默认样式*/* {margin: 0;padding: 0;list-style: none;font-family: '微软雅黑'}#container {width: 450px;height: 780px;background: #eee;margin: 80px auto 0;position: relative;box-shadow: 20px 20px 55px #777;}.header {background: #000;height: 40px;color: #fff;line-height: 34px;font-size: 20px;padding: 0 10px;}.footer {width: 430px;height: 50px;background: #666;position: absolute;bottom: 0;padding: 10px;}.footer input {width: 275px;height: 45px;outline: none;font-size: 20px;text-indent: 10px;position: absolute;border-radius: 6px;right: 80px;}.footer span {display: inline-block;width: 62px;height: 48px;background: #ccc;font-weight: 900;line-height: 45px;cursor: pointer;text-align: center;position: absolute;right: 10px;border-radius: 6px;}.footer span:hover {color: #fff;background: #999;}#user_face_icon {display: inline-block;background: red;width: 60px;height: 60px;border-radius: 30px;position: absolute;bottom: 6px;left: 14px;cursor: pointer;overflow: hidden;}img {width: 60px;height: 60px;}.content {font-size: 20px;width: 435px;height: 662px;overflow: auto;padding: 5px;}.content li {margin-top: 10px;padding-left: 10px;width: 412px;display: block;clear: both;overflow: hidden;}.content li img {float: left;}.content li span{background: #7cfc00;padding: 10px;border-radius: 10px;float: left;margin: 6px 10px 0 10px;max-width: 310px;border: 1px solid #ccc;box-shadow: 0 0 3px #ccc;}.content li img.imgleft { float: left; }.content li img.imgright { float: right; }.content li span.spanleft { float: left;background: #fff;}.content li span.spanright { float: right;background: #7cfc00;}</style><script>window.onload = function(){var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png'];var num = 0;     //控制头像改变var iNow = -1;    //用来累加改变左右浮动var icon = document.getElementById('user_face_icon').getElementsByTagName('img');var btn = document.getElementById('btn');var text = document.getElementById('text');var content = document.getElementsByTagName('ul')[0];var img = content.getElementsByTagName('img');var span = content.getElementsByTagName('span');icon[0].onclick = function(){if(num==0){this.src = arrIcon[1];num = 1;}else if(num==1){this.src = arrIcon[0];num = 0;}                }btn.onclick = function(){if(text.value ==''){alert('不能发送空消息');}else {content.innerHTML += '<li><img src="'+arrIcon[num]+'"><span>'+text.value+'</span></li>';iNow++;if(num==0){img[iNow].className += 'imgright';span[iNow].className += 'spanright';}else {img[iNow].className += 'imgleft';span[iNow].className += 'spanleft';}text.value = '';// 内容过多时,将滚动条放置到最底端content.scrollTop=content.scrollHeight;  }}}</script>
</head>
<body><div id="container"><div class="header"><span style="float: left;">业余草:模拟微信聊天界面</span><span style="float: right;">14:21</span></div><ul class="content"><!-- 欢迎加入qq群：454796847、135430763 --></ul><div class="footer"><div id="user_face_icon"><img src="http://www.xttblog.com/icons/favicon.ico" alt=""></div><input id="text" type="text" placeholder="说点什么吧..."><span id="btn">发送</span></div></div>
</body>
</html>

HTML5仿手机微信聊天界面相关推荐

html5 仿手机聊天,HTML5仿手机微信聊天界面
html> HTML5模拟微信聊天界面 /**重置标签默认样式*/ * { margin: 0; padding: 0; list-style: none; font-family: '微软雅黑 ...
php写的微信聊天界面,浅谈聊天界面核心架构设计
本文以一个小例子简单的演示在微信小程序中使用环信SDK收发消息.官网demo 下载后把整个utils目录下的文件复制到咱自己工程的目录下.在WebIMConfig.js中将AppKey替换成自己应用的 ...
制作微信聊天界面 CSS
CSS实现微信聊天界面昨天刚想起来老师布置了一个作业,让我们仿写微信聊天界面,于是乎连夜补作业,给大家分享一下,不足之处请指教! 首先运行效果图如下: 手机边框是导入一个图,其他的布局模块都是用 ...
html5仿网页版微信聊天界面代码
2019独角兽企业重金招聘Python工程师标准>>> html5仿网页版微信聊天界面代码转载于:https://my.oschina.net/u/1266171/blog/783 ...
jquery 背景特效实现_html5实现的仿网页版微信聊天界面效果源码
码农那点事儿关注我们,一起学习进步这是一款基于html5实现的仿网页版微信聊天界面效果源码,可实现微信网页版聊天界面效果,在编辑框编辑文字之后按Ctrl+Enter键即可提交文字到聊天对话框上.整 ...
h5仿微信聊天室weChatRoom|仿微信聊天界面
html5仿微信聊天|h5仿微信聊天室|仿微信聊天界面|仿微信群聊/单聊平时一闲下来就撸项目代码,最近一直在开发h5仿微信聊天项目,使用到了html5+css3+zepto+iscroll+swip ...
h5聊天页面 jquery_HTML5仿微信聊天界面、微信朋友圈实例代码
这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...
h5聊天室案例|仿微信聊天界面|多人群聊
html5仿微信聊天室weChatRoom案例|多人群聊互动|仿微信聊天界面该项目是使用html5+css3+zepto+swiper+wcPop等技术开发的仿微信聊天室,捣鼓调试了很长时间,在手机 ...
高仿微信聊天界面长按弹框样式
效果图背景在公司做的项目里面,刚好有需要用到微信聊天界面长按弹框样式这种UI的. 网上找了一下,没找到. Android现成的 ListPopupWindow又不能满足需求. 因此在非上班时间撸一 ...

HTML5仿手机微信聊天界面

HTML5仿手机微信聊天界面相关推荐

最新文章

热门文章