<!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. CSS：有点难的面试题①

    1 举例说明匿名块框和匿名行内框2 什么是标准文档流?3 inline-block遵循怎样的渲染规则?4 什么是BFC?如何触发BFC?5 什么是Line box?(最好画图说明) 6 <met ...

  2. Git别名和配置文件

    目录 备注: 配置别名 配置文件 备注: 本文参考于廖雪峰老师的博客Git教程.依照其博客进行学习和记录,感谢其无私分享,也欢迎各位查看原文. 配置别名 如果,如果这么神器的Git版本控制系统,可以简 ...

  3. DJANGO-天天生鲜项目从0到1-002-用户模块-注册

    本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...

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

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

  5. Laragon修改配置快速创建其他框架的项目

    配置方式 依葫芦画瓢,如添加thinkPHP: # Thinkphp Thinkphp 3.2=composer create-project topthink/thinkphp %s Thinkph ...

  6. python线程,进程,队列和缓存

    一.线程 threading用于提供线程相关的操作,线程是应用程序中工作的最小单元. 创建线程的两种方式1.threading.Thread import threading def f1(arg): ...

  7. layui常用插件(二) 时间插件

    日期和时间 html <div class="layui-inline"> <!-- 注意:这一层元素并不是必须的 --> <input type=& ...

  8. Springboot 多数据源配置，结合tk-mybatis

    一.前言 作为一个资深的CRUD工程师,我们在实际使用springboot开发项目的时候,难免会遇到同时使用多个数据库的情况,比如前脚刚查询mysql,后脚就要查询sqlserver. 这时,我们很直 ...

  9. 如何验证 names(名称), e-mails（邮件）, 和 URLs

    PHP 表单 - 验证邮件和URL 本章节我们将介绍如何验证 names(名称), e-mails(邮件), 和 URLs. PHP - 验证名称 以下代码将通过简单的方式来检测 name 字段是否包 ...

  10. PHP strval() 函数

    strval() 函数用于获取变量的字符串值.高佣联盟 www.cgewang.com PHP 版本要求: PHP 4, PHP 5, PHP 7 语法 string strval ( mixed $ ...