本文实例为大家分享了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"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"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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年09月24日
2024年09月24日
- 国风大师纯音系列《古筝仙子 常静演奏 十指弹一》1CD[FLAC][919MB]
- DasKapital-OneMustHaveChaosInsidetoGiveBirthtoaDancingStar(2024)[24-44.1]WAV
- 王菲.1999-《只爱陌生人》日本东芝版[低速原抓WAV+CUE]
- 张小英1987-金奖金曲第一集[新加坡版][WAV+CUE]
- 鹿晗.2015-重启【海蝶】【FLAC分轨】
- 张芸京.2012-小女孩【金牌大风】【WAV+CUE】
- 余天.2002-雄狮魅力金曲2CD(南方金点系列)【南方】【WAV+CUE】
- 银霞.1982-《结·SAYYESMYBOY》台湾复刻版[WAV+CUE]
- 梁汉文1993-火热动感[引进版][WAV+CUE]
- 梁汉文2008-EDMONDHITS48[香港]3CD[WAV+CUE]
- 国风大师纯音系列《童丽-[渭城曲]》1CD[WAV分轨][593.5MB]
- 国风大师纯音系列《许菱子《烧筝2》古筝曲集》1CD[WAV分轨][1.3GB]
- 王子异《1996 Part.2》[320K/MP3][18.29MB]
- 群星.1994-宝丽金最倾情3CD【宝丽金】【WAV+CUE】
- 乐俊亨.2024-同泪【CharioticMusic】【FLAC分轨】