HTML5仿手机微信聊天界面

时间：2021-05-08

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

源代码如下：

XML/HTML Code复制内容到剪贴板
  • <!DOCTYPEhtml>
  • <html>
  • <head>
  • <metacharset="UTF-8">
  • <title>HTML5模拟微信聊天界面</title>
  • <style>
  • /**重置标签默认样式*/
  • *{
  • margin:0;
  • padding:0;
  • list-style:none;
  • font-family:'微软雅黑'
  • }
  • #container{
  • width:450px;
  • height:780px;
  • background:#eee;
  • margin:80pxauto0;
  • position:relative;
  • box-shadow:20px20px55px#777;
  • }
  • .header{
  • background:#000;
  • height:40px;
  • color:#fff;
  • line-height:34px;
  • font-size:20px;
  • padding:010px;
  • }
  • .footer{
  • width:430px;
  • height:50px;
  • background:#666;
  • position:absolute;
  • bottom:0;
  • padding:10px;
  • }
  • .footerinput{
  • width:275px;
  • height:45px;
  • outline:none;
  • font-size:20px;
  • text-indent:10px;
  • position:absolute;
  • border-radius:6px;
  • right:80px;
  • }
  • .footerspan{
  • 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;
  • }
  • .footerspan: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;
  • }
  • .contentli{
  • margin-top:10px;
  • padding-left:10px;
  • width:412px;
  • display:block;
  • clear:both;
  • overflow:hidden;
  • }
  • .contentliimg{
  • float:left;
  • }
  • .contentlispan{
  • background:#7cfc00;
  • padding:10px;
  • border-radius:10px;
  • float:left;
  • margin:6px10px010px;
  • max-width:310px;
  • border:1pxsolid#ccc;
  • box-shadow:003px#ccc;
  • }
  • .contentliimg.imgleft{
  • float:left;
  • }
  • .contentliimg.imgright{
  • float:right;
  • }
  • .contentlispan.spanleft{
  • float:left;
  • background:#fff;
  • }
  • .contentlispan.spanright{
  • float:right;
  • background:#7cfc00;
  • }
  • </style>
  • <script>
  • window.onload=function(){
  • vararrIcon=['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png'];
  • varnum=0;//控制头像改变
  • variNow=-1;//用来累加改变左右浮动
  • varicon=document.getElementById('user_face_icon').getElementsByTagName('img');
  • varbtn=document.getElementById('btn');
  • vartext=document.getElementById('text');
  • varcontent=document.getElementsByTagName('ul')[0];
  • varimg=content.getElementsByTagName('img');
  • varspan=content.getElementsByTagName('span');
  • icon[0].onclick=function(){
  • if(num==0){
  • this.src=arrIcon[1];
  • num=1;
  • }elseif(num==1){
  • this.src=arrIcon[0];
  • num=0;
  • }
  • }
  • btn.onclick=function(){
  • if(text.value==''){
  • alert('不能发送空消息');
  • }else{
  • content.innerHTML+='<li><imgsrc="'+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='';
  • //内容过多时,将滚动条放置到最底端
  • contentcontent.scrollTop=content.scrollHeight;
  • }
  • }
  • }
  • </script>
  • </head>
  • <body>
  • <divid="container">
  • <divclass="header">
  • <spanstyle="float:left;">业余草:模拟微信聊天界面</span>
  • <spanstyle="float:right;">14:21</span>
  • </div>
  • <ulclass="content">
  • <!--欢迎加入qq群：454796847、135430763-->
  • </ul>
  • <divclass="footer">
  • <divid="user_face_icon">
  • <imgsrc="http://www.xttblog.com/icons/favicon.ico"alt="">
  • </div>
  • <inputid="text"type="text"placeholder="说点什么吧...">
  • <spanid="btn">发送</span>
  • </div>
  • </div>
  • </body>
  • </html>

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

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

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章