本文實例為大家分享了js實現簡易聊天對話框的具體代碼，供大家參考，具體內容如下
<!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(); } //快捷鍵 發送 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']; //打開與服務器的連接 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); // 發送請求 //console.log(res); //回調函數 xhr.onreadystatechange = function () {// console.log(xhr.readyState) if(xhr.readyState == 4){ //數據接收完畢 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">發送</button> </div></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
