這篇文章主要為大家詳細介紹了js實現簡易聊天對話框，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現簡易聊天對話框的具體代碼，供大家參考，具體內容如下

聊天對話框

*{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;

}

window.οnlοad=function(){

var input = document.getElementById('msg_input');//查找緩存

document.getElementById('sendbtn').οnclick=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 p = document.createElement('p');

p.style = 'clear:both';

ul.appendChild(p);

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 p = document.createElement('p');

p.style = 'clear:both';

ul.appendChild(p);

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);//

}

}

• hello?
• hello
• hi
• hehe
• goodbye
• 。。。。
• sdfasdsadfd fasd fasd fasdfasdfasdf
• 哈哈

發送

總結

以上是生活随笔為你收集整理的php对话框制作,js制作一个简单的对话框教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。