初学js之qq聊天实例

最新推荐文章于 2023-04-05 12:58:51 发布
最新推荐文章于 2023-04-05 12:58:51 发布
阅读量425 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/dream-hh/p/10212871.html
版权

实现的功能为上图所示，但是每新发送的消息必须显示在最上面。

我实现了两版，样式有是一样的。我们直接看代码。

版本一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        li{
            list-style: none;
        }
        .box{
            width: 253px;
            height: 535px;
            background: url('img/iPhone.png')no-repeat;
            margin: 0 auto;
            position: relative;
        }
        .content{
            position: absolute;
            width: 216px;
            height: 340px;
            top:78px;
            left: 21px;
            overflow: auto;
        }
        .send{
            position: absolute;
            width: 216px;
            height: 42px;
            bottom:74px;
            left: 21px;
            background-color: #EEEEEE;
            border-top: 1px solid #ccc;
        }
        .send a{
            position: absolute;
            top: 3px;
            left: 5px;
            text-decoration: none;
            text-align: center;
            line-height: 32px;
            width: 30px;
            height: 32px;
            border-radius: 5px;
            background-color: #fff;
            border: 1px solid #ccc;
        }
        .db{
            background: url('img/qq2.gif')no-repeat center;
        }
        .xl{
            background: url('img/qq1.gif')no-repeat center;

        }
        .send .inp1{
            position: absolute;
            top: 3px;
            left: 41px;
            width: 126px;
            height: 32px;
            border-radius: 5px;
            border: 1px solid #ccc; 
        }
        .send span{
            position: absolute;
            top: 50%;
            right:0px;
            width: 40px;
            height: 32px;
            color: #999;
            margin-top: -16px;
            font: 600 16px/32px "微软雅黑";
            cursor: pointer;
        }
        .cont{
             padding: 10px 0;
             width: 100%;
        }
        .content div{
            display: block;
            clear: both;
        }
        .content .lis_lf{
            background: url('img/qq2.gif')no-repeat;
            float: left;
            margin: 5px 5px 0 5px;
        }
        .content .lis_rt{
            background: url('img/qq1.gif')no-repeat right;
            float: right;
            margin:5px 5px 0 5px;
        }
        .content .lis_lf span{
            display: inline-block;
            margin-left: 30px;
            word-break:break-all; width:100px;
            word-wrap:break-word;
            background-color: #e7e5eb;
            border-radius: 5px;
        }
        .content .lis_rt span{
            display: inline-block;
            margin-right: 30px;
            word-break:break-all; width:100px; overflow:auto;
            word-wrap:break-word;
            background-color: #2bc71c;
            border-radius: 5px;
        }
    </style>
    <script>
        window.onload = function(){
            var oContent =document.getElementById("content");
            var oL1 = oContent.getElementsByTagName("ol")[0];
            var oSend = document.getElementsByTagName("span")[0];
            var oInp1 = document.getElementById("inp1");
            var oA = document.getElementsByTagName("a")[0];
            var onOff = true;
            
            oA.onclick = function(){
                if(this.onOff){
                    oA.className = 'db';
                    this.onOff = false;
                }else{
                    oA.className = 'xl';
                    this.onOff = true;
                }    
            };

            //发送消息
            oSend.onclick = function(){
                if(oInp1.value == "")
                {
                    alert("消息不能为空");
                }
                else
                    {
                    if(oA.onOff)
                    {
                        var Test = "<li class ='lis_rt'>" + "<span>"+oInp1.value+"</span>" + "</li>";
                        // oL1.innerHTML += Test;  //等价于 oL1.innerHTML = oL1.innerHTML + Test
                        oL1.innerHTML = Test + oL1.innerHTML;
                    }
                    else
                    {
                        var Test = "<li class ='lis_lf'>" + "<span>" + oInp1.value + "</span>" + "</li>";
                        oL1.innerHTML = Test + oL1.innerHTML;
                    }
                    oInp1.value = "";  
                }  
            }; 
        }
        
    </script>
</head>
<body>
    <div class="box">
        <div class="content" id="content">
            <ol class="cont reverse"></ol>
        </div>
        <div class="send">
            <a href="javascript:;" class="db"></a>
            <input class="inp1" type="text" value="" id="inp1">
            <span>发送</span>
        </div>
    </div>
</body>
</html>
View Code

