js實現(xiàn)簡易聊天對話框
更新時間:2017年08月17日 11:47:30 作者:涼介v7
這篇文章主要為大家詳細介紹了js實現(xiàn)簡易聊天對話框,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)簡易聊天對話框的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>聊天對話框</title> <style type="text/css"> *{font-size: 14px; padding:0; margin:0;} .main{ position: relative; margin: 20px auto; border: 1px solid steelblue; width: 430px; height: 400px; } .msgInput{ display: block; width: 406px; height: 60px; margin: 10px auto; } .sendbtn{ position: absolute; width: 100px; height: 29px; bottom: 5px; right: 10px; } .content{ list-style: none; width: 410px; height: 280px; margin: 5px auto; border: 1px dotted #D1D3D6; overflow-y: scroll; } .msgContent{ width:auto; max-width: 250px; height: auto; word-break: break-all; margin: 5px; padding: 3px; border-radius: 5px; } .content .left{ float: left; text-align: left; background-color: lightgrey; } .content .right{ float: right; text-align: right; background-color: yellowgreen; } </style> <script type="text/javascript"> window.onload=function(){ var input = document.getElementById('msg_input');//查找緩存 document.getElementById('sendbtn').onclick=function () { //var input1 = document.getElementById('msg_input');// //input0 sendMsg(); } //快捷鍵 發(fā)送 document.onkeypress = function (event) { var e = event || window.event; var keycode = e.keyCode || e.which; console.log(e) if( keycode==10){//判斷同時按下ctrl 和enter sendMsg() } } function sendMsg() { var input = document.getElementById('msg_input');//查找緩存 var ul = document.getElementById('content'); var newLi = document.createElement('li'); newLi.innerHTML = input.value; newLi.className = 'msgContent right'; ul.appendChild(newLi); var div = document.createElement('div'); div.style = 'clear:both'; ul.appendChild(div); ajax({ url:'http://jisuznwd.market.alicloudapi.com/iqa/query?question='+input.value, success:function (res) { // console.log(res) var obj = JSON.parse(res); console.log(obj) var array = obj.result.content; // var zhengzhou = array[0]; var tmp = array; // var tmp = '溫度:'+zhengzhou.day_air_temperature+','+zhengzhou.day_weather; console.log(tmp) var newLi = document.createElement('li'); newLi.innerHTML = tmp; newLi.className = 'msgContent left'; ul.appendChild(newLi); var div = document.createElement('div'); div.style = 'clear:both'; ul.appendChild(div); input.value = ''; newLi.scrollIntoView();//將元素滾動到可見位置 } }) input.value = ''; newLi.scrollIntoView();//將元素滾動到可見位置 } } function ajax(obj) { //?lastCursor=6610&pageSize=10 // var url = 'reg.php'; var xhr = null; if(window.ActiveXObject){ xhr = new ActiveXObject('Microsoft.XMLHTTP') }else{ xhr = new XMLHttpRequest(); } // $username = $_REQUEST['username']; // $password = $_REQUEST['password']; //打開與服務(wù)器的連接 if(obj.method){ xhr.open(obj.method,obj.url,true); }else{ xhr.open('get',obj.url,true); } xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.setRequestHeader("Authorization","APPCODE 3e9dfb924f464e9593a95f9d2bbf4348") // {username:'zhangsa',password:123123} // sendData = encodeURIComponent(sendData); // 發(fā)送請求 //console.log(res); //回調(diào)函數(shù) xhr.onreadystatechange = function () { // console.log(xhr.readyState) if(xhr.readyState == 4){ //數(shù)據(jù)接收完畢 if(xhr.status == 200){ // console.log('請求成功',xhr.responseText) if(obj.success){ obj.success(xhr.responseText) } }else{ // console.log(xhr.status,'請求出錯') if(obj.failure){ obj.failure('請求失敗') } } } } // var sendData = 'username=zhangsan&password=123456'; if( obj.method == undefined ||obj.method.toLowerCase() =='get'){ xhr.send(null);// }else{ xhr.send(obj.params);// } } </script> </head> <body> <div id="main" class="main"> <ul id="content" class="content"> <li class="msgContent left">hello?</li> <div style="clear:both"></div> <li class="msgContent left">hello</li> <div style="clear:both"></div> <li class="msgContent right">hi</li> <div style="clear:both"></div> <li class="msgContent left">hehe</li> <div style="clear:both"></div> <li class="msgContent left">goodbye</li> <div style="clear:both"></div> <li class="msgContent right">。。。。</li> <div style="clear:both"></div> <li class="msgContent right">sdfasdsadfd fasd fasd fasdfasdfasdf</li> <div style="clear:both"></div> <li class="msgContent right"> 哈哈</li> <div style="clear:both"></div> </ul> <textarea id="msg_input" class="msgInput"></textarea> <button id="sendbtn" class="sendbtn">發(fā)送</button> </div> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- javascript和jQuery實現(xiàn)網(wǎng)頁實時聊天的ajax長輪詢
- nodejs實現(xiàn)的一個簡單聊天室功能分享
- 使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
- nw.js實現(xiàn)類似微信的聊天軟件
- Vue.js仿微信聊天窗口展示組件功能
- JavaScript/jQuery、HTML、CSS 構(gòu)建 Web IM 遠程及時聊天通信程序
- js編寫簡單的聊天室功能
- nodejs基于WS模塊實現(xiàn)WebSocket聊天功能的方法
- AngularJS+Node.js實現(xiàn)在線聊天室
- JavaScript實現(xiàn)簡易QQ聊天界面
相關(guān)文章
比較詳細的javascript DOM 學(xué)習(xí)筆記
看了很多的js dom學(xué)習(xí)資料,發(fā)現(xiàn)這個比較詳細,特轉(zhuǎn)載給大家學(xué)習(xí)一下2008-06-06JavaScript創(chuàng)建類/對象的幾種方式概述及實例
JS中的對象強調(diào)的是一種復(fù)合類型,JS中創(chuàng)建對象及對對象的訪問是極其靈活的,下面與大家分享下創(chuàng)建類/對象的幾種方式,感興趣的朋友可以了解下哈2013-05-05js使用navigator.userAgent判斷當前瀏覽器所處的環(huán)境
本文主要介紹了js使用navigator.userAgent判斷當前瀏覽器所處的環(huán)境,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04JavaScript中Array實例方法filter的實現(xiàn)原理
filter() 方法創(chuàng)建一個新數(shù)組,其中包含通過所提供函數(shù)實現(xiàn)的測試的所有元素,本文將給大家介紹JavaScript中Array實例方法filter的實現(xiàn)原理,文中通過代碼示例講解的非常詳細,需要的朋友可以參考下2024-03-03