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

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

  • 相关阅读:
    TCP 和 UDP 的区别
    python--各种锁机制归纳整理
    七牛的配置
    全文检索的配置
    记一则css3计算
    C# 生成序号不足补0
    JavaScript Post提交数据并跳转到页面(模拟Form表单提交)
    Swift 修改UITextField.Placeholder颜色
    Swift 延迟运行代码
    Swift 动画片段
  • 原文地址:https://www.cnblogs.com/caidupingblogs/p/5981938.html
Copyright © 2011-2022 走看看