JavaScript之聊天室设计摸拟

把聊天室的界面先做好，主代码（现在还只能单机模式・_・）：

   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^)/

功能尚未完整，未完待续……

posted @ 2016-10-20 18:31  冷的锋刃  阅读(298)  评论(0)    收藏  举报