HTML5仿手机微信聊天界面

这篇文章主要为大家详细介绍了HTML5仿手机微信聊天界面的关键代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
 
 

给大家带来的是HTML5仿手机微信聊天界面，截图效果如下：

源代码如下：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML5模拟微信聊天界面</title>
  6. <style>
  7. /**重置标签默认样式*/
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. list-style: none;
  12. font-family: '微软雅黑'
  13. }
  14. #container {
  15. width: 450px;
  16. height: 780px;
  17. background: #eee;
  18. margin: 80px auto 0;
  19. position: relative;
  20. box-shadow: 20px 20px 55px #777;
  21. }
  22. .header {
  23. background: #000;
  24. height: 40px;
  25. color: #fff;
  26. line-height: 34px;
  27. font-size: 20px;
  28. padding: 0 10px;
  29. }
  30. .footer {
  31. width: 430px;
  32. height: 50px;
  33. background: #666;
  34. position: absolute;
  35. bottom: 0;
  36. padding: 10px;
  37. }
  38. .footer input {
  39. width: 275px;
  40. height: 45px;
  41. outline: none;
  42. font-size: 20px;
  43. text-indent: 10px;
  44. position: absolute;
  45. border-radius: 6px;
  46. right: 80px;
  47. }
  48. .footer span {
  49. display: inline-block;
  50. width: 62px;
  51. height: 48px;
  52. background: #ccc;
  53. font-weight: 900;
  54. line-height: 45px;
  55. cursor: pointer;
  56. text-align: center;
  57. position: absolute;
  58. right: 10px;
  59. border-radius: 6px;
  60. }
  61. .footer span:hover {
  62. color: #fff;
  63. background: #999;
  64. }
  65. #user_face_icon {
  66. display: inline-block;
  67. background: red;
  68. width: 60px;
  69. height: 60px;
  70. border-radius: 30px;
  71. position: absolute;
  72. bottom: 6px;
  73. left: 14px;
  74. cursor: pointer;
  75. overflow: hidden;
  76. }
  77. img {
  78. width: 60px;
  79. height: 60px;
  80. }
  81. .content {
  82. font-size: 20px;
  83. width: 435px;
  84. height: 662px;
  85. overflow: auto;
  86. padding: 5px;
  87. }
  88. .content li {
  89. margin-top: 10px;
  90. padding-left: 10px;
  91. width: 412px;
  92. display: block;
  93. clear: both;
  94. overflow: hidden;
  95. }
  96. .content li img {
  97. float: left;
  98. }
  99. .content li span{
  100. background: #7cfc00;
  101. padding: 10px;
  102. border-radius: 10px;
  103. float: left;
  104. margin: 6px 10px 0 10px;
  105. max-width: 310px;
  106. border: 1px solid #ccc;
  107. box-shadow: 0 0 3px #ccc;
  108. }
  109. .content li img.imgleft {
  110. float: left;
  111. }
  112. .content li img.imgright {
  113. float: right;
  114. }
  115. .content li span.spanleft {
  116. float: left;
  117. background: #fff;
  118. }
  119. .content li span.spanright {
  120. float: right;
  121. background: #7cfc00;
  122. }
  123. </style>
  124. <script>
  125. window.onload = function(){
  126. var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png'];
  127. var num = 0;     //控制头像改变
  128. var iNow = -1;    //用来累加改变左右浮动
  129. var icon = document.getElementById('user_face_icon').getElementsByTagName('img');
  130. var btn = document.getElementById('btn');
  131. var text = document.getElementById('text');
  132. var content = document.getElementsByTagName('ul')[0];
  133. var img = content.getElementsByTagName('img');
  134. var span = content.getElementsByTagName('span');
  135. icon[0].onclick = function(){
  136. if(num==0){
  137. this.src = arrIcon[1];
  138. num = 1;
  139. }else if(num==1){
  140. this.src = arrIcon[0];
  141. num = 0;
  142. }
  143. }
  144. btn.onclick = function(){
  145. if(text.value ==''){
  146. alert('不能发送空消息');
  147. }else {
  148. content.innerHTML += '<li><img src="'+arrIcon[num]+'"><span>'+text.value+'</span></li>';
  149. iNow++;
  150. if(num==0){
  151. img[iNow].className += 'imgright';
  152. span[iNow].className += 'spanright';
  153. }else {
  154. img[iNow].className += 'imgleft';
  155. span[iNow].className += 'spanleft';
  156. }
  157. text.value = '';
  158. // 内容过多时,将滚动条放置到最底端
  159. contentcontent.scrollTop=content.scrollHeight;
  160. }
  161. }
  162. }
  163. </script>
  164. </head>
  165. <body>
  166. <div id="container">
  167. <div class="header">
  168. <span style="float: left;">业余草:模拟微信聊天界面</span>
  169. <span style="float: right;">14:21</span>
  170. </div>
  171. <ul class="content">
  172. <!-- 欢迎加入qq群：454796847、135430763 -->
  173. </ul>
  174. <div class="footer">
  175. <div id="user_face_icon">
  176. <img src="http://www.xttblog.com/icons/favicon.ico" alt="">
  177. </div>
  178. <input id="text" type="text" placeholder="说点什么吧...">
  179. <span id="btn">发送</span>
  180. </div>
  181. </div>
  182. </body>
  183. </html>

