php对话框制作,js制作一个简单的对话框教程

这篇文章主要为大家详细介绍了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
• 哈哈

发送