jQuery實現簡易QQ聊天框
阿新 • • 發佈:2020-02-10
本文例項為大家分享了jQuery實現簡易QQ聊天框的具體程式碼,供大家參考,具體內容如下
<!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="jQuery實現簡易QQ聊天框"> <textarea name="" id="bb" cols="30" rows="10"></textarea> <button class="btn">關閉(c)</button> <button class="btn1">傳送(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){ //封裝隨機數 return Math.round(Math.random()*(m-n)+n) } $(".btn1").click(function(){ //建立按鈕點選事件 var li = $("<li></li>") //建立一個li標籤 var imgs = $("<img src='' alt="jQuery實現簡易QQ聊天框"/>") //建立一個img標籤 var h4 = $("<h4></h4>") //建立一個h4標籤 var p = $("<p></p>") //建立一個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) //提取隨機數 $(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內 h4.prependTo(li) //將h4標籤插入li內 imgs.prependTo(li) //將img標籤插入li內 $(".box").scrollTop($(".box")[0].scrollHeight); //讓滾動條始終在最底端 }) }) </script> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。