布局样式
<style type="text/css">
//全局样式
*{
margin:0;padding:0;
list-style: none;
}
//外层最大盒子样式
.da{
width:573px;
height:550px;
border:1px solid #000;
margin:0 auto;
}
//ul样式
.items{
width:573px;
height:300px;
overflow:auto;
}
//文本域样式
#wby{
width:572px;
height:150px;
border:none;
}
按钮样式
#dj,#dj1{
width:50px;
background:skyblue;
outline-style: none;
height:30px;
}
#dj{margin-left:400px;}
//给头像追加的样式addclass
.tu{width:50px;margin:5px;}
//给qq名称追加的样式
.ys1{width:400px;color:blue;margin-left:70px;margin-top:-60px;}
//给聊天内容追加的样式
.ys2{width:490px;background:#ccc;padding:5px;margin-left:70px;}
给ul中添加的每一个li追加的样式
.ys3{margin-bottom:15px;}
</style>
</head>
<body>
//布局
<div class="da">
//ul为聊天页面,存储聊天头像,qq名称,内容
<ul class="items"></ul>
<img src="image/q1捕获.PNG" alt="" />
//文本域用来输入聊天内容
<textarea name="" id="wby" cols="30" rows="10"></textarea>
<button id="dj">关闭(c)</button>
<button id="dj1">发送(s)</button>
</div>
</body>
//jquery部分
<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
<script type="text/javascript">
//声明一个数组存放qq名称,随机取用
var arr=["帅帅","亨利","丁旭"];
//声明头像的序号,随机取用
var arr1=[2,3,4];
//m到n之间随机数的封装函数
function num(m,n){
return Math.round(Math.random()*(n-m)+m);
}
//为页面加载绑定方法
$(function(){
//找到ul节点以类名方式
var ul=$(".items");
//为发送按钮添加点击事件
$(dj1).click(function(){
//判断文本域内容是否为空,如果为空则提示输入内容,并且不能执行下一步
if(wby.value==""){
alert("请输入");
return;
}
//创建一个li标签,
var li=$("<li></li>");
//创建一个img标签
var imgs=$("<img src='' alt=''>");
//创建一个标题标签
var h3=$("<h3></h3>");
//创建一个p标签
var p=$("<p></p>")
//声明val为文本域的值
var val=wby.value
//设置p的内容为文本域的输入内容
p.html(val);
//给p添加上边设好的样式ys2
p.addClass("ys2")
将p添加到li中
p.appendTo(li);
//给文本域一个空值,可以再次输入新的内容
wby.value="";
//声明sum为随机数,范围为0到数组长度
var sum=num(0,arr.length-1);
//h3为随机的名字
h3.html(arr[sum]);
//为h3追加样式ys1
h3.addClass("ys1")
//设置图片的路径,随机图片作为头像
imgs.attr({"src":"image/"+arr1[sum]+".jpg"});
//给图片添加样式tu
imgs.addClass("tu")
//h3前置添加到li中
h3.prependTo(li);
//img前置添加到li中
imgs.prependTo(li);
//li追加样式ys3
li.addClass("ys3")
//li添加到ul中
li.appendTo(ul)
})
})
</script>
</html>