jQuery實現(xiàn)簡易QQ聊天框

更新時間：2020年02月10日 08:14:43 作者：周楚雄

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡易QQ聊天框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery實現(xiàn)簡易QQ聊天框的具體代碼，供大家參考，具體內(nèi)容如下

<!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">發(fā)送(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){
 //封裝隨機數(shù)
 return Math.round(Math.random()*(m-n)+n)
 }
 $(".btn1").click(function(){
 //創(chuàng)建按鈕點擊事件
 var li = $("<li></li>") 
 //創(chuàng)建一個li標簽
 var imgs = $("<img src='' alt=''/>")
 //創(chuàng)建一個img標簽
 var h4 = $("<h4></h4>")
 //創(chuàng)建一個h4標簽
 var p = $("<p></p>")
 //創(chuàng)建一個p標簽
 var val = bb.value;
 //獲取文本域的值
 p.html(val);
 //把文本域的值賦給p標簽
 $(p).addClass("ppp")
 //給p標簽加一個css樣式
 $(li).addClass("item")
 //給li加一個css樣式
 li.appendTo(ul)
 //把li插入到ul內(nèi)
 bb.value = "";
 //清空文本域內(nèi)容
 var arr2 = num(0,arr.length-1)
 //提取隨機數(shù)
 $(h4).addClass("pp")
 //給h4添加css樣式
 h4.html(arr1[arr2])
 //給h4賦值
 $(imgs).attr({"src":arr[arr2]+".jpg"})
 //給img添加屬性和屬性值
 $(imgs).addClass("image")
 //給img添加一個css樣式
 p.appendTo(li)
 //將p標簽插入li內(nèi)
 h4.prependTo(li)
 //將h4標簽插入li內(nèi)
 imgs.prependTo(li)
 //將img標簽插入li內(nèi)
 $(".box").scrollTop($(".box")[0].scrollHeight);
 //讓滾動條始終在最底端
 })
})
</script>
</html>