<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>制作qq简易聊天框</title>

<script type="text/javascript" src="js/jQuery1.11.1.js"></script>

<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>

<link rel="stylesheet" href="css/chat.css">

<style type="text/css">

</style>

<script type="text/javascript">

$(function(){

    //保存聊天者的头像和昵称

    //var headImg = new Array("images/head01.jpg","images/head02.jpg","images/head03.jpg");

    var uname = new Array("时尚达人","六月岛","胜过这首歌");

    //鼠标单击事件

    $("#send").click(function(){

        qqgo();

    });

    //键盘点击事件

     $(document).keydown(function(event){

            if(event.keyCode=="13"){//按下回车键

                qqgo();

            }

        });

    function qqgo(){

        //获取文本值

        var txt_value = $(".chatText").val();

        if (txt_value!="") {

        //设置随机数

        //随机数：0+1 = 1，1+1 = 2，2+1 =3;     所以是1，2，3

            var iNum = Math.floor(Math.random()*uname.length)+1;

        //设置聊天内容

        var headStar = "<div><img src =images/head0"+iNum+".jpg></div>";//头像

        //昵称数组的下标是：1-1 = 0，2-1  = 1，3-1 = 2；所以最后对应上数组的下标：0，1，2

        var userName ="<p>"+uname[iNum-1]+"</P>";//昵称

        var chatAtr = "<div>"+$(".chatText").val()+"</div>";//当前输入的内容

        var currentStr  ="<section>"+headStar+userName+chatAtr+"</section>";

        //获得当前聊天的内容

        var str = $(".chatText").html();

        //获取到的聊天的内容加入到chatBody的div上去

        $(".chatBody").html(str+currentStr);

          $(".chatText").val('');//清空输入框 

        }else{

            alert("请输入值");

        }

    }

});

</script>

</head>

<body>

    <section id="chat">

    <div class="chatBody"></div>

    <div><img src="data:images/icon.jpg"></div>

    <textarea class="chatText"></textarea>

    <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>

</section>

</body>

</html>

制作qq简易聊天框的更多相关文章

  1. jQuery实现QQ简易聊天框

    实现效果: html代码: <section id="chat"> <div class="chatBody"></div> ...

  2. QQ去除聊天框广告详解——2016.9 版

    QQ聊天框广告很烦人,百度出来的一些方法早已过时,下面是博主整理出来的方法,供各位同学参考. 1.按键盘上的 Win+R 快捷键打开运行框,然后复制并粘贴 Application Data\Tence ...

  3. 原生NodeJs制作一个简易聊天室

    准备工作 安装NodeJs环境 安装编译器Sublime 如果网速不理想,可以百度一下如何加快npm的速度~ 使用node搭建一个简单的网站后台 做完准备工作之后,新建文件夹chatroom,在cha ...

  4. java+socket 简易聊天工具

    1.服务器端程序 package com.test3; import java.io.*; import java.net.*; import java.awt.*; import java.awt. ...

  5. 真刀实战地搭建React+Webpack+Express搭建一个简易聊天室

    一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...

  6. 高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框

    上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输 ...

  7. QQ聊天框变成方框口口口口的解决办法

    QQ聊天框变成方框口口口口的解决办法 安装了QQ拼音输入法6.0之后,发现 QQ聊天对话框好友名称变成框口口口口口,网上没有找到办法,卸载轻聊版,安装完整版9.03之后,再次启动就好了.

  8. QQ聊天框测试用例设计

    QQ.微信聊天框的主要功能就是发送消息和接收别人发过来的消息. 消息内容类型: 纯文字 纯图片 纯表情 文字+表情 文件 发送键: 点击“发送”发送 使用快捷键发送(针对电脑端) 用户在线状态: 在线 ...

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

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

随机推荐

  1. C++语法小记---前置操作符和后置操作符

    前置操作符和后置操作符 单独的"++i"和"i++"是否有区别 对于基本类型: 二者没有区别,因为编译器会对代码进行优化,二者的汇编代码完全相同 对于类类型: ...

  2. HashMap 中 get，put 方法源码实现

    HashMap 是Map接口的一个实现类 1.线程 HashMap 非线程安全2.数据存储结构 hashMap采用Entity数组来存储 key-value对,每一个键值对组成一个Entity,键值对 ...

  3. java 手机号码归属地查询

    下面是利用第三方接口实现手机号码归属地查询 (复制请标明出处或留言) package com.test.yyc; import java.io.BufferedReader; import java. ...

  4. 一个文本框的andriod教程

    https://blog.csdn.net/androidmsky/article/details/49870823

  5. freeRTOS内核学习笔记(1)-编程标准

    在开始具体的学习之前,你应该先了解freeRTOS的编程标准.这能够方便你在接下来的阅读中快速的了解一些内容 的基本信息,并方便记忆.此外,良好的编程风格也是工作效率的保障. 你可以在https:// ...

  6. Spring中与bean有关的生命周期

    前言 记得以前的时候,每次提起Spring中的bean相关的生命周期时,内心都无比的恐惧,因为好像有很多,自己又理不清楚,然后看网上的帖子,好像都是那么一套,什么beanFactory啊,aware接 ...

  7. Android Zero (基础介绍篇)

    开发Android首先你得先配置好环境,配置的文章网上一大把,这里就不重复造轮子说了,配置好JAVA下载好AndroidStudio后我们先对基本的项目结构做一下了解! 首先介绍下你必须得知道的文件夹 ...

  8. map,reduce,filter基础实现

    #coding=gbk from operator import add # 导入加法 # map 函数名 , 序列对象 print(list(map(str,range(5)))) print(li ...

  9. jieba尝鲜

    import jieba strings = '我工作在安徽的安徽师范大学,这个大学很美丽,在芜湖' # print(dir(jieba)) dic_strings = {} lst_strings ...

  10. Python打印到屏幕_读取键盘输入

    Python打印到屏幕_读取键盘输入: print( ): 打印输出括号中的值 print("hello") # hello strs = 'hello' print(" ...