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字典探测用户名工具
Oct 05 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
AngularJS 教程及实例代码
2017/10/23 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
python程序控制NAO机器人行走
2019/04/29 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
python 实现逻辑回归
2020/12/30 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
庆元旦迎新年广播稿
2014/02/18 职场文书
绿色城市实施方案
2014/03/19 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
《植树问题》教学反思
2016/03/03 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang