jQuery實現(xiàn)簡單QQ聊天框
本文實例為大家分享了jQuery實現(xiàn)簡單QQ聊天框的具體代碼,供大家參考,具體內(nèi)容如下
先放一張效果圖!
1.首先我們把基本框架搭出來,還要準備三張圖片用來當(dāng)作頭像,下面是html的內(nèi)容
<body> <section id="chat"> <div class="chatBody"></div> <div> <img src="images/icon.jpg"> </div> <textarea class="chatText"></textarea> <div class="btn"> <span>關(guān)閉(C)</span> <span id="send">發(fā)送(S)</span> </div> </section> </body>
2.頭部引入jQuery,我用的版本是3.5.1的
<script src="js/jquery-3.5.1.js"></script>
3.先寫一個事件加載函數(shù),網(wǎng)頁加載完成后執(zhí)行此函數(shù)
$(funtion () { })
4.分別用一個數(shù)組來保存頭像圖片的路徑和網(wǎng)友昵稱
$(funtion () { let pic = ['images/head01.jpg', 'images/head02.jpg', 'images/head03.jpg']; let name = ['chen', 'liu', 'feng']; })
5.給發(fā)送按鈕添加一個點擊事件,核心在這里
$(function () { let pic = ['images/head01.jpg', 'images/head02.jpg', 'images/head03.jpg']; let name = ['chen', 'liu', 'feng']; $('#send').click(function () { let num = Math.floor((Math.random()*3)); // 隨機獲取一個0到2的整數(shù),用作數(shù)組下標,從而使頭像和昵稱隨機顯示 let text = $('.chatText').val(); // 獲取輸入框的文本內(nèi)容,并賦值給text if (text.length > 0) { // 文本內(nèi)容的長度大于0就執(zhí)行里面的函數(shù) $('.chatBody').append( // 在div里面追加內(nèi)容 `<div class="item"> <img src="${pic[num]}" alt="頭像"> // 顯示頭像 <span>${name[num]}</span> // 顯示昵稱 <div>${text}</div> // 顯示文本內(nèi)容 </div>` ); } $('.chatText').val(''); // 獲取完輸入框的內(nèi)容后清空輸入框 }) })
css樣式就看自己喜好調(diào)啦!
他的實現(xiàn)邏輯很簡單,點擊事件獲取輸入框內(nèi)容,然后用append()方法將模板字符串追加到容器里面,最后清空輸入框,頭像和昵稱用隨機數(shù)生成配合數(shù)組就可以搞定!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery動態(tài)生成不規(guī)則表格(前后端)
這篇文章主要介紹了jQuery動態(tài)生成不規(guī)則表格的實現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-02-02jquery 關(guān)于event.target使用的幾點說明介紹
本篇文章介紹了,jquery中關(guān)于event.target使用的幾點說明。需要的朋友參考下2013-04-04使用jQuery.wechat構(gòu)建微信WEB應(yīng)用
本期要講的就是我痛苦中掙扎徘徊后寫的jQuery.wechat,一個提供了統(tǒng)一API的、基于jQuery.promise的jQuery.plugin。希望能多少幫助到大家。2014-10-10利用JQuery和Servlet實現(xiàn)跨域提交請求示例分享
這篇文章主要介紹了利用JQuery和Servlet實現(xiàn)跨域提交請求示例,需要的朋友可以參考下2014-02-02JQuery和PHP結(jié)合實現(xiàn)動態(tài)進度條上傳顯示
本文給大家介紹JQuery和PHP結(jié)合實現(xiàn)動態(tài)進度條上傳顯示功能,本文分步驟給大家介紹的非常詳細,感興趣的朋友一起看看吧2016-11-11jQuery實現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單效果,以完整實例形式分析了jQuery響應(yīng)鼠標事件實現(xiàn)針對頁面元素的遍歷及樣式的動態(tài)操作技巧,需要的朋友可以參考下2015-09-09