简单的聊天窗口
<!DOCTYPE html>
<html>
<head>
<title>聊天窗口</title>
<style type="text/css">
.main{width: 100%;height:700px;}
.down{width: 100%;height: 100px;}
.l{width: 50%;float: left;}
.r{width: 50%;float: right;}
.cent{margin: 0px auto;width: 90%;}
input{width: 80%;}
button{width: 10%}
p{color:#fff;}
</style>
</head>
<body>
<div class="main">
<div class="l"><div class="cent"></div></div>
<div class="r"><div class="cent"><p></p></div></div>
</div>
<div class="down">
<div class="l"><div class="cent"><input type="" name=""><button>提交</button></div></div>
<div class="r"><div class="cent"><input type="" name=""><button>提交</button></div></div>
</div>
<script type="text/javascript">
let li =document.getElementsByTagName('input')[0]
let ri =document.getElementsByTagName('input')[1]
let lb=document.getElementsByTagName('button').item(0)
let rb=document.getElementsByTagName('button').item(1)
console.log(li,ri,lb)
lb.onclick=function(){butt('l')}
rb.onclick=function(){butt('r')}
let a,b
function butt(argument) {
if (argument[0]=='l'){
a=li
b=0
}else{
a=ri
b=1
}
let txt=document.createElement('p')
let c=document.getElementsByClassName('main')[0].children[b].children[0]
if (c.childElementCount%2==1){
txt.style.background ='red'
}else{
txt.style.background ='blue'
}
txt.innerHTML=a.value
c.appendChild(txt)
}
</script>
</body>
</html>