qq html制作,jquery学习练习：制作QQ简易聊天框

使用html( )获取和设置页面内容

使用val( )获取聊天内容

使用addClass( )为指定元素追加样式

使用数组保存聊天人员头像和昵称

使用随机函数获取聊天人员的头像和昵称

在输入框中输入内容，单击“发送”按钮，显示聊天内容，使用addClass( )为聊天内容添加背景颜色、边框为圆角；聊天内容发送完毕后，清空输入框

聊天内容较多，聊天内容在垂直方向显示滚动条

输入框中没有输入内容，单击“发送”按钮，不作任何操作

使用数组保存聊天者的头像和昵称

使用val()获取输入框中的内容，使用length属性判断是否输入内容

获取当前聊天内容

使用html( )把当前聊天内容显示在聊天区域

使用addClass( ) 为当前聊天内容添加背景样式

$(document).ready(function(){

var $imgs=new Array("images/head01.jpg","images/head02.jpg","images/head03.jpg");

var $ni=new Array("时尚伊人","六月奇迹","松松");

$("#send").click(function(){

var $sui = parseInt(Math.random() * 3);

var $nei=$("textarea").val();

if($nei.length==""){

alert("你没写东西啊");

}else{

var $currentstr=$(".chatBody").append("

"+$ni[$sui]+"

"+$nei+"

");

$(".chatBody p").addClass("a");

$("textarea").val("");

}

});

关闭(C)发送(S)

*{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;}

.a{

background-color: darkgray; border-radius: 5px;

}

qq html制作,jquery学习练习：制作QQ简易聊天框相关推荐

jQuery基本操作--制作QQ简易聊天框
需求: 训练要点 1 .使用 html( ) 获取和设置页面内容 2 .使用 val( ) 获取聊天内容 3 .使用 addClass( ) 为指定元素追加样式 4 .使用数组保存聊天人员头像和昵称 ...
jq制作QQ简易聊天框
以下代码展示: * {margin: 0;padding: 0;line-height: 22px;font-family: "Arial", "微软雅黑";} ...
万字长文保姆级教你制作自己的多功能QQ机器人
转载请注明出处:小锋学长生活大爆炸(https://xfxuezhang.blog.csdn.net/) 若发现存在部分图片缺失,可以访问原文:万字长文保姆级教你制作自己的多功能QQ机器人 - 小锋学 ...
用html和css设计QQ注册页面,html和css制作QQ企鹅教程
我们知道CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式.CSS在Web设计领域是一个突破.利用它可以实现修改一个小的样式更新与之相关的所有页面元素.大家在学习前端编程的时候肯定会 ...
QQ找茬辅助工具的制作
QQ找茬辅助工具的制作转载请注明出处:http://www.cppblog.com/greatws/archive/2009/05/05/81996.html 这段时间GF一直在玩QQ找茬,看了一下 ...
使用jQuery 快速高效制作网页特效
使用jQuery 快速高效制作网页特效第一章:JavaScript基础 DOM:document object model 文档对 ...
遥感影像深度学习样本制作
交流QQ:3239516597 对于遥感同学,在学习深度学习时,第一步就要解决遥感数据样本的制作,遥感影像数据的样本根据不同的应用也有所不同,不知道的同学可以去看视频:遥感深度学习样本制作视频1 今天 ...
学习网页制作中如何在正确选取和使用 CSS 单位
在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...
HTML如何编写类似QQ聊天框,jQuery实现简易QQ聊天框
本文实例为大家分享了jQuery实现简易QQ聊天框的具体代码,供大家参考,具体内容如下例子1 *{list-style: none;margin: 0;padding: 0;} .box1{ wid ...

qq html制作,jquery学习练习：制作QQ简易聊天框

qq html制作,jquery学习练习：制作QQ简易聊天框相关推荐

最新文章

热门文章