search

Home  >  Article  >  Web Front-end  >  Making WeChat chat panel based on javascript_javascript skills

Making WeChat chat panel based on javascript_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:11:141943browse

The example in this article shares the relevant code for making WeChat chat panel with javascript. The specific content is as follows

Let’s take the picture first

Click on the avatar to change the speaking object. Let’s briefly talk about the implementation principle. Create a ul in HTML to store all the speaking content. The conversation content is dynamically generated by javascript,

The main difficulty: first lay out the css. When Obama sent it, let the li float. When it was chubby, let the li float left.

Code: 

<!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>

I hope this article will be helpful to everyone learning JavaScript programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to copy files in Nodejs_node.jsNext article：How to copy files in Nodejs_node.js

Related articles

See more