Heim >Web-Frontend >HTML-Tutorial >js-Originalton zur Implementierung einer einfachen WeChat-Chat-Funktion
js-Originalton zur Implementierung einer einfachen WeChat-Chat-Funktion
- 韦小宝Original
- 2017-11-17 13:24:152972Durchsuche
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>Nehmen Sie es kostenlos und studieren Sie es! Weitere gute Quellcodes finden Sie auf der 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!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS zur horizontalen und vertikalen Zentrierung von ElementenNächster Artikel：CSS zur horizontalen und vertikalen Zentrierung von Elementen