php对话框制作,js制作一个简单的对话框教程 -凯发k8官方网

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

发送

总结

以上是凯发k8官方网为你收集整理的php对话框制作,js制作一个简单的对话框教程的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。