基于javascript制作微信聊天面板

本文实例分享了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程序设计有所帮助。