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

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

  • 相关阅读:
    如何构建微服务架构
    JVM内幕:Java虚拟机详解
    JVM 调优系列之图解垃圾回收
    干货:JVM 堆内存和非堆内存
    JavaWeb项目架构之NFS文件服务器
    SSH框架之-hibernate 三种状态的转换
    随笔聊架构
    如果不从事编程,我可以做什么?
    JAVA几种缓存技术介绍说明
    Java反射机制应用实践
  • 原文地址:https://www.cnblogs.com/caidupingblogs/p/5981938.html
Copyright © 2020-2023  润新知