代碼：

 !DOCTYPE html  html  head  meta charset= utf-8 /  title 微信聊天 /title  link rel= stylesheet type= text/css href= css/style.css /  style  margin: 0;.top{ width: 310px; padding: 10px 20px; background-color: gray; border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: 18px; font-weight: bold;0 color: white;.content{ background-color: white;select{ border: 2px solid gray; background: white;  width: 350px; height: 470px; padding: 10px;.send{ width: 310px; padding: 10px 20px; background-color: gray; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;.chat{.box{ float: left; margin: 20px 120px;body{ width: 100%; background-image: url(../img/bg.jpg);.outer{ width: 90%; margin: 10px auto;.sText{ width: 220px; height: 25px; border-radius: 5px; font-size: 15px;.btn{ width: 65px; height: 30px; border-radius: 5px; float: right; text-align: center; font-size: 18px; color: white; background-color: limegreen;option{ font-size: 15px; max-width: 325px; height: auto; border: 0.5px solid gainsboro; border-radius: 8px; padding: 10px; margin: 10px; background-color: greenyellow; margin-left: 158px; margin-top: 10px; margin-bottom: 10px; max-width: 200px; /style  script type= text/javascript src= js/my.js /script  script  window.onload =function () { function g(id) { return document.getElementById(id); g( leftSendBtn ).addEventListener( click ,leftSendB); g( rightSendBtn ).addEventListener( click ,rightSendB);function leftSendB() { function g(id) { return document.getElementById(id); var text = document.getElementById( leftText ).value; if(text.trim()!= ){ var leftContent = document.getElementById( leftContent  var rightContent = g( rightContent  var option = document.createElement( option  var len = text.length; option.style.width = len * 15 + len*2 + px  option.style.marginLeft = 350 - (len * 15 + len*2) - 72 + px  option.innerHTML = text; leftContent.appendChild(option); var option1 = document.createElement( option  option1.innerHTML = text; option1.style.backgroundColor = white  option1.style.marginLeft = 10px  option1.style.width = len * 15 + len*2 + px  rightContent.appendChild(option1); document.getElementById( leftText ).value = function rightSendB() { function g(id) { return document.getElementById(id); var text = g( rightText ).value; if(text.trim()!= ) var leftContent = document.getElementById( leftContent  var rightContent = g( rightContent  var option = document.createElement( option  var len = text.length; option.style.width = len * 15 + len*2 + px  option.style.marginLeft = 350 - (len * 15 + len*2) - 72 + px  option.innerHTML = text; rightContent.appendChild(option); var option1 = document.createElement( option  option1.innerHTML = text; option1.style.backgroundColor = white  option1.style.marginLeft = 10px  option1.style.width = len * 15 + len*2 + px  leftContent.appendChild(option1); g( rightText ).value =  /script  /head  body  p >
免費拿去研究吧！更多好的源碼盡在PHP ，關注我們給你好看~
相關推薦：
html會動的小狗狗源碼
JavaScript獲取當前網頁源碼的實例
Java實現坦克大戰游戲的源碼示例
以上就是js原聲實現簡單的微信聊天功能的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。