js实现聊天对话框


Posted in Javascript onFebruary 08, 2020

本文实例为大家分享了js实现聊天对话框的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 .box{
 width:300px;
 height:400px;
 border:1px solid blue;
 margin:0 auto;
 }
 .inTer{
 width:280px;
 height:280px;
 border:1px solid deeppink;
 margin:0 auto;
 margin-top:10px;
 overflow-y:auto;
 }
 textarea{
 display:block;
 width: 276px;
 height:65px;
 margin:0 auto;
 margin-top:5px;
 }
 #btn{
 display:block;
 float:right;
 margin-right:10px;
 margin-top:5px;
 }
 p{
 display:inline-block;
 border-radius:5px;
 background:#dcdcdc;
 font-size:12px;
 padding:5px 5px;
 margin:5px 0;
 margin-left:5px;
 max-width:140px;
 word-wrap: break-word;
 }
 </style>
 </head>
 <body>
 <div class="box">
 <div class="inTer" id="father">
 <p>你好</p ></br>
 <p>你好</p ></br>
 <p>你好</p ></br>
 <p>heiheiheiheiehieheieheieheieheiheiehe</p ></br>
 </div>
 <textarea style="resize: none;" id="txt">
 </textarea>
 <input type="button" id="btn" value="发送" />
 </div>
 </body>
</html>
<script>
 var btn = document.getElementById("btn");
 var txt = document.getElementById("txt");
 var father = document.getElementById("father")
 var p = document.getElementsByTagName("p");
 btn.onclick=function(){
 if(txt.value==""){
 alert("请勿发送空内容");
 }
 else{
 var son = document.createElement("p");
 son.style.backgroundColor="yellowgreen";
 son.style.clear="both";
 son.style.float="right";
 son.style.marginRight="5px";
 son.innerText=txt.value;
 father.appendChild(son);
 txt.value="";
 son.scrollIntoView();
 }
 
 }
 document.onkeydown=function(evt){
 var e = evt || event;
 e.keyCode=e.which=e.charCode;
 if(e.keyCode==13 || e.keyCode==10){
 if(txt.value==""){
 alert("请勿发送空内容");
 }
 else{
 var son = document.createElement("p");
 son.style.backgroundColor="yellowgreen";
 son.style.clear="both";
 son.style.float="right";
 son.style.marginRight="5px";
 son.innerText=txt.value;
 father.appendChild(son);
 txt.value="";
 son.scrollIntoView();
 }
 }
 }
 </script>

js实现聊天对话框

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态生成私有变量访问器
Dec 06 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
jQuery实现聊天对话框
Feb 08 #jQuery
jquery实现聊天机器人
Feb 08 #jQuery
js实现踩五彩块游戏
Feb 08 #Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 #Javascript
JS实现简易留言板增删功能
Feb 08 #Javascript
原生JS实现留言板功能
Feb 08 #Javascript
javascript实现留言板功能
Feb 08 #Javascript
You might like
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
php中的动态调用实例分析
2015/01/07 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
document.compatMode介绍
2009/05/21 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
Python实现自动上京东抢手机
2018/02/06 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
python opencv实现简易画图板
2020/08/27 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
通用C#笔试题附答案
2016/11/26 面试题
物业管理毕业生个人的求职信
2013/11/30 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
机关搬迁方案
2014/05/18 职场文书
企业安全生产承诺书
2014/05/22 职场文书
学雷锋日活动总结
2015/02/06 职场文书
离婚案件上诉状
2015/05/23 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers