jQuery實(shí)現(xiàn)聊天對(duì)話框
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)聊天對(duì)話框的具體代碼,供大家參考,具體內(nèi)容如下
效果圖:左下角選擇對(duì)話的角色,在對(duì)話框輸入消息點(diǎn)擊發(fā)送按鈕,消息顯示在上面界面當(dāng)中,然后對(duì)話框內(nèi)容被清空。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> .talk_con { width: 600px; height: 500px; border: 1px solid #666; margin: 50px auto 0; background: #f9f9f9; } .talk_show { width: 580px; height: 420px; border: 1px solid #666; background: #fff; margin: 10px auto 0; overflow: auto; } .talk_input { width: 580px; margin: 10px auto 0; } .whotalk { width: 80px; height: 30px; float: left; outline: none; } .talk_word { width: 420px; height: 26px; padding: 0px; float: left; margin-left: 10px; outline: none; text-indent: 10px; } .talk_sub { width: 56px; height: 30px; float: left; margin-left: 10px; } .atalk { margin: 10px; } .atalk span { display: inline-block; background: #0181cc; border-radius: 10px; color: #fff; padding: 5px 10px; } .btalk { margin: 10px; text-align: right; } .btalk span { display: inline-block; background: #ef8201; border-radius: 10px; color: #fff; padding: 5px 10px; } </style> <script src='../js/jquery-1.12.4.js'></script> <script> $(function(){ $('#talksub').click(function(){ //發(fā)送單擊,獲取用戶輸入的數(shù)據(jù)value屬性值 var vals=$('#talkwords').val() //如果輸入的數(shù)據(jù)為空,則彈窗提示 if (vals=='') { alert('請(qǐng)輸入數(shù)據(jù)!') return } //條件下拉列表中的value值是0還是1 var whovals=$('#who').val() var str="" //選擇A發(fā)送還是B發(fā)送 if (whovals==0){ str='<div class="atalk"><span>A:'+ vals+'</span></div>' } else{ str='<div class="btalk"><span>B:'+ vals+'</span></div>' } //原有的內(nèi)容+str,否則會(huì)覆蓋掉原有內(nèi)容 $('#words').html($('#words').html()+str) //發(fā)送完數(shù)據(jù)后清空輸入框 $('#talkwords').val('') }) }) </script> </head> <body> <div class="talk_con"> <div class="talk_show" id="words"> <div class="atalk"><span>A:你還好嗎?</span></div> <div class="btalk"><span>B:嗯,你呢?</span></div> </div> <div class="talk_input"> <select class="whotalk" id="who"> <option value="0">A:</option> <option value="1">B:</option> </select> <input type="text" class="talk_word" id="talkwords"> <input type="button" value="發(fā)送" class="talk_sub" id="talksub"> </div> </div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery添加div實(shí)現(xiàn)消息聊天框
- jquery實(shí)現(xiàn)聊天機(jī)器人
- JS(jQuery)實(shí)現(xiàn)聊天接收到消息語言自動(dòng)提醒功能詳解【提示“您有新的消息請(qǐng)注意查收”】
- jquery仿微信聊天界面
- 基于jQuery實(shí)現(xiàn)簡(jiǎn)單人工智能聊天室
- 使用jQuery調(diào)用XML實(shí)現(xiàn)無刷新即時(shí)聊天
- javascript和jQuery實(shí)現(xiàn)網(wǎng)頁實(shí)時(shí)聊天的ajax長(zhǎng)輪詢
- PHP+jquery+ajax實(shí)現(xiàn)即時(shí)聊天功能實(shí)例
- JavaScript/jQuery、HTML、CSS 構(gòu)建 Web IM 遠(yuǎn)程及時(shí)聊天通信程序
- jQuery實(shí)現(xiàn)簡(jiǎn)易聊天框
相關(guān)文章
jQuery技巧大放送 學(xué)習(xí)jquery的朋友可以看下
jQuery技巧大放送 學(xué)習(xí)jquery的朋友可以看下,非常不錯(cuò)的整理,推薦。2009-10-10jQuery實(shí)現(xiàn)的簡(jiǎn)單懸浮層功能完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單懸浮層功能,結(jié)合完整實(shí)例形式分析了jQuery基于時(shí)間函數(shù)動(dòng)態(tài)修改css樣式實(shí)現(xiàn)窗口浮動(dòng)效果的相關(guān)技巧,需要的朋友可以參考下2017-01-01Boostrap實(shí)現(xiàn)的登錄界面實(shí)例代碼
Bootstrap它是一個(gè)開源的web開發(fā)前端框架。本界面使用的Bootstrap是v3.3.5版本。這篇文章給大家?guī)砹嗽敿?xì)的實(shí)現(xiàn)代碼,非常不錯(cuò),感興趣的朋友一起看看吧2016-10-10jquery選擇器、屬性設(shè)置用法經(jīng)驗(yàn)總結(jié)
最近做項(xiàng)目用到了jquery。在做的過程中走了很多彎路,不停的搜索。總結(jié)出了一些jquery選擇器、屬性設(shè)置用法,供大家參考2013-09-09jQuery的實(shí)現(xiàn)原理的模擬代碼 -4 重要的擴(kuò)展函數(shù) extend
在上兩篇文章中,我們看到每次要通過 jQuery 的原型增加共享方法的時(shí)候,都需要通過 jQuery.fn 一個(gè)個(gè)進(jìn)行擴(kuò)展,非常麻煩.2010-08-08jQuery實(shí)現(xiàn)MSN中文網(wǎng)滑動(dòng)Tab菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)MSN中文網(wǎng)滑動(dòng)Tab菜單效果代碼,基于jQuery鼠標(biāo)事件實(shí)現(xiàn)頁面元素屬性動(dòng)態(tài)切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09jQuery中操控hidden、disable等無值屬性的方法
在實(shí)現(xiàn)一些表單提交頁面時(shí)會(huì)放置若干隱藏屬性,下面為大家介紹下jQuery中如何操控hidden、disable等無值屬性,感興趣的朋友不要錯(cuò)過2014-01-01