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

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

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

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

當(dāng)前文章：jQuery實(shí)現(xiàn)簡(jiǎn)易QQ聊天框-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://chinadenli.net/article44/dgpjee.html

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

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

猜你還喜歡下面的內(nèi)容

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

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