JS简单仿QQ聊天工具的制作
2013-08-20 16:46
253 查看
刚接触JS,对其充满了好奇,利用刚学到的一点知识,写了一个简单的仿QQ聊天的东西,其中还有很多的不足之处,有待慢慢提高。
功能:1、在输入框中输入内容,点击发送,即可在上方显示所输入内容。
2、点击‘笑脸’按钮,可选择笑脸进行发送。
不足之处:1、没有添加键盘事件,暂不可以用键盘进行发送内容;
2、在输入框中输入“请输入内容”时,系统并不会发送,因为此代码尚未对手动输入“请输入内容”和系统自动显示的“请输入内容”进行判断。
3、点击“笑脸”时,其图片路径会显示在input框中,也是不合理之处。
由于刚开始进行研究,故出现的bug也是比较的多的。我会在以后慢慢的进行改进。写下这些,是对自己的成长进行一个记录。希望可以越来越好。
HTML代码:
CSS代码:
JS代码:
显示效果如下:
功能: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>
显示效果如下:
相关文章推荐
- 如何制作简单的仿qq聊天工具
- 用js写简单QQ面板-扩展
- JS制作计时器(毫秒级),简单、易懂
- 热力图制作 heatmap.js+leaflet.js简单例子
- JS控制滚动条 —— 进度条的简单制作
- 运用js简单制作图片的左右移动
- JS制作简单的三级联动
- JS制作简单图片轮播--通过调整margin制作
- 自己用html、js、ajax、php制作的简单网页版计算器。
- 基于node.js制作简单爬虫教程
- js正则实现的密码框简单制作,还可以替换成自己想用得符号
- js网站轮播图怎么做简单?鸡哥教你简单制作效果炫酷
- js制作一个简单的div弹窗:
- JS实现超简单的仿QQ折叠菜单效果
- js制作简单的tab菜单切换
- js制作日历1----------简单的日历
- 最简单的css+js标签页效果制作
- Node.js制作简单聊天室
- js简单制作图片焦点图
- 详解使用JS如何制作简单的ASCII图与单极图