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