Eine weitere Welle von Vorteilen! Das ursprüngliche js implementiert eine einfache WeChat-Chat-Funktion, probieren Sie es aus, es ist kostenlos! Weitere kostenlose und unterhaltsame Quellcodes sind auf der PHP Chinese-Website
Code:
<!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 class="outer"> <p class="box"> <p class="chat"> <p class="top"> <span class="">PHP中文网-朱老师</span> </p> <p class="content"> <select multiple="multiple" id="leftContent"> </select> </p> <p class="send"> <input type="text" id="leftText" class="sText"/> <input type="button" id="leftSendBtn" class="btn" value="发送"/> </p> </p> </p> <p class="box"> <p class="chat"> <p class="top"> <span class="">PHP中文网-lge</span> </p> <p class="content"> <select multiple="multiple" id="rightContent"> </select> </p> <p class="send"> <input type="text" id="rightText" class="sText"/> <input type="button" id="rightSendBtn" class="btn" value="发送"/> </p> </p> </p> </p> </body> </html>
PHP Chinese-Website. Folgen Sie uns, um einen guten Einblick zu erhalten~
Verwandte Empfehlungen:
HTML-Quellcode zum Verschieben von Welpen
JavaScript-Beispiel zum Abrufen des Quellcodes der aktuellen Webseite
Java-Implementierung Quellcode-Beispiel des Tank Battle-Spiels
Das obige ist der detaillierte Inhalt vonjs-Originalton zur Implementierung einer einfachen WeChat-Chat-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!