jQuery实现简易QQ聊天框
本文讲解"jQuery实现简易QQ聊天框"，用于解决相关问题。
本文实例为大家分享了jQuery实现简易QQ聊天框的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>例子1</title>
<style type="text/css">
*{list-style: none;margin: 0;padding: 0;}
.box1{width: 500px;height: 480px;border: 1px solid #aaa;margin: 0 auto;margin-top: 20px;
}
.box{width: 500px;height: 250px;overflow: auto;
}
#bb{width: 494px;margin-top: -5px;border: 1px solid white;outline: none;
}
img{width: 500px;
}
.btn{margin-left:325px;
}
.btn,.btn1{background: #069dd5;width: 80px;padding: 3px 0;border-radius: 7px;color: white;font-size: 14px;outline: none;
}
.image{margin: 5px;width: 50px;
}
.pp{margin-left: 60px;margin-top: -50px;color: #009494;margin-bottom: 10px;
}
.ppp{width: 400px;margin-left: 60px;background: #eee;border-radius: 5px;padding: 5px; font-size: 14px;
}
.item{margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="box1"><div class="box"><ul class="items"></ul></div><img src="asd.jpg" alt=""><textarea name="" id="bb" cols="30" rows="10"></textarea> <button class="btn">关闭(c)</button><button class="btn1">发送(s)</button>
</div>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){var ul = $(".items")var arr=[1,2,3]var arr1=["松松","六月的雨","毛毛"]function num(n,m){//封装随机数return Math.round(Math.random()*(m-n)+n)}$(".btn1").click(function(){//创建按钮点击事件var li = $("<li></li>") //创建一个li标签var imgs = $("<img src='' alt=''/>")//创建一个img标签var h5 = $("<h5></h5>")//创建一个h5标签var p = $("<p></p>")//创建一个p标签var val = bb.value;//获取文本域的值p.html(val);//把文本域的值赋给p标签$(p).addClass("ppp")//给p标签加一个css样式$(li).addClass("item")//给li加一个css样式li.appendTo(ul)//把li插入到ul内bb.value = "";//清空文本域内容var arr2 = num(0,arr.length-1)//提取随机数$(h5).addClass("pp")//给h5添加css样式h5.html(arr1[arr2])//给h5赋值$(imgs).attr({"src":arr[arr2]+".jpg"})//给img添加属性和属性值$(imgs).addClass("image")//给img添加一个css样式p.appendTo(li)//将p标签插入li内h5.prependTo(li)//将h5标签插入li内imgs.prependTo(li)//将img标签插入li内$(".box").scrollTop($(".box")[0].scrollHeight);//让滚动条始终在最底端})
})
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。
关于 "jQuery实现简易QQ聊天框" 就介绍到此。希望多多支持编程宝库。
node.js如何制作登录拦截器：本文讲解"node.js怎么制作登录拦截器"，用于解决相关问题。拦截器在web开发中随处可见,比如站点的管理后台,不说所有人都能进入,所以就需要做一个拦截器并友好的跳转到提示页.下面我们简单实现一种,判断用 ...