JavaScript实现QQ聊天消息展示和评论提交功能

2024-04-10 07:02:36

QQ聊天消息显示，提交评论等实现原理，具体内容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>

  <style type="text/css">
   * {
    margin: 0;
    padding: 0;
   }

   .bos {
    margin: 100px auto;
    width: 350px;
    position: relative;
   }

   .bos a {
    float: right;
   }

   button {
    position: relative;
    left: 301px;
    bottom: 0;
   }

   textarea {
    width: 350px;
    resize: none;
   }

   ul li {
    list-style: none;
   }
  </style>

  <script type="text/javascript">
   window.onload = function() {
    var txt = document.getElementById('txt');
    var btn = document.getElementsByTagName('button')[0];
    var oUl = document.getElementsByTagName('ul')[0];

    btn.onclick = function() {
     if(txt.value == '') {
      alert('请输入...');
      return false; //结束事件*******
     }

     var newli = document.createElement('li');  //创建标签<li></li>
     newli.innerHTML = txt.value + '<a href = "#">删除<a>';

     //oUl.appendChild(newli);  //将创建标签<li></li>加到最后面

     var lis = oUl.childNodes; //oUl.children
     oUl.insertBefore(newli, lis[0]);  //将创建标签<li></li>加到最前面
     txt.value = '';

     //删除发出去的消息
     var oA = document.getElementsByTagName('a');
     for(var i = 0; i < oA.length; i++) {
      oA[i].onclick = function() {
       oUl.removeChild(this.parentNode);
      }
     }
    }
   }
  </script>

 </head>

 <body>
  <div id="box" class="bos">
   <textarea name="" id="txt" cols="30" rows="10"></textarea>
   <button>submit</button>
   <ul></ul>
  </div>
 </body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaScript评论点赞功能的实现方法

通过分析评论功能的逻辑关系,学会如何使用JavaScript实现评论.回复.点赞等各种功能 1.学会JavaScript处理日期和时间. 2.掌握Dom操作中的添加/删除子节点方法. 3.使用setTimeout设置定时器. 4.使用clearTimeout清除定时器以及事件代理的运用. 效果图: 1)实现删除分享内容功能利用事件代理实现点击关闭按钮删除分享内容. 删除事件: 利用事件代理功能,在父元素节点上添加事件,以减少代码量和系统运行负荷. 事件代理的时候,使用事件对象中的srcElem
JavaScript实现简单评论功能

