<!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. ztree : checkbox 选中/不选中时动态添加/删除DOM元素

    先上代码. var IDMark_Switch = "_switch", IDMark_Icon = "_ico", IDMark_Span = "_ ...

  2. git的几个常用基本操作

    需求一:如何把stage中的修改还原到work dir中 这个需求很常见,也很重要,比如我先将当前work dir中的修改添加到stage中,然后又对work dir中的文件进行了修改,但是又后悔了, ...

  3. 五分钟带你深入了解Redis

    相信phper都知道Redis是什么,既然如此,为表仪式感,首先我还是得说说什么是Redis. Redis是什么 redis是一个高性能的key-value数据库,它是完全开源免费的,而且redis是 ...

  4. Vue nextTick 学习历程

    nextTick 详解 这是官网的解释,比较简洁精炼,反正我是第一遍什么都没看懂 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 经过我一步步测试 ...

  5. python如何支持并发？

    由于GIL(Global Interpreter Lock)的存在使得在同一时刻Python进程只能使用CPU的一个核心,也就是对应操作系统的一个 内核线程,对于一个Python web程序,如果有个 ...

  6. MyBatis Plus 导入IdType失败

    import com.baomidou.mybatisplus.annotation.IdType; 修正Entity模板IdType引入包名到com.baomidou.mybatisplus.enu ...

  7. windows异常-环境变量

    问题现象: 高级设置:windows 找不到文件 %windir%\systempropertiesadvanced.exe 请确定文件是否正确后,再试一次 基础信息: windows7 专业版 问题 ...

  8. UOJ 422 [集训队作业2018] 小Z的礼物 min-max容斥 期望 轮廓线dp

    LINK:小Z的礼物 太精髓了 我重学了一遍min-max容斥 重写了一遍按位或才写这道题的. 还是期望多少时间可以全部集齐. 相当于求出 \(E(max(S))\)表示最后一个出现的期望时间. 根据 ...

  9. CF321E Ciel and Gondolas Wqs二分 四边形不等式优化dp 决策单调性

    LINK:CF321E Ciel and Gondolas 很少遇到这么有意思的题目了.虽然很套路.. 容易想到dp \(f_{i,j}\)表示前i段分了j段的最小值 转移需要维护一个\(cost(i ...

  10. layer.js : n.on is not a function

    当时使用的jQuery为1.4.x的版本.换成高版本就好了. 参考 https://blog.csdn.net/marswill/article/details/69316003