当前位置：Gxlcms > html代码 > HTML5仿手机微信聊天界面_html5教程技巧

HTML5仿手机微信聊天界面_html5教程技巧

时间：2021-07-01 10:21:17 帮助过：86人阅读

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

源代码如下：

XML/HTML Code复制内容到剪贴板
  1. >
  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');
  136. icon[0].onclick = function(){
  137. if(num==0){
  138. this.src = arrIcon[1];
  139. num = 1;
  140. }else if(num==1){
  141. this.src = arrIcon[0];
  142. num = 0;
  143. }
  144. }
  145. btn.onclick = function(){
  146. if(text.value ==''){
  147. alert('不能发送空消息');
  148. }else {
  149. content.innerHTML += '<li><img src="'+arrIcon[num]+'"><span>'+text.value+'span>li>';
  150. iNow++;
  151. if(num==0){
  152. img[iNow].className += 'imgright';
  153. span[iNow].className += 'spanright';
  154. }else {
  155. img[iNow].className += 'imgleft';
  156. span[iNow].className += 'spanleft';
  157. }
  158. text.value = '';
  159. // 内容过多时,将滚动条放置到最底端
  160. contentcontent.scrollTop=content.scrollHeight;
  161. }
  162. }
  163. }
  164. script>
  165. head>
  166. <body>
  167. <div id="container">
  168. <div class="header">
  169. <span style="float: left;">业余草:模拟微信聊天界面span>
  170. <span style="float: right;">14:21span>
  171. div>
  172. <ul class="content">
  174. ul>
  175. <div class="footer">
  176. <div id="user_face_icon">
  177. <img src="http://www.xttblog.com/icons/favicon.ico" alt="">
  178. div>
  179. <input id="text" type="text" placeholder="说点什么吧...">
  180. <span id="btn">发送span>
  181. div>
  182. div>
  183. body>
  184. html>

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

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！