版本二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        li{
            list-style: none;
        }
        .box{
            width: 253px;
            height: 535px;
            background: url('img/iPhone.png')no-repeat;
            margin: 0 auto;
            position: relative;
        }
        .content{
            position: absolute;
            width: 216px;
            height: 340px;
            top:78px;
            left: 21px;
            overflow: auto;
        }
        .send{
            position: absolute;
            width: 216px;
            height: 42px;
            bottom:74px;
            left: 21px;
            background-color: #EEEEEE;
            border-top: 1px solid #ccc;
        }
        .send a{
            position: absolute;
            top: 3px;
            left: 5px;
            text-decoration: none;
            text-align: center;
            line-height: 32px;
            width: 30px;
            height: 32px;
            border-radius: 5px;
            background-color: #fff;
            border: 1px solid #ccc;
        }
        .db{
            background: url('img/qq2.gif')no-repeat center;
        }
        .xl{
            background: url('img/qq1.gif')no-repeat center;

        }
        .send .inp1{
            position: absolute;
            top: 3px;
            left: 41px;
            width: 126px;
            height: 32px;
            border-radius: 5px;
            border: 1px solid #ccc; 
        }
        .send span{
            position: absolute;
            top: 50%;
            right:0px;
            width: 40px;
            height: 32px;
            color: #999;
            margin-top: -16px;
            font: 600 16px/32px "微软雅黑";
            cursor: pointer;
        }
        .cont{
             padding: 10px 0;
             width: 100%;
        }
        .content div{
            display: block;
            clear: both;
        }
        .content .lis_lf{
            background: url('img/qq2.gif')no-repeat;
            float: left;
            margin: 5px 5px 0 5px;
        }
        .content .lis_rt{
            background: url('img/qq1.gif')no-repeat right;
            float: right;
            margin:5px 5px 0 5px;
        }
        .content .lis_lf span{
            display: inline-block;
            margin-left: 30px;
            word-break:break-all; width:100px;
            word-wrap:break-word;
            background-color: #e7e5eb;
            border-radius: 5px;
        }
        .content .lis_rt span{
            display: inline-block;
            margin-right: 30px;
            word-break:break-all; width:100px; overflow:auto;
            word-wrap:break-word;
            background-color: #2bc71c;
            border-radius: 5px;
        }
    </style>
    <script>
        window.onload = function(){
            var oContent =document.getElementById("content");
            var oL1 = oContent.getElementsByTagName("ol")[0];
            var oSend = document.getElementsByTagName("span")[0];
            var oInp1 = document.getElementById("inp1");
            var oA = document.getElementsByTagName("a")[0];
            var onOff = true;
            // var num = 0;
            oA.onclick = function(){
                if(this.onOff){
                    oA.className = 'db';
                    this.onOff = false;
                }else{
                    oA.className = 'xl';
                    this.onOff = true;
                }    
            };
            function fun(){
                //1.创建li
                var newItem = document.createElement("li");
                //2.在li里面创建span
                var newSpan = document.createElement("span");
                newItem.appendChild(newSpan);
                newSpan.innerHTML = oInp1.value;
                if (oInp1.value == ""){
                    alert("消息不能为空");
                }
                if(oA.onOff){
                    newItem.className = 'lis_rt';
                }else{
                    newItem.className = 'lis_lf';
                }
                oInp1.value = "";
                var list = document.getElementById("cont")
                list.insertBefore(newItem, list.childNodes[0]);
                //insertBefore 给某个元素前添加节点
            };
            oSend.onclick = function(){
                fun();
            }
        }
        
    </script>
</head>
<body>
    <div class="box">
        <div class="content" id="content">
            <ol class="cont" id="cont">
            </ol>
        </div>
        <div class="send">
            <a href="javascript:;" class="db"></a>
            <input class="inp1" type="text" value="" id="inp1">
            <span>发送</span>
        </div>
    </div>
</body>
</html>
View Code

转载于:https://www.cnblogs.com/dream-hh/p/10212871.html

