JS简单仿QQ聊天工具的制作

刚接触JS，对其充满了好奇，利用刚学到的一点知识，写了一个简单的仿QQ聊天的东西，其中还有很多的不足之处，有待慢慢提高。

功能：1、在输入框中输入内容，点击发送，即可在上方显示所输入内容。

　　　2、点击‘笑脸’按钮，可选择笑脸进行发送。

不足之处：1、没有添加键盘事件，暂不可以用键盘进行发送内容;

　　　　   2、在输入框中输入“请输入内容”时，系统并不会发送，因为此代码尚未对手动输入“请输入内容”和系统自动显示的“请输入内容”进行判断。

　　　　   3、点击“笑脸”时，其图片路径会显示在input框中，也是不合理之处。

由于刚开始进行研究，故出现的bug也是比较的多的。我会在以后慢慢的进行改进。写下这些，是对自己的成长进行一个记录。希望可以越来越好。

HTML代码：

<div class="bgdiv" id='wrap'>
    <div class="name">大大的力量</div>
    <ul id="ul1"></ul>
    <div class="btdiv">
        <div class="ipt">
            <div class="btns_1">
                <a href="javascript:;" class="btn_face" id="btn3"></a>
            </div>
            <form>
                <input type="text" id="ipt1" value="" />
                <input type="button" value="发送" id="btn1" />
            </form>
        </div>
        <ul id="face">
            <li><img src="img/face/f1.png" /></li>
            <li><img src="img/face/f1.png" /></li>
            <li><img src="img/face/f3.png" /></li>
            <li><img src="img/face/f4.png" /></li>
            <li><img src="img/face/f5.png" /></li>
            <li><img src="img/face/f1.png" /></li>
            <li><img src="img/face/f1.png" /></li>
            <li><img src="img/face/f3.png" /></li>
            <li><img src="img/face/f4.png" /></li>
            <li><img src="img/face/f5.png" /></li>
        </ul>
        <div id="add"><img src="img/add.jpg" /></div>
    </div>
</div>

CSS代码：

*{margin:0;padding:0;}
.bgdiv{width:338px;height:459px;margin:60px auto 0;padding:155px 28px 130px 34px;background:url(img/320.png) no-repeat;font-size:12px;position:relative;}
.name{width:100%;height:45px;line-height:45px;text-align:center;font-size:16px;font-family:'微软雅黑';color:#fff;}
#ul1{width:322px;height:350px;padding:10px 8px;overflow-y:auto;}
#ul1 li{list-style:none;width:100%;margin-bottom:10px;}
#ul1 li img{width:30px;height:30px;}
#ul1 a{max-width:140px;padding:3px;line-height:18px;display:inline-block;border:1px solid #999;border-radius:5px;color:#000;word-break:break-all;text-align:left;box-shadow:0 1px 2px #999;vertical-align: top;}
#ul1 a img{width:20px;height:20px;vertical-align: middle;}
.btdiv{position:absolute;bottom:130px;left:34px;width:337px;}
.ipt{width:321px;height:32px;padding:7px 8px;background:url(img/inpt_bg.jpg) repeat-x left center;}
.btns_1{float:left;}
.btns_1 a{display:inline-block;text-align:left;margin-top:3px;}
.btn_add{width:30px;height:31px;background:url(img/btn_1.jpg) no-repeat;background-position:0 0;}
.btn_face{width:30px;height:31px;background:url(img/btn_1.jpg) no-repeat;background-position:100% 0;*+margin-left:6px;}
form{width:280px;height:32px;float:right;}
#ipt1{width:222px;height:30px;padding-left:3px;line-height:30px;border:1px solid #c3c3c3;border-radius:6px;background:#fff;vertical-align:middle;}
#btn1{width:40px;height:32px;background:url(img/btn_sent.jpg) no-repeat;border:0;vertical-align:middle;text-indent:9999px;margin-left: 4px;}
#face{width:330px;overflow:hidden;padding:8px 7px 0 0;background:#CFD6DE;display:none;}
#face li{width:40px;height:40px;line-height:50px;margin-bottom:8px;text-align:center;margin-left:7px;float:left;list-style:none;}
#add{width:337px;height:156px;display:none;}

JS代码：

<script>
window.onload=function(){
var oDiv=document.getElementById('wrap');
var oUl1=document.getElementById('ul1');
var aLi=oUl1.getElementsByTagName('li');
var oIpt=document.getElementById('ipt1');
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oBtn3=document.getElementById('btn3');
var oDiv1=document.getElementById('face');
var aLi1=document.getElementsByTagName('li');
var oDiv2=document.getElementById('add');
oBtn1.onclick=function(){
    if(oIpt.value==''){
        oIpt.value='请输入内容';
    }
    else if(oIpt.value=='请输入内容'){
        oUl1.innerHTML=oUl1.innerHTML;
    }
    else{
        oUl1.innerHTML=oUl1.innerHTML+'<li><img src="img/peo3.jpg" /><a>'+oIpt.value+'</a></li>';
        oIpt.value='';
    }
    say();
}
oDiv1.onOff=true;
oBtn3.onclick=function(){
    if(oDiv1.onOff){
        oDiv1.style.display='block';
        oUl1.style.height='244px' ;
        oDiv1.onOff=false;
    }
    else{
        oDiv1.style.display='none';
        oUl1.style.height='350px' ;
        oDiv1.onOff=true;

    }    
}
for(var i=0;i<aLi1.length;i++){
    aLi1[i].onmouseover=function(){
        this.style.background='#999';
    }
    aLi1[i].onmouseout=function(){
        this.style.background='';
    }
    aLi1[i].onclick=function(){
        oIpt.value=oIpt.value+this.innerHTML;
        say();
    }
}
function say(){
    for(var i=0;i<aLi.length;i++){
            var oImg=aLi[i].getElementsByTagName('img')[0];
            var oA=aLi[i].getElementsByTagName('a')[0];
            if(i%2==0){
                aLi[i].style.textAlign='left';
                oA.style.background='#8bc5f2';
                oImg.src='img/peo3.jpg';
                oImg.style.cssFloat='left';
                oImg.style.marginRight='6px';
                oImg.style.styleFloat='left';
            }
            else{
                aLi[i].style.textAlign='right';
                oA.style.background='#eaebed';
                oImg.src='img/peo2.jpg';
                oImg.style.cssFloat='right';
                oImg.style.marginLeft='6px';
                oImg.style.styleFloat='right';
            }
        }
    }


}
</script>

显示效果如下：