本文实例为大家分享了jQuery实现简易QQ聊天框的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>例子1 & lt;/title>
& lt;风格类型=" text/css "比;
* {list-style:没有,保证金:0;填充:0;}
.box1 {
宽度:500 px;
身高:480 px;
边界:1 px固体# aaa级;
保证金:0汽车;
margin-top: 20 px;
}
.box {
宽度:500 px;
身高:250 px;
溢出:汽车;
}
# bb {
宽度:494 px;
margin-top: 5 px;
边界:1 px白色固体;
大纲:没有;
}
img {
宽度:500 px;
}
.btn {
margin-left: 325 px;
}
.btn .btn1 {
背景:# 069 dd5;
宽度:80 px;
填充:3 px 0;
border - radius: 7 px;
颜色:白色;
字体大小:14 px;
大纲:没有;
}
.image {
保证金:5 px;
宽度:50 px;
}
.pp {
margin-left: 60 px;
margin-top: -50 px;
颜色:# 009494;
margin-bottom: 10 px;
}
.ppp {
宽度:400 px;
margin-left: 60 px;
背景:# eee;
border - radius: 5 px;
填充:5 px;
字体大小:14 px;
}
.item {
margin-bottom: 20 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=" box1 "比;
& lt; div类="盒子"比;
& lt; ul类="项目"祝辞& lt;/ul>
& lt;/div>
& lt; img src=" https://www.yisu.com/zixun/asd.jpg " alt="比;
& lt; textarea name=" id=" bb "关口=" 30 "行=" 10 "祝辞& lt;/textarea>
& lt;按钮类=" btn "祝辞关闭(c) & lt;/button>
& lt;按钮类=" btn1 "祝辞发送(s) & lt;/button>
& lt;/div>
& lt;/body>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/jquery-3.3.1.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
$(函数(){
var ul=$ (" . items”)
var arr=(1、2、3)
var arr1=["松松”、“六月的雨”、“毛毛”)
函数num (n, m) {//封装随机数
返回Math.round (math . random () * (mn) + n)
}
$ (" .btn1 ") .click(函数(){//创建按钮点击事件
李var=$ (“& lt; li> & lt;/li>”)//创建一个李标签
var一=$ (“& lt; img src=" alt="/祝辞”)//创建一个img标签
var h5=$ (“& lt; h5> & lt;/h5>”)//创建一个h5标签
var p=$ (" & lt; p> & lt;/p>”)//创建一个p标签
var val=bb.value;//获取文本域的值
p.html (val);//把文本域的值赋给p标签
美元(p) .addClass(“购买力平价”)//给p标签加一个css样式
(李).addClass美元(“项目”)//给李加一个css样式
li.appendTo (ul)//把李插入到ul内
bb.valuehttps://www.yisu.com/zixun/=?//清空文本域内容
var arr2=num (0, arr.length-1)//提取随机数
$ (h5) .addClass(“页”)//给h5添加css样式
h5.html (arr1 [arr2])//给h5赋值
$(一).attr ({“src”:加勒比海盗[arr2] + . jpg "})//给img添加属性和属性值
(一).addClass美元(“图像”)//给img添加一个css样式
p.appendTo(李)//将p标签插入内
h5.prependTo(李)//将h5标签插入内
imgs.prependTo(李)//将img标签插入内
(“.box”) .scrollTop美元($ (“.box”) [0] .scrollHeight);//让滚动条始终在最底端
}）
}）
& lt;/script>
& lt;/html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
