zoukankan      html  css  js  c++  java
  • 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^)/

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

  • 相关阅读:
    UE4 UnLoadStreamLevel
    UE4 Xml读写
    UE4 保存为bitmap
    C++ 不定参数(转)
    C++ 默认参数(转载)
    Tuple初探
    遗传算法matlab实现
    蚁群算法matlab实现
    汉诺塔问题C++实现
    较优H圈matlab实现
  • 原文地址:https://www.cnblogs.com/caidupingblogs/p/5981938.html
Copyright © 2011-2022 走看看