把聊天室的界面先做好,主代码(现在还只能单机模式・_・):
window.onload = function(){ var arrIcon = ['http://tva1.sinaimg.cn/crop.0.0.540.540.180/006fKk88jw8f54ate3l02j30f00qodhh.jpg','http://tva1.sinaimg.cn/crop.0.0.540.540.180/006fKk88jw8f54ate3l02j30f00qodhh.jpg']; //控制头像改变 var num = 0; //用来累加改变左右浮动 var iNow = -1; var icon = document.getElementById('icon').getElementsByTagName('img'); var btn = document.getElementById('btn'); var text = document.getElementById('text'); var content = document.getElementsByTagName('ul')[0]; var img = content.getElementsByTagName('img'); var span = content.getElementsByTagName('span'); icon[0].onclick = function(){ if(num==0){ this.src = arrIcon[1]; num = 1; }else if(num==1){ this.src = arrIcon[0]; num = 0; } } btn.onclick = function(){ if(text.value ==''){ alert('发送内容不能为空'); }else { content.innerHTML += '<li><img src="'+arrIcon[num]+'"><span>'+text.value+'</span></li>'; iNow++; if(num==0){ img[iNow].className += 'imgright'; span[iNow].className += 'spanright'; }else { img[iNow].className += 'imgleft'; span[iNow].className += 'spanleft'; } text.value = ''; } } }
编辑内容,点击发送可以发送消息:(^o^)/
功能尚未完整,未完待续……