酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

【云小站】新老客都返现+现金红包+瓜分60万奖池
酷站

js

旗下栏目: php js asp Flex Ajax JSP jquery asp.net C语言 java 正则表达式 微信小程序 Android IOS

js实现聊天对话框的代码

来源:互联网搜集 作者:秩名 人气: 发布时间:2020-02-08
本篇文章主要介绍了js实现聊天对话框的代码,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

代码如下:

<!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>

效果图如下:


版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://blog.csdn.net/h5_since/article/details/89944616

相关文章

  • AjaxFileUpload.js实现异步上传文件功能代码

    AjaxFileUpload.js实现异步上传文件功能代码

    做软工作业时,需要实现无刷新异步上传图片到服务器,于是想利用Ajax: 得到file的val,再post过去 等真正实现的时候才发现,根本行不通。 于是翻来翻去找到一个封装好的js插件,可以实现异步上传文件。 AjaxFileUpload 这个插件的原理是......
    02-20
  • Javascript原生ajax请求代码

    Javascript原生ajax请求代码

    代码如下: class Ajax{ constructor(url, method, data, callback_suc, callback_err, callback_run){ this.RT = true;//默认为异步请求 this.url = url; this.method = method || POST; this.data = data || ; this.callback_suc = cal......
    02-20
  • 基于js判断浏览器版本

    基于js判断浏览器版本

    浏览器类型判断 不考虑对 IE9 以下浏览器的判断 function getBrowserType(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var browser=unknown; if (userAgent.indexOf(IE)!=-1) { browser=IE; }else if(userAg......
    02-20
  • js实现分页导航效果的代码

    js实现分页导航效果的代码

    前言 最近的项目需要添加一个分页导航的功能,没有用网上封装好的文件。通过JS自己简单实现了效果。下面和大家分享一下。 内容 下图为首次加载后的效果,默认显示5页, 当点击下一页时将选中页面的页码置于中间 下面让我们来看看实现的代......
    02-19
  • Javascript实现html转pdf高清版(提高分辨率)

    Javascript实现html转pdf高清版(提高分辨率)

    网上一些关于js实现html转pdf的文章大部分最终转成的PDF都不够清晰,今天为大家介绍如何提高js实现html转pdf的清晰度 引入js文件 https://cdn.bootcss.com/jquery/3.4.1/jquery.js https://cdn.bootcss.com/jspdf/1.5.3/jspdf.min.js htt......
    02-19
  • 详解JavaScript中的惰性载入函数及优势

    详解JavaScript中的惰性载入函数及优势

    定义 惰性载入函数表示函数执行的分支仅会发生一次,有两种实现惰性载入函数的方式,第一种是在函数被调用时再处理,在第一次调用中,该函数会覆盖为另外一个按合适方式执行的函数,这样任何对函数的调用都不用再经过执行的分支了。第二......
    02-18
  • js表达式与运算符简单操作教程

    js表达式与运算符简单操作教程

    代码如下: /*** Created by Administrator on 2017/12/14.* 表达式与运算符*///1.基本表达式 加减乘除var a = 4;a = 7/6;var b = (a + 4)/2;console.log(a);console.log(b);console.log(==========);//end//2.比较运算符 == != = =conso......
    02-15
  • JS实现简易计算器代码

    JS实现简易计算器代码

    用JS实现简易计算器,供大家参考,具体内容如下: 首先创建结构和样式 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 titleDocument/title style body{ margin:0......
    02-14
  • JavaScript实现拖拽的代码

    JavaScript实现拖拽的代码

    盒子拖拽运用到的有onmousedown事件,onmousemove事件以及onmouseup事件 1、当鼠标点击下去的时候我们需要获取鼠标所在位置的横纵坐标,然后获取盒子的离页面的横纵方向的距离 2、计算出鼠标相对盒子的距离 3、当鼠标移动的时候,获取鼠......
    02-12
  • JavaScript canvas仿流瀑布效果

    JavaScript canvas仿流瀑布效果

    效果图如下: 在js部分写canvas代码,有详细注释 html部分: 一个canvas元素: canvas id=canvas /canvas css部分: style *{ padding: 0; margin: 0; } canvas{ background-color: #111; } body{ overflow: hidden; }/style script var ......
    02-10

最新更新