基于javascript制作微信聊天面板

2019-11-20 10:25:21

字体：大中小

来源：转载

供稿：网友

本文实例分享了javascript制作微信聊天面板的相关代码，具体内容如下

先上图吧

点击头像更换说话对象，简单说下实现原理，html中创建一个ul用于存放所有说话的内容，对话内容是有javascript 动态生成，

主要难点：先布局好css，当时奥巴马发送时候，让这个li有浮动，当是小胖时候，让这个li左浮动。

代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模拟短信发送</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: 34px;   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;  }  #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 = ['img/1.jpg','img/2.jpg'];   var num = 0;  //控制头像改变   var iNow = -1; //用来累加改变左右浮动   var icon = document.getElementById('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 = '';    }   }  } </script></head><body> <div id="container">  <div class="header">   <span style="float: left;">白超华-博客园</span>   <span style="float: right;">20:30</span>  </div>  <ul class="content"></ul>  <div class="footer">   <div id="icon">    <img src="img/1.jpg" alt="">   </div>   <input id="text" type="text" placeholder="说点什么吧...">   <span id="btn">发送</span>  </div> </div></body></html>

本文已被整理到了《JavaScript微信开发技巧汇总》，欢迎大家学习阅读。

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

希望本文所述对大家学习javascript程序设计有所帮助。

上一篇：javascript实现可键盘控制的抽奖系统

下一篇：关于Bootstrap弹出框无法调用问题的解决办法