a870066721
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用js创建简单的QQ聊天框
m0_65511328的博客
03-13 2371
QQ聊天框是一款很好的通信工具。方便用户聊天，并且减少人与人之间的距离。方便用户发信息和通知。下面我说到的就是一款比较简单的QQ聊天框之一——QQ群聊。 在学习项目中，我们学习到了聊天框的一些内容，在使用方法我进行了部分总结，并且加了一些符合QQ聊天框的内容，需要的可以作参考（仅供参考）。 第一：获取时间 1.创建时间对象var date = new Date(); 2.需运用到三元运算符：条件表达式？ 语句1：语句2； 第二：流程控制语句 我用的是其中的分支结构。 在执行代码时，可以根据条件
基于 vue.js 的仿QQ聊天室
热门推荐
weixin_45783387的博客
11-28 1万+
简介 这是一款基于 vue.js 开发的聊天室组件库，在提供基础封装的同时，最大程度的增加扩展性。 下面是效果演示图： MChat组件效果图： IChat组件效果图： 如何安装 使用 npm 安装 npm install vue-mchat 使用 在main.js中引入 # npm 下载方式 // 进入css import 'MChat/lib/MChat.css' //引入组件 import MChat from 'MChat' // 使用vue加载组件 Vue.use(MChat
使用原生JS实现QQ好友、QQ空间、新浪微博、腾讯微博分享功能
廖龙东个人博客
04-05 1022
使用原生JS实现QQ好友、QQ空间、新浪微博、腾讯微博分享功能。
【QQ】js实现分享到QQ
qq_25285531的博客
04-28 649
js代码 <script src="http://connect.qq.com/widget/loader/loader.js" widget="shareqq" charset="utf-8"></script> <script type="text/javascript"> (function(){ var p = { url:...
基于mui和php实现一个乡土文化教学系统
~~~
11-06 1022
基于mui和thinkphp框架实现的一个前后端分离项目。
JSqq列表菜单展示
LZhizi的博客
04-22 420
实现效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>QQ菜单列表展示</title> </head> <style> ul,h2{ padding: 0; ...
基于HTML+CSS+JavaScript实现的QQ音乐界面+源代码+文档
最新发布
04-09
这个项目包括了完整的源代码和相关文档，帮助初学者和开发者深入理解前端开发的基本原理和实践技巧。 首先，HTML（HyperText Markup Language）是网页的基础，用于构建网页的结构。在这个QQ音乐界面的实现中，HTML...
Java仿QQ聊天程序源代码
05-17
【Java仿QQ聊天程序源代码】是一个典型的Java编程项目，主要目标是实现一个类似于QQ的在线聊天应用。这个项目对于初学者来说是一个很好的实践案例，因为它涵盖了多个Java编程的重要知识点，包括网络编程、多线程、...
QQ音乐首页
03-02
总之，"QQ音乐首页"项目是一个全面锻炼前端开发技能的实例，涵盖了HTML5、CSS3和JavaScript的基础与进阶知识。通过这个项目，开发者不仅可以提升代码编写能力，还能了解到网页开发的完整流程，为今后的实际工作打下...
HTML5_初学者网页实例文档-注释齐全
05-30
借助此文件学习HTML5各种命令以及使用方法，对比网页编译的实例快速掌握HTML5。可以使用Notepad++打开学习，也可以直接使用记事本文档打开；练习HTML5和Java Script的基础知识。后续会上传一些其他的学习实例。
网页QQ在线聊天，QQ在线客服，js实现QQ在线聊天
09-18
网页QQ在线聊天，QQ在线客服，js实现QQ在线聊天
h5+css+jsQQ注册页面小实例
07-18
h5+css+jsQQ注册页面小实例 h5+css+jsQQ注册页面小实例 h5+css+jsQQ注册页面小实例 h5+css+jsQQ注册页面小实例
html+css+js实例
12-18
这个"html+css+js实例"压缩包显然提供了一个基础的网页项目，适合初学者学习和参考。 HTML是网页内容的结构语言，它定义了网页的基本元素和结构，如标题、段落、图片、链接等。例如，在这个"travel"项目中，可能...
js常用实例---qq交谈
aa15864186013的博客
10-08 183
<a target="_blank" href="http://wpa.qq.com/msgrd?V=1&Uin=*******&Site=ioshenmue&Menu=yes"><img src="http://wpa.qq.com/pa?p=1:*******:1" border="0"></a> ‘*’处换成在线的qq号...
QQ聊天对话框（Js实现，支持表情插入文本中间）
01-31 2169
一般我们做文本对话框，都考虑使用textarea，其实，用div也可以实现，用div的好处就是可以往里插入图片、表情等，不必都显示为字符。 但是在插入表情图片或插入图片时就面临一个问题，图片怎么才能放到我输入文本的中间位置，而不是每次都追加到最后面，百度搜索了很多资料，自己试过，包装好了两种方法，一种是针对div的，一种针对textarea，当然，textarea没法显示图片，只适用于插入表...
Js打开QQ聊天对话窗口
Cindy
05-30 4359
Js打开QQ聊天对话窗口 function openQQ() { var qq = $(this).attr('data-qq');//获取qq号 window.open('http://wpa.qq.com/msgrd?v=3&amp;uin='+qq+'&amp;site=qq&amp;menu=yes','_brank'); } ...
Autojs-QQ每日定时给女票/男票/闺蜜/基友发送一句话
头发浓密的萌新的博客
03-06 1081
Autojs-QQ每日定时给女票/男票/闺蜜/基友发送一句话
PC使用js调用qq聊天
zshsats博客
07-10 3377
PCs使用js调用qq聊天 第一种是链接的方式: 注:target=”_blank”在a标签加上这个,如果对方不在线会提醒打开qq,如果对方在线会提示添加好友页面 如果a标签不加target=”_blank”,弹框会闪退 window.location.href = &quot;http://wpa.qq.com/msgrd?v=3&amp;amp;uin=3065160951&amp;amp;site=qq&amp;...
常用api，适合初学者
04-25
常用的文件操作API中有一个非常常用的函数CreateFile和DeleteFile。 CreateFile函数可用于创建或打开一个文件，并...初学者可以通过参考MSDN上的文档和实例代码，快速掌握这些函数的使用，实现文件的创建和删除操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值