聊天系统的尝试

系统的尝试"/>

聊天系统的尝试

2模拟新消息

<style>
.mes{border:1px solid red;height:25}
.mes_f{border:1px solid gray;}
.mes_m{text-align:right;border:1px solid green;}</style>
<select id='sel'>
</select>
<input id='finp'/><button onclick='nmesbtn()'>添加信息</button>
<div id='mapp'></div>
<script>
var mfs=['萝卜','青菜','茄子','花生','豆芽']
var emts=document.createElement('div');mapp.append(emts)
for(let a=0;a<mfs.length;a++){
let emt=document.createElement('div')
let opn=document.createElement('option');opn.value=mfs[a];opn.innerHTML=mfs[a]
let dhk=document.createElement('div');dhk.innerHTML=mfs[a]+'dhk';dhk.style.display='None'
let minp=document.createElement('input'),mfsbtn=document.createElement('button');mfsbtn.innerHTML='发送';dhk.append(minp,mfsbtn)   
let btemt=document.createElement('button');btemt.innerHTML='返回';dhk.append(btemt)
emt.dhk=dhk;emt.ns=0;emt.innerHTML=mfs[a]+0;emt.className='mes';emt.n=mfs[a]     
emt.onclick=function(){sel.value=emt.n;emt.innerHTML=mfs[a]+emt.ns;dhk.style.display='';emts.style.display='None';mapp.append(dhk);}
btemt.onclick=function(){dhk.style.display='None';emts.append(dhk);emts.style.display=''}
mfsbtn.onclick=function(){
let str=minp.value;if(str==''){str='HELLO'}
dhk.append(mesf(str,'mes_m'))
}
emts.append(emt,dhk);sel.append(opn)
}function nmesbtn(){
let n=sel.value;let emt=gemtbn(n);
let fm='hh';if(finp.value!=''){fm=finp.value};
emt.ns++;emt.innerHTML="*"+n+emt.ns
emt.dhk.append(mesf(fm,'mes_f'))
/*totop(emt.dhk);*/totop(emt)
}
function gemtbn(n){for(let a in emts.children){if(n==emts.children[a].n){return emts.children[a]}}return false}
function totop(emt){emts.insertBefore(emt,emts.firstChild)}
function mesf(m,t){let md=document.createElement('div');md.className=t;md.innerHTML=m;return md}
</script>

1模拟新消息

<style>
.mes{border:1px solid red;height:25}
</style>
<select id='sel'>
</select>
<button onclick='nmesbtn()'>添加信息</button>
<div id='mapp'></div>
<script>
var mfs=['萝卜','青菜','茄子','花生','豆芽']
for(let a=0;a<mfs.length;a++){
let emt=document.createElement('div')
let opn=document.createElement('option');opn.value=mfs[a];opn.innerHTML=mfs[a]
emt.ns=0;emt.innerHTML=mfs[a]+0;emt.className='mes';emt.n=mfs[a]     
emt.onclick=function(){
emt.innerHTML=mfs[a]+emt.ns
}
mapp.append(emt);sel.append(opn)
}function nmesbtn(){
let n=sel.value;let emt=gemtbn(n);
emt.ns++;emt.innerHTML="*"+n+emt.ns
totop(emt)
}
function gemtbn(n){for(let a in mapp.children){if(n==mapp.children[a].n){return mapp.children[a]}}return false}
function totop(emt){mapp.insertBefore(emt,mapp.firstChild)}
</script>

4

