原生js模拟微信聊天记录

本文主要是介绍原生js模拟微信聊天记录，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<!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: 600px;background: #eee;margin: 10px auto 0;position: relative;box-shadow: 0px 0px 16px #999;overflow: hidden;}.header {background: #000;height: 34px;color: #fff;height: 40px;line-height: 40px;font-size: 20px;padding: 0 10px;}.footer {width: 430px;height: 40px;background: #999;position: fixed;bottom: 0;padding: 10px;}.footer input {width: 300px;height: 38px;outline: none;font-size: 16px;text-indent: 10px;position: absolute;border-radius: 6px;right: 80px;}.footer span {display: inline-block;width: 62px;height: 38px;background: #ccc;font-weight: 900;line-height: 38px;cursor: pointer;text-align: center;position: absolute;right: 10px;top: 14px;border-radius: 6px;}.footer span:hover {color: #777;background: #ddd;}.icon {display: inline-block;background: red;width: 50px;height: 50px;border-radius: 30px;position: absolute;bottom: 3px;left: 10px;cursor: pointer;overflow: hidden;}img {width: 60px;height: 60px;border-radius: 8px;}.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>
</head><body><div id="container"><div class="header"> <span style="float: right;">20:30</span> <span style="float: left;">小泽老师</span> </div><ul class="content"></ul><div class="footer"><div class="icon"> <img src="images/1.png" alt="" id="icon"> </div><input id="text" type="text" placeholder="说点什么吧..."> <span id="btn">发送</span> </div></div>
</body>
<script src="js/common.js"></script>
<script>// 获取元素var icon =  my$('icon');var text =  my$('text');var btn =  my$('btn');var content = document.getElementsByTagName('ul')[0];var imgArr = ['images/1.png', 'images/2.png'];// 点击左下角头像可以切换图片var flag = 0;icon.onclick = function () {if (flag === 0) {icon.src = 'images/2.png';flag = 1;} else {icon.src = 'images/1.png';flag = 0;}}// 点击发送按钮，将内容和头像显示到content中btn.onclick = function () {var value = text.value;var li = document.createElement('li');var span =  document.createElement('span');setInnerText(span, value);var img =  document.createElement('img');img.src = imgArr[flag];li.appendChild(img);li.appendChild(span);content.appendChild(li); // 不带[0]获取的是html集合，会报错text.value = '';// 不同用户内容左右显示if (flag === 0) {img.className = 'imgright';span.className = 'spanright';} else {img.className = 'imgleft';span.className = 'spanleft';}}</script></html>

common.js：

// 通过id获取元素
function my$(element) {var el = document.getElementById(element);return el;
}// innerText textContent 兼容性处理
function setInnerText(element, content) {if (typeof element.innerText === 'string') {element.innerText = content;} else {element.textContent = content;}
}