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

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

  • 相关阅读:
    Kubernetes实战:高可用集群的搭建和部署
    华为云MVP程云:知识化转型,最终要赋能一线
    支持60+数据传输链路,华为云DRS链路商用大盘点
    关于单元测试的那些事儿,Mockito 都能帮你解决
    深入原生冰山安全体系,详解华为云安全服务如何构筑全栈安全
    云小课|ModelArts Pro 视觉套件:零代码构建视觉AI应用
    FLINK重点原理与机制:内存(1)task之间的数据传输
    FLINK重点原理与机制:内存(2)网络流控及反压机制剖析(一)
    FLINK重点原理与机制:状态(3)两阶段提交
    FLINK重点原理与机制:状态(2)Flink的检查点算法CHECKPOINT
  • 原文地址:https://www.cnblogs.com/caidupingblogs/p/5981938.html
Copyright © 2011-2022 走看看