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 相关文章推荐
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
Vue 实现拨打电话操作
Nov 16 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 无限级缓存的类的扩展
2009/03/16 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
python微信公众号开发简单流程
2018/03/23 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
美国性感女装网站:bebe
2017/03/04 全球购物
考博自荐信
2013/10/25 职场文书
童装店创业计划书
2014/01/09 职场文书
小学运动会入场口号
2015/12/24 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers