<!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. RAC环境上搭建DG

    首先RAC要确实是开归档的状态archive log list;如果是非归档状态,需要执行下面几步srvctl stop database -d +数据库实例名 关闭数据库--节点1(要做DG主库的) ...

  2. vuex : 模块化改造

    我们知道,vuex是vue技术栈中很重要的一部分,是一个很好用的状态管理库. 如果你的项目没有那么复杂,或者对vuex的使用没有那么重度,那么,是用不着modules功能的. 但如果你写着写着就发现你 ...

  3. Oracle连接报错之IO异常(The Network Adapter could not establish the connection)

    简单介绍:自己封装oracle jdbc的一些常用功能jar包,自己本机玩没啥问题,给别人玩儿,发现总是抛异常 IO异常(The Network Adapter could not establish ...

  4. Python后端日常操作之在Django中「强行」使用MVVM设计模式

    扫盲 首先带大家了解一下什么是MVVM模式: 什么是MVVM?MVVM是Model-View-ViewModel的缩写. MVVM是MVC的增强版,实质上和MVC没有本质区别,只是代码的位置变动而已 ...

  5. 多个activity的博客参考，用mainactivity 调用 明天阅读一下

    https://blog.csdn.net/hbwxy521/article/details/53101019

  6. android 文件读写权限的设定

    读取本地文件的权限问题 2016年08月15日 21:41:30 阅读数:2520 在一个音乐app过程中需要读取手机本地内存卡中的音乐文件并可以播放,具体遇到的问题如下:工程没有错误,运行出现以下信 ...

  7. 网络通信机制：Socket、TCP/IP、HTTP

    13.1.1 TCP/IP协议 讲的很抽象,没具体看懂什么是TCP协议,什么是IP协议.IP协议保证消息从一个主机传送到另一个主机,消息在传送的过程中被分割成一个个小包,TCP协议会让两台相互连接的计 ...

  8. 《Python Web开发学习实录》高清PDF版|百度网盘免费下载|Python Web开发学习实录

    <Python Web开发学习实录>高清PDF版|百度网盘免费下载|Python Web开发学习实录 提取码:9w3o 内容简介 Python是目前流行的动态脚本语言之一. 李勇,本书共1 ...

  9. Maven中出现Could not find artifact ...:pom:0.0.1-SNAPSHOT

    参考链接:https://blog.csdn.net/zpwggi123/article/details/87189959 多模块项目构建时,先将总项目install,之后子项目分别install,注 ...

  10. 图解HTTP 2/11

    第一章 了解Web及网络基础 *HTTP(HyperText Transfer Protocal, 超文本传输协议),可以说,Web是建立在HTTP协议上通信的. *3项WWW(World Wide ...