前端案例：迷你微信聊天框（js实现简易聊天效果、代码完整、附）

一、案例效果

二、实现思路

首先是点击图片进行用户切换，这其实就是切换图片的路径 src。获取到代表头像的图片元素，将两张图片的路径存入一个数组（便于判断），在点击事件中使用一个变量判断当前的图片是哪一张并进行切换。
点击发送按钮后，将 input 框中输入的消息内容添加到聊天区域。聊天区域使用的是无序列表 <ul><li></li></ul>，点击按钮后，在聊天区域添加新的 html 片段 <li></li>。应注意每次添加都应该是累加的。
设置用户不同在聊天框中的信息位置也不同，判断当前的用户并为图片和文字添加新类名，设置不同样式。
点击发送按钮后清空输入框中的内容。

三、完整代码+详细注释

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>迷你微信聊天框案例</title>
  <style>
    #container {
      width: 420px;
      height: 540px;
      margin: auto;
      border: 1px solid #999;
      background-color: #FFF;
      box-shadow: 0 0 20px rgb(202, 200, 200);
    }

    .header {
      width: 100%;
      height: 50px;
      background-color: black;
      color: #FFF;
      line-height: 50px;
    }

    .footer {
      width: 400px;
      height: 40px;
      background-color: #999;
      position: absolute;
      bottom: 100px;
      padding: 10px;
    }

    .footer input {
      width: 260px;
      height: 38px;
      outline: none;
      font-size: 16px;
      text-indent: 10px;
      position: absolute;
      border: 0;
      border-radius: 5px;
      right: 80px;
    }

    .footer span {
      display: inline-block;
      width: 62px;
      height: 38px;
      background-color: #ccc;
      font-weight: 900;
      line-height: 38px;
      cursor: pointer;
      text-align: center;
      position: absolute;
      right: 10px;
      top: 11px;
      border-radius: 6px;
    }

    .footer span:hover {
      color: #777;
      background-color: #ddd;
    }

    .icon {
      display: inline-block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      position: absolute;
      bottom: 3px;
      left: 10px;
      cursor: pointer;
      overflow: hidden;
    }

    img {
      height: 50px;
      width: 50px;
      border-radius: 50%;
    }

    .content {
      font-size: 16px;
      width: 100%;
      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-color: #7cfc00;
      padding: 8px;
      border-radius: 10px;
      float: left;
      margin: 5px 10px 0 10px;
      max-width: 310px;
      box-shadow: 0 0 5px #ccc;
    }

    .content li img.imgleft {
      float: left;
    }

    .content li img.imgright {
      float: right;
      margin-right: 25px;
    }

    .content li span.spanleft {
      background-color: #fff;
      float: left;
    }

    .content li span.spanright {
      float: right;
      background-color: #7cfc00;
    }
  </style>
</head>

<body>
  <div id="container">
    <!-- 头部区域 -->
    <div class="header">
      <p style="text-align: center;margin-top: 0;">Deverloper 小马</p>
    </div>
    <!-- 聊天区域 -->
    <ul class="content"></ul>
    <!-- 底部区域 -->
    <div class="footer">
      <div class="icon"><img src="img/1.png" alt="" id="icon"></div>
      <input id="text" type="text" placeholder="请输入内容"><span id="btn">发送</span>
    </div>
  </div>
</body>
<script>
  //1.点击图片实现用户切换
  var img = document.getElementById("icon"); //获取用户头像
  var arr = ["img/1.png", "img/2.png"];
  var tag = 0;
  img.onclick = function () { //点击头像事件
    if (tag == 0) {
      img.src = arr[1];
      tag = 1;
    } else {
      img.src = arr[0];
      tag = 0;
    }
  }

  //2.点击发送按钮将用户聊天内容发送在消息区域
  var btn = document.getElementById("btn");
  var num = -1; //聊天记录的信息数量
  btn.onclick = function () {
    var text = document.getElementById("text").value;
    //判断用户输入的内容是否为空
    if (text == "") { //为空则提示
      alert("请输入信息后进行发送")
    } else { //不为空则将信息添加至聊天区域
      var content = document.getElementsByTagName("ul")[0];
      content.innerHTML += "<li><img src='" + arr[tag] + "' /><span>" + text + "</span></li>"
    }

    var imgs = content.getElementsByTagName("img"); //获取聊天区域内的图片
    var span = content.getElementsByTagName("span"); //获取聊天区域内的聊天信息
    num++; //每次点击发送聊天内容+1
    //判断当前聊天的用户
    if (tag == 0) { //默认用户
      //设置在聊天区域内不同位置显示
      //为图片和文字添加新的类名
      imgs[num].className = "imgleft"; //图片左侧显示
      span[num].className = "spanleft"; //文字左侧显示
    } else { //第二个用户
      imgs[num].className = "imgright"; //图片右侧显示
      span[num].className = "spanright"; //文字右侧显示
    }
    //点击发送之后清空输入框内容
    document.getElementById("text").value = '';
  }
</script>

</html>

四、案例素材

1.png

2.png

前端案例：迷你微信聊天框（js实现简易聊天效果、代码完整、附）

一、案例效果

二、实现思路

三、完整代码+详细注释

四、案例素材

猜你喜欢