jQuery實現(xiàn)簡易QQ聊天框-創(chuàng)新互聯(lián)

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

“真誠服務，讓網(wǎng)絡創(chuàng)造價值”是我們的服務理念，創(chuàng)新互聯(lián)公司團隊十年如一日始終堅持在網(wǎng)站建設領域,為客戶提供優(yōu)質服。不管你處于什么行業(yè)，助你輕松跨入“互聯(lián)網(wǎng)+”時代，PC網(wǎng)站+手機網(wǎng)站+公眾號+小程序設計。

<!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 h5 = $("<h5></h5>")
 //創(chuàng)建一個h5標簽
 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內
 bb.value = "";
 //清空文本域內容
 var arr2 = num(0,arr.length-1)
 //提取隨機數(shù)
 $(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實現(xiàn)簡易QQ聊天框-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://chinadenli.net/article44/dgpjee.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、外貿建站、靜態(tài)網(wǎng)站、品牌網(wǎng)站建設、網(wǎng)站建設、App設計

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

jQuery實現(xiàn)簡易QQ聊天框-創(chuàng)新互聯(lián)