以上就是本文的全部内容，是不是很精彩，希望对大家的学习有所帮助。

原文:http://www.xttblog.com/?p=265

HTML5仿手机微信聊天界面的更多相关文章

  1. android 仿微信聊天界面，以及语音录制功能

    extends:http://104zz.iteye.com/blog/1709840 本例为模仿微信聊天界面UI设计,文字发送以及语言录制UI. 1先看效果图:     第一:chat.xml设计 ...

  2. Swift - 自定义单元格实现微信聊天界面

    1,下面是一个放微信聊天界面的消息展示列表,实现的功能有: (1)消息可以是文本消息也可以是图片消息 (2)消息背景为气泡状图片,同时消息气泡可根据内容自适应大小 (3)每条消息旁边有头像,在左边表示 ...

  3. Android:日常学习笔记(8)———开发微信聊天界面

    Android:日常学习笔记(8)———开发微信聊天界面 只做Nine-Patch图片 Nine-Patch是一种被特殊处理过的PNG图片,能够指定哪些区域可以被拉升,哪些区域不可以.

  4. HTML5仿微信聊天界面、微信朋友圈实例

    这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...

  5. vue聊天室|h5+vue仿微信聊天界面|vue仿微信

    一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...

  6. web版仿微信聊天界面|h5仿微信电脑端案例开发

    前几天开发了一款手机端h5仿微信聊天,人唯有不停学习才能进步,这段时间倒腾着整理了下之前项目,又重新在原先的那版基础上开发了一款仿微信聊天电脑端web版本,聊天页面又重新优化了多图预览.视频播放,右键 ...

  7. jquery 仿手机屏幕切换界面效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. android 仿QQ气泡聊天界面

    1.现在的QQ,微信等一些APP的聊天界面都是气泡聊天界面,左边是接收到的消息,右边是发送的消息, 这个效果其实就是一个ListView在加载它的Item的时候,分别用了不同的布局xml文件. 2.效 ...

  9. JS案例练习-手机微信聊天对话框

    先附图 CSS部分: <style> body{} *{;} li{list-style: none;} .container{ width:310px; height:600px; ma ...

随机推荐

  1. [NewLife.XCode]对象字典缓存（百万军中取敌首级）

    NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netcore,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和 ...

  2. 【ASP.NET Core快速入门】（四）在CentOS上安装.NET Core运行时、部署到CentOS

    下载.NET Core SDK 下载地址:https://www.microsoft.com/net/download/windows 第一步:Add the dotnet product feed( ...

  3. 写在最前面 - 《看懂每一行代码 - kubernetes》

    我要写什么 <看懂每一行代码 - kubernetes>会包含k8s整个项目的源码解析,考虑到门槛问题,在开始分析k8s之前我会通过一些更低难度的golang开源项目讲解来帮助大家提升go ...

  4. 打造自己的.NET Core项目模板

    前言 每个人都有自己习惯的项目结构,有人的喜欢在项目里面建解决方案文件夹:有的人喜欢传统的三层命名:有的人喜欢单一,简单的项目一个csproj就搞定.. 反正就是萝卜青菜,各有所爱. 可能不同的公司对 ...

  5. 痞子衡嵌入式：一表全搜罗常见短距离无线通信协议(Wi-Fi/Bluetooth/ZigBee/Thread...)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是常见短距离无线通信协议. 短距离无线通信是物联网的基础,随着物联网IoT的火热发展,各种短距离无线通信协议也是层出不穷,这些协议标准各有 ...

  6. k8s运行容器之Job（四）--技术流ken

    Job 容器按照持续运行的时间可分为两类:服务类容器和工作类容器. 服务类容器通常持续提供服务,需要一直运行,比如 http server,daemon 等.工作类容器则是一次性任务,比如批处理程序, ...

  7. 常用的Arrays类和二维数组以及二分法的介绍

    ---恢复内容开始--- 1.Array类 Array中包含了许多数组的常用操作,较为常见的有: (1)快速输出 import java.util.Arrays; public class Test{ ...

  8. TSP（Traveling Salesman Problem）-----浅谈旅行商问题（动态规划,回溯实现）

    1.什么是TSP问题 一个售货员必须访问n个城市,这n个城市是一个完全图,售货员需要恰好访问所有城市的一次,并且回到最终的城市. 城市于城市之间有一个旅行费用,售货员希望旅行费用之和最少. 完全图:完 ...

  9. [JS设计模式]：构造函数模式（2）

    基本用法 function Car(model, year, miles) { this.model = model; this.year = year; this.miles = miles; th ...

  10. 博弈论进阶之Anti-SG游戏与SJ定理

    前言 在上一节中,我们初步了解了一下SG函数与SG定理. 今天我们来分析一下SG游戏的变式--Anti-SG游戏以及它所对应的SG定理 首先从最基本的Anti-Nim游戏开始 Anti-Nim游戏是这 ...