您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)jQuery如何實(shí)現(xiàn)聊天對(duì)話框,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
效果圖:左下角選擇對(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>
jquery是一個(gè)簡(jiǎn)潔而快速的JavaScript庫,它具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器,并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件,是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫,能夠用于簡(jiǎn)化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫,以便快速開發(fā)網(wǎng)站。
關(guān)于“jQuery如何實(shí)現(xiàn)聊天對(duì)話框”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。