本文实例为大家分享了JavaScript实现简单评论功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ /*background-image: url(../img/91R58PIC3n2_1024
原生js实现回复评论功能

实现原理功能1.删除状态用removeChild()方法即可功能2.最上面的点赞判断文字的内容是否为赞,做相应操作改变存放赞数量的容器文本内容功能3.回复评论创建一个新的评论添加到评论列表里功能4.回复里的点赞判断我是否点了赞,做相应操作功能5.回复或者删除判断字符串回复还是删除,做相应操作代码用了事件代理,还有三元运算判断,减少代码量每行代码都有详细的注释一眼看到那么多的代码不要烦躁其实你要把每个功能单独去看都是很简单的dom操作一点点消化,读懂每一行代码完整代
Vue.js实现文章评论和回复评论功能

本来想把这个页面用jade渲染出来.评论部分用vue,但是想了想觉得麻烦,最后还是整个用vue的组件搞定他吧. 先上在线demo:http://jsbin.com/ceqifo/1/edit?js,output 再上效果图可直接评论,点击别人的评论能回复别人的评论. html <div id="comment"> <article-content v-bind:article="article"></article-content&g
JavaScript直播评论发弹幕切图功能点集合效果代码

一.代码 html+js <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="styl
vue.js实现用户评论、登录、注册、及修改信息功能

vue.js实现用户评论.登录.注册.及修改用户部分信息功能代码.效果图如下: 登入后: 登入前: 登录框: 注册框: html代码部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> <link rel="stylesheet" href=&quo
vue.js评论发布信息可插入QQ表情功能

本文实例为大家分享了vue.js评论发布信息可插入QQ表情,供大家参考,具体内容如下 demo例子: HTML文本内容: <template> <div id="publish">  <div class="publish_container"> <p contenteditable
JavaScript实现QQ聊天消息展示和评论提交功能

QQ聊天消息显示,提交评论等实现原理,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .bos { margin: 100px auto; width: 350px; posi
Android使用贝塞尔曲线仿QQ聊天消息气泡拖拽效果

本文实例为大家分享了Android仿QQ聊天消息气泡拖拽效果展示的具体代码,供大家参考,具体内容如下先画圆,都会吧.代码如下: public class Bezier extends View { private final Paint mGesturePaint = new Paint(); private final Path mPath = new Path(); private float mX1 = 100, mY1 = 150; private float mX2 = 300, m
JavaScript实现QQ聊天室功能

本文实例为大家分享了JavaScript实现QQ聊天室的具体代码,供大家参考,具体内容如下 1. 任务要求 1)掌握基本过滤选择器: 2)掌握jQuery对象的click()方法: 3)掌握jQuery对象的css()方法: 4)掌握jQuery对象的addClass()方法: 5)如何获取指定元素的值? 6)如何设置元素的显示和隐藏? 7)如何设置元素的html代码? 2. 需求说明制作显示如下图所示的QQ聊天页面.随机用户在文本框中输入文本后点击“发送”按钮,文本中的消息将显示在“聊天记录
javascript实现QQ空间相册展示源码

知识点:html/css布局思维,浮动/定位详解,大企业标准,代码性能优化,js鼠标事件,DOM操作等. 源码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词一,关键词二"> <meta name="De
JavaScript实现简易QQ聊天界面

本文实例为大家分享了JavaScript实现简易QQ聊天界面的具体代码,供大家参考,具体内容如下题目: 制作一个简易聊天界面,当用户在界面下方的文本框中输入信息后,点击发送按钮,文本框中的信息发送到界面中部的信息显示区域,同时信息输入文本框中的信息被清空,等待下次信息录入.信息从上往下一条条显示. 操作界面如下图所示: 题目分析: 1.用户输入信息,需要文本框text:2.确定输入的信息后,点击发送按钮,即button按钮:3.文本框的信息将显示在信息显示区域textarea,或者div,本文
Android使用ViewDragHelper实现QQ聊天气泡拖动效果

QQ聊天气泡拖动效果Android实现代码,供大家参考,具体内容如下概述本文的目的是实现类似于QQ消息提醒的气泡的拖拽效果.网上已有大神的实现效果是通过监听控件的OnTouchEvent事件的ACTION_DOWN,ACTION_MOVE,ACTION_UP事件来处理相应的拖拽效果,这里采用ViewDragHelper的方式去实现拖拽,顺便学习了一下ViewDragHelper的使用方式,拖拽时的粘连效果采用贝塞尔曲线来实现. 用ViewDragHelper实现拖拽效果 ViewDragHe
Python QQBot库的QQ聊天机器人

本文实例为大家分享了Python QQBot库的QQ聊天机器人的具体代码,供大家参考,具体内容如下项目地址:https://github.com/pandolia/qqbot 1.安装 pip install qqbot 2.主动发出消息 from qqbot import _bot as bot # 登录QQ bot.Login(['-q', '2816626661']) ''' buddy 获取指定名称/备注的好友 group 获取群 ''' buddy = bot.List('buddy
javascript实现简易聊天室

聊天室是我们经常见的,比如微信聊天界面.QQ聊天界面等等,一个简易的聊天室如下: 1.html代码 <div class="content"> <div class="section"></div> <form action="#"> <textarea id="$value"></textarea> <button type="butto
java WebSocket实现聊天消息推送功能

本文实例为大家分享了java WebSocket实现聊天消息推送功能的具体代码,供大家参考,具体内容如下环境: JDK.1.7.0_51 apache-tomcat-7.0.53 java jar包:tomcat-coyote.jar.tomcat-juli.jar.websocket-api.jar ChatAnnotation消息发送类: import java.io.IOException; import java.util.HashMap; import java.util.Map;
用Python写一个模拟qq聊天小程序的代码实例

Python 超简单的聊天程序客户端: import socket, sys host = '10.248.27.23' # host = raw_input("Plz imput destination IP:") # data = raw_input("Plz imput what you want to submit:") port = 51423 s = socket.socket(socket.AF_INET,socket.SOCK_STREAM) tr

JavaScript实现QQ聊天消息展示和评论提交功能

相关推荐

随机推荐