刚接触JS，对其充满了好奇，利用刚学到的一点知识，写了一个简单的仿QQ聊天的东西，其中还有很多的不足之处，有待慢慢提高。
功能：1、在输入框中输入内容，点击发送，即可在上方显示所输入内容。
2、点击‘笑脸’按钮，可选择笑脸进行发送。
不足之处：1、没有添加键盘事件，暂不可以用键盘进行发送内容;
2、在输入框中输入“请输入内容”时，系统并不会发送，因为此代码尚未对手动输入“请输入内容”和系统自动显示的“请输入内容”进行判断。
3、点击“笑脸”时，其图片路径会显示在input框中，也是不合理之处。
由于刚开始进行研究，故出现的bug也是比较的多的。我会在以后慢慢的进行改进。写下这些，是对自己的成长进行一个记录。希望可以越来越好。
HTML代码：
1 <div class="bgdiv" id='wrap'> 2 <div class="name">大大的力量</div> 3 <ul id="ul1"></ul> 4 <div class="btdiv"> 5 <div class="ipt"> 6 <div class="btns_1"> 7 <a href="javascript:;" class="btn_face" id="btn3"></a> 8 </div> 9 <form> 10 <input type="text" id="ipt1" value="" /> 11 <input type="button" value="发送" id="btn1" /> 12 </form> 13 </div> 14 <ul id="face"> 15 <li><img src="img/face/f1.png" /></li> 16 <li><img src="img/face/f1.png" /></li> 17 <li><img src="img/face/f3.png" /></li> 18 <li><img src="img/face/f4.png" /></li> 19 <li><img src="img/face/f5.png" /></li> 20 <li><img src="img/face/f1.png" /></li> 21 <li><img src="img/face/f1.png" /></li> 22 <li><img src="img/face/f3.png" /></li> 23 <li><img src="img/face/f4.png" /></li> 24 <li><img src="img/face/f5.png" /></li> 25 </ul> 26 <div id="add"><img src="img/add.jpg" /></div> 27 </div> 28 </div>
CSS代码：
1 *{margin:0;padding:0;} 2 .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;} 3 .name{width:100%;height:45px;line-height:45px;text-align:center;font-size:16px;font-family:'微软雅黑';color:#fff;} 4 #ul1{width:322px;height:350px;padding:10px 8px;overflow-y:auto;} 5 #ul1 li{list-style:none;width:100%;margin-bottom:10px;} 6 #ul1 li img{width:30px;height:30px;} 7 #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;} 8 #ul1 a img{width:20px;height:20px;vertical-align: middle;} 9 .btdiv{position:absolute;bottom:130px;left:34px;width:337px;} 10 .ipt{width:321px;height:32px;padding:7px 8px;background:url(img/inpt_bg.jpg) repeat-x left center;} 11 .btns_1{float:left;} 12 .btns_1 a{display:inline-block;text-align:left;margin-top:3px;} 13 .btn_add{width:30px;height:31px;background:url(img/btn_1.jpg) no-repeat;background-position:0 0;} 14 .btn_face{width:30px;height:31px;background:url(img/btn_1.jpg) no-repeat;background-position:100% 0;*+margin-left:6px;} 15 form{width:280px;height:32px;float:right;} 16 #ipt1{width:222px;height:30px;padding-left:3px;line-height:30px;border:1px solid #c3c3c3;border-radius:6px;background:#fff;vertical-align:middle;} 17 #btn1{width:40px;height:32px;background:url(img/btn_sent.jpg) no-repeat;border:0;vertical-align:middle;text-indent:9999px;margin-left: 4px;} 18 #face{width:330px;overflow:hidden;padding:8px 7px 0 0;background:#CFD6DE;display:none;} 19 #face li{width:40px;height:40px;line-height:50px;margin-bottom:8px;text-align:center;margin-left:7px;float:left;list-style:none;} 20 #add{width:337px;height:156px;display:none;}
JS代码：
1 <script> 2 window.onload=function(){ 3 var oDiv=document.getElementById('wrap'); 4 var oUl1=document.getElementById('ul1'); 5 var aLi=oUl1.getElementsByTagName('li'); 6 var oIpt=document.getElementById('ipt1'); 7 var oBtn1=document.getElementById('btn1'); 8 var oBtn2=document.getElementById('btn2'); 9 var oBtn3=document.getElementById('btn3'); 10 var oDiv1=document.getElementById('face'); 11 var aLi1=document.getElementsByTagName('li'); 12 var oDiv2=document.getElementById('add'); 13 oBtn1.onclick=function(){ 14 if(oIpt.value==''){ 15 oIpt.value='请输入内容'; 16 } 17 else if(oIpt.value=='请输入内容'){ 18 oUl1.innerHTML=oUl1.innerHTML; 19 } 20 else{ 21 oUl1.innerHTML=oUl1.innerHTML+'<li><img src="img/peo3.jpg" /><a>'+oIpt.value+'</a></li>'; 22 oIpt.value=''; 23 } 24 say(); 25 } 26 oDiv1.onOff=true; 27 oBtn3.onclick=function(){ 28 if(oDiv1.onOff){ 29 oDiv1.style.display='block'; 30 oUl1.style.height='244px' ; 31 oDiv1.onOff=false; 32 } 33 else{ 34 oDiv1.style.display='none'; 35 oUl1.style.height='350px' ; 36 oDiv1.onOff=true; 37 38 } 39 } 40 for(var i=0;i<aLi1.length;i++){ 41 aLi1[i].onmouseover=function(){ 42 this.style.background='#999'; 43 } 44 aLi1[i].onmouseout=function(){ 45 this.style.background=''; 46 } 47 aLi1[i].onclick=function(){ 48 oIpt.value=oIpt.value+this.innerHTML; 49 say(); 50 } 51 } 52 function say(){ 53 for(var i=0;i<aLi.length;i++){ 54 var oImg=aLi[i].getElementsByTagName('img')[0]; 55 var oA=aLi[i].getElementsByTagName('a')[0]; 56 if(i%2==0){ 57 aLi[i].style.textAlign='left'; 58 oA.style.background='#8bc5f2'; 59 oImg.src='img/peo3.jpg'; 60 oImg.style.cssFloat='left'; 61 oImg.style.marginRight='6px'; 62 oImg.style.styleFloat='left'; 63 } 64 else{ 65 aLi[i].style.textAlign='right'; 66 oA.style.background='#eaebed'; 67 oImg.src='img/peo2.jpg'; 68 oImg.style.cssFloat='right'; 69 oImg.style.marginLeft='6px'; 70 oImg.style.styleFloat='right'; 71 } 72 } 73 } 74 75 76 } 77 </script>
显示效果如下：