<style>
.rv{border:1px solid red}
.msb{}
</style>
<div id='rvs'></div>
<script>
var rmb='罗博瑞 罗刘幸 罗博伟 曾宇栋 刁焕杰 罗华'
rmb=rmb.split(' ');rm=[]
for(let a in rmb){
let r={n:rmb[a],crsel:null};rm.push(r)
let rv=document.createElement('div')
let inp=document.createElement('input')
let sub=document.createElement('button')
let msb=document.createElement('div')
rv.className='rv';rv.innerHTML=a+rmb[a]//rmb[a]
rvs.append(rv)
for(let a in rmb){
let btn=document.createElement('button')
let dhk=document.createElement('div')
dhk.innerHTML=rmb[a];dhk.style.display='None';
btn.innerHTML=rmb[a];btn.con=a;btn.dhkid=a
btn.onclick=function(){if(r.crsel==null){r.msb.children[a].style.display='';r.crsel=this;this.style.color='red';}else if(r.crsel==this){r.msb.children[a].style.display='None';r.crsel=null;this.style.color=''}else{;r.msb.children[r.crsel.dhkid].style.display='None';r.msb.children[a].style.display='';r.crsel.style.color='';r.crsel=this;this.style.color='red'} }                
msb.append(dhk)
if(r.n!=rmb[a]){rv.append(btn);}
}
r.msb=msb;r.inp=inp
sub.innerHTML='发送';msb.className='msb'
sub.onclick=function(){let cob=r.crsel;
if(cob!=null){let co=rm[cob.con];//alert(co.n)
r.msb.children[cob.dhkid].append(mesf(r,co))//r.msb.append(mesf(r,co));co.msb.append(mesf(r,co))
co.msb.children[a].append(mesf(r,co))}}
rv.append(inp,sub,msb)
}
function mesf(a,b){let mes=document.createElement('div');mes.innerHTML=a.n+': '+a.inp.value+' >'+b.n;return mes}
</script>

3

<style>
.rv{border:1px solid red}
.msb{height:100px}
</style>
<div id='rvs'></div>
<script>
var rmb='罗博瑞 罗刘幸 罗博伟 曾宇栋 刁焕杰 罗华'
rmb=rmb.split(' ');rm=[]
for(let a in rmb){
let r={n:rmb[a],crsel:null};rm.push(r)
let rv=document.createElement('div')
rv.className='rv';rv.innerHTML=a//rmb[a]
rvs.append(rv)
for(let a in rmb){
let btn=document.createElement('button')
btn.innerHTML=rmb[a];btn.con=a;
btn.onclick=function(){if(r.crsel==null){r.crsel=this;this.style.color='red';}else if(r.crsel==this){r.crsel=null;this.style.color=''}else{r.crsel.style.color='';r.crsel=this;this.style.color='red'} }                
if(r.n!=rmb[a]){rv.append(btn);}
}
let inp=document.createElement('input')
let sub=document.createElement('button')
let msb=document.createElement('div')
r.msb=msb;r.inp=inp
sub.innerHTML='发送';msb.className='msb'
sub.onclick=function(){let cob=r.crsel;
if(cob!=null){let co=rm[cob.con];//alert(co.n)
r.msb.append(mesf(r,co));co.msb.append(mesf(r,co))
}}
rv.append(inp,sub,msb)
}
function mesf(a,b){let mes=document.createElement('div');mes.innerHTML=a.n+': '+a.inp.value+' >'+b.n;return mes}
</script>

2

<style>
.rv{border:1px solid red}
.msb{height:100px}
</style>
<div id='rvs'></div>
<script>
var rmb='罗博瑞 罗刘幸 罗博伟 曾宇栋 刁焕杰 罗华'
rmb=rmb.split(' ');
for(let a in rmb){
let rv=document.createElement('div')
rv.className='rv';rv.innerHTML=a//rmb[a]
rvs.append(rv)
for(let a in rmb){
let btn=document.createElement('button')
btn.innerHTML=rmb[a]
rv.append(btn);
}
let inp=document.createElement('input')
let sub=document.createElement('button')
let msb=document.createElement('div')
sub.innerHTML='发送';msb.className='msb'
rv.append(inp,sub,msb)
}
</script>

1

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob)</title> 
</head>
<body>
<span onclick='sel(this,"lbr")'>罗博瑞</span>
<span onclick='sel(this,"llx")'>罗刘幸</span>
<span onclick='sel(this,"lbw")'>罗博伟</span><span onclick='sel(this,"zyd")'>曾宇栋</span><span onclick='sel(this,"dhj")'>刁焕杰</span><span onclick='sel(this,"lh")'>罗华</span><input value='' id='inp'/><button onclick='send()'>发送</button>
<div id='mesbox'></div><script>
crts=null
function sel(emt,n){
if(crts!=null){crts.style.color=''}
if(emt==crts){crts=null;emt.style.color=''}else{crts=emt;emt.style.color='red'}
}
function mesf(a,b,m){let mb=document.createElement('div');mb.innerHTML=b+':'+m;return mb/*{a:a,b:b,m:m}*/}
function send(){//alert(crts.innerHTML)
mesbox.append(mesf(null,crts.innerHTML,inp.value))}</script></body>
</html>