刚接触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:;padding:;}
.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:;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>

显示效果如下:

JS简单仿QQ聊天工具的制作的更多相关文章

  1. Socket实现仿QQ聊天(可部署于广域网)附源码(1)-简介

    1.前言 本次实现的这个聊天工具是我去年c#程序设计课程所写的Socket仿QQ聊天,由于当时候没有自己的服务器,只能在机房局域网内进行测试,最近在腾讯云上买了一台云主机(本人学生党,腾讯云有个学生专 ...

  2. 仿QQ聊天程序(java)

    仿QQ聊天程序 转载:牟尼的专栏 http://blog.csdn.net/u012027907 一.设计内容及要求 1.1综述 A.系统概述 我们要做的就是类似QQ这样的面向企业内部的聊天软件,基本 ...

  3. 高仿qq聊天界面

    高仿qq聊天界面,给有需要的人,界面效果如下: 真心觉得做界面非常痛苦,给有需要的朋友. chat.xml <?xml version="1.0" encoding=&quo ...

  4. Android特效专辑(六)——仿QQ聊天撒花特效,无形装逼,最为致命

    Android特效专辑(六)--仿QQ聊天撒花特效,无形装逼,最为致命 我的关于特效的专辑已经在CSDN上申请了一个专栏--http://blog.csdn.net/column/details/li ...

  5. WPF仿QQ聊天框表情文字混排实现

    原文:WPF仿QQ聊天框表情文字混排实现 二话不说.先上图 图中分别有文件.文本+表情.纯文本的展示,对于同一个list不同的展示形式,很明显,应该用多个DataTemplate,那么也就需要Data ...

  6. Android—简单的仿QQ聊天界面

    最近仿照QQ聊天做了一个类似界面,先看下界面组成(画面不太美凑合凑合呗,,,,):

  7. C# 实现简单仿QQ登陆注册功能

    闲来没事,想做一个仿QQ登陆注册的winform,于是利用工作之余,根据自己的掌握和查阅的资料,历时4天修改完成,新手水平,希望和大家共同学习进步,有不同见解希望提出! 废话不多说,进入正题: 先来看 ...

  8. Netty 仿QQ聊天室 (实战二)

    Netty 聊天器(百万级流量实战二):仿QQ客户端 疯狂创客圈 Java 分布式聊天室[ 亿级流量]实战系列之15 [博客园 总入口 ] 源码IDEA工程获取链接:Java 聊天室 实战 源码 写在 ...

  9. js五道经典练习题--第二道仿qq聊天框

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

随机推荐

  1. 使用phpize建立php扩展(Cannot find config.m4)(转)

    php源码:/root/soft/php-5.3.4php安装: /usr/local/php [root@ns root]# phpizeCannot find config.m4.Make sur ...

  2. stack例子

    栈使用在括号匹配中的例子 程序如下: #include<stack> #include<iostream> using namespace std; int main() { ...

  3. iOS开发简单高效的数据存储

    在iOS开发过程中,不管是做什么应用,都会碰到数据保存的问题,你是用什么方法来持久保存数据的?这是在几乎每一次关于iOS技术的交流或讨论都会被提到的问题,而且大家对这个问题的热情持续高涨.本文主要从概 ...

  4. 在Android应用程序使用YouTube API来嵌入视频

    在Android版YouTube播放器API使您可以将视频播放功能到你的Android应用程序.该API允许您加载和播放YouTube视频(和播放列表),并自定义和控制视频播放体验. 您可以加载或暗示 ...

  5. ThinkPHP函数详解系列

    为了能方便大家学习和掌握,在这里汇总下ThinkPHP中的经典函数用法 A 函数:实例化控制器R 函数:直接调用控制器的操作方法C 函数:设置和获取配置参数L 函数:设置和获取语言变量D 函数:实例化 ...

  6. Oracel 数据库函数

    -- Oracle 函数 学习 -- 数值函数 ,(四舍五入, 取整,常用计算,三角) -- 1.四舍五入 round(n[,m]) ,省略m :表示 0 ;m>0 ;小数点后m位 ;m< ...

  7. CSS样式表介绍

    一.    CSS中的样式选择 1)内样式(内联样式) style=””; 2)内嵌样式 <style type="text/css"></style> 3 ...

  8. C#微信公众号开发 -- (一)开发之前的准备

    本系列文章讲述的是利用C#语言开发微信公众号的实例教程,主要是服务号的开发(因为订阅号不能获取微信开发的高级接口) 想要开发微信服务公众号,首先必须要有一个认证的微信服务号,这样才能够使用微信提供的所 ...

  9. MVC小系列(一)【制作表格】

    在Razor引擎中,对于在表格中进行遍历时,一般会这样写 复制代码 <table border="> @{ ; i < ; i++) { <tr> <td ...

  10. com.sun.org.apache.commons.logging.LogConfigurationException: java.lang.NullPointerException

    在日志中, 查看导入的包是否是 import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory;