js原声实现简单的微信聊天功能

2020-03-24 18:39:55

字体：大中小

来源：转载

供稿：网友

又是一波福利！原声的js实现了一个简单的微信聊天功能，拿去研究吧，不要钱！更多免费好玩的源码尽在PHP

1W)B$RI~5G1$3GPU}ZRR[9P.png

代码：

 !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教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。