<!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. T4 字符串的修改 题解

    有 A=a1a2a3„am,B=b1b2b3„bn 两个字符串(均为小写字母)现在要通过以下操作将 A 或 A 的一个后缀修改为 B: 1. 删除 删除掉 A 中的某一个字符. 2. 添加 将某一个字 ...

  2. C++语法小记---函数对象

    函数对象 用于替代函数指针 优势:函数对象内部可以保存状态,而不必使用全局变量或静态局部变量 关键:重载"()"操作符 #include<iostream> #incl ...

  3. Docker 基础知识 - 使用绑定挂载(bind mounts)管理应用程序数据

    绑定挂载(bind mounts)在 Docker 的早期就已经出现了.与卷相比,绑定挂载的功能有限.当您使用绑定挂载时,主机上的文件或目录将挂载到容器中.文件或目录由其在主机上的完整或相对路径引用. ...

  4. LGV定理

    LGV定理用于解决路径不相交问题. 定理 有 \(n\) 个起点 \(1, 2, 3, ..., n\),它们 分别对应 要到 \(n\) 个终点 \(A, B, C, ..., X\),并且要求路径 ...

  5. Presto 函数开发

    0. 写在前面 Presto Functions 并不能像 Hive UDF 一样动态加载,需要根据 Function 的类型,实现 Presto 内部定义的不同接口,在 Presto 服务启动时进行 ...

  6. 如何查看预收录在arXiv上论文的LaTeX源文件并编译

    arXiv 是一个收集物理学.数学.计算机科学与生物学论文预印本的网站. 对于理科生来说,经常需要在上面搜索下载一些论文,正常情况下,一般人下载的只是 pdf 文件,其实可以在 arXiv 上下载编译 ...

  7. React Native 报错 Error: spawn EACCES 权限

    权限不足,运行命令修改权限 chmod android/gradlew

  8. js 从目标数组中过滤掉 一个数组元素，

    标题描述的有点僵硬,大概需求是,从目标数组中过滤掉我想要删除的元素集合,这里使用的是遍历+过滤器的组合,很方便,做个笔记! let old = ["AE_CN_SUPER_ECONOMY_G ...

  9. flask中url_for使用endpoint和视图函数名

    在flask中,使用url_for 进行路由反转时,需要传递一个endpoint的值,用法如下: @app.route('/', endpoint='my_index') def index(): r ...

  10. PHP pos() 函数

    实例 输出数组中的当前元素的值: <?php$people = array("Peter", "Joe", "Glenn", &quo ...