作业14-QQ简易聊天框


<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>QQ简易聊天框</title><style>*{margin: 0; padding: 0; line-height: 22px; font-family: "Arial", "微软雅黑";}
#chat{margin: 3px auto 0 auto; width:436px; border: 1px #999999 solid;}
.chatBody{width: 100%; height: 220px; overflow:auto;}
.chatText{border: none; width: 100%; height: 50px;}
.btn{text-align: right;}
.btn span{display: inline-block; padding: 0 10px; height: 25px;overflow: hidden; color: #ffffff; border-radius: 5px; background-color: #069dd5; font-size: 12px; margin-right: 3px; cursor:pointer;}
.chatBody div:first-of-type{float: left; width: 38px;}
.chatBody p{float: left; font-size: 12px; width:370px; color: #0000ff;}
.chatBody div:last-of-type{float: left; width: 370px; font-size: 12px;}
.chatBody section{clear: both;}
.chatContent{ background:#efefef;border-radius: 5px; padding: 3px;}</style>
</head>
<body>
<section id="chat"><div class="chatBody"></div><div><img src="img/icon.jpg"></div><textarea class="chatText"></textarea><div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script >$(document).ready(function(){var headImg=new Array("head01.jpg","head02.jpg","head03.jpg");var uName=new Array("时尚伊人","六月奇迹","松松");$("#send").click(function(){if($(".chatText").val().length>0){  //判断当前输入框中是否有内容var str=$(".chatBody").html();      //获取当前聊天内容var iNum=Math.floor(Math.random()*3);  //随机获取头像和昵称var headStr="<div><img src=img/"+headImg[iNum]+"></div>";   //设置头像var userName="<p>"+uName[iNum]+"</p>";                           //设置昵称var chatStr="<div>"+$(".chatText").val()+"</div>";    //获取并设置当前输入的内容var currentStr="<section>"+headStr+userName+chatStr+"</section>"; //当前聊天的头像、昵称和内容$(".chatBody").html(str+currentStr);$(".chatBody section div:last").addClass("chatContent");$(".chatText").val("");//清除文本框中的内容}});
})</script>
</body>
</html>

作业14-QQ简易聊天框相关推荐

qq html制作,jquery学习练习：制作QQ简易聊天框
使用html( )获取和设置页面内容使用val( )获取聊天内容使用addClass( )为指定元素追加样式使用数组保存聊天人员头像和昵称使用随机函数获取聊天人员的头像和昵称在输入框中输入内 ...
jQuery基本操作--制作QQ简易聊天框
需求: 训练要点 1 .使用 html( ) 获取和设置页面内容 2 .使用 val( ) 获取聊天内容 3 .使用 addClass( ) 为指定元素追加样式 4 .使用数组保存聊天人员头像和昵称 ...
jq制作QQ简易聊天框
以下代码展示: * {margin: 0;padding: 0;line-height: 22px;font-family: "Arial", "微软雅黑";} ...
纯JAVA模拟、实现QQ简易聊天互动程序
实现的功能.步骤: 1.定义JFrame窗体中的组件 2.在构造方法中初始化窗体的组件 3.使用网络编程完成数据的传输(TCP,UDP协议) 4.实现发送按钮的监听点击事件 5.实现回车键发送数据功 ...
使用原生HTML、CSS、JS实现简易聊天框
使用原生HTML实现简易聊天框. 1.第一种方式 <!DOCTYPE html> <html lang="en"> <head><meta ...
山寨一把QQ移动终端聊天框,网页版效果其实也很好的!
手机QQ的聊天框很漂亮,包括好多短信交互框也做成类似的风格,各种效果,各种炫,至于不规则形状的那种(称为手绘风格),比较麻烦,这里使用CSS3新特性,border-radius,进行信息框交互内容的设 ...
java socket 工具_java+socket 简易聊天工具
1.服务器端程序 package com.test3; import java.io.*; import java.net.*; import java.awt.*; import java.awt. ...
java socket聊天工具_java+socket 简易聊天工具
1.服务器端程序 package com.test3; import java.io.*; import java.net.*; import java.awt.*; import java.awt. ...
java+socket 简易聊天工具
1.服务器端程序 package com.test3; import java.io.*; import java.net.*; import java.awt.*; import java.awt. ...

作业14-QQ简易聊天框

作业14-QQ简易聊天框相关推荐

最新文章

热门文章