精华内容
下载资源
问答
  • 聊天对话框

    2020-10-09 11:31:40
    做一个静态的聊天对话框,用到的主要知识有浮动和清除浮动。 style样式设置: .box{ width: 400px; height: 800px; overflow: auto; border: 1px solid #000000; } p{ margin: 10px; padding: 8px; } .friend{ ...

    做一个静态的聊天对话框,用到的主要知识有浮动和清除浮动。
    在这里插入图片描述
    style样式设置:

       .box{
            width: 400px;
            height: 800px;
            overflow: auto;
            border: 1px solid #000000;
          }
       p{
         margin: 10px;
         padding: 8px;
       }
      .friend{
        border: 1px solid #666666;
        border-radius: 6px;
        background-color: #ddd;
        float: left;
        clear: both;
        max-width: 250px;  
      }
      .self{
         background-color: #83C44E;
         border: 1px solid #777;
         float: right;
         clear: both;
       }
    
    body区域:
    
     <div class="box">
         <p class="friend">在吗</p>
         <p class="self">在的</p>
         <p class="friend">起床了吗</p>
         <p class="self">还没有</p>
         <p class="friend">怎么还不起??</p>
         <p class="self">你没叫我起床啊!</p>
         <p class="friend">我不叫你就不起了吗?</p>
         <p class="self">那我干啥,起床也没事干</p>
         <p class="friend">没撒打算老师来到喀山阿拉蕾深刻的事但打开金沙萨德拉克鸡蛋拉萨看见达拉斯杰拉德</p>
         <p class="self"></p>
     </div>
    
    
    展开全文
  • jQuery实现聊天对话框

    2020-10-15 16:46:28
    主要为大家详细介绍了jQuery实现聊天对话框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • js实现聊天对话框

    2020-10-15 16:46:07
    主要为大家详细介绍了js实现聊天对话框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了js实现简易聊天对话框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • CEGUI 聊天对话框

    2019-10-08 22:38:17
    最近在写聊天对话框,使用CEGUI,就是游戏中左下角聊天模块,主要功能就是显示用户的名称,聊天的内容,表情,以及一些装备格式像下面这个样子 [莫压枯枯地]:大家晚上好[表情],这是我新穿的衣服[装备].在此记录一下...

    最近在写聊天对话框,使用CEGUI,就是游戏中左下角聊天模块,主要功能就是显示用户的名称,聊天的内容,表情,以及一些装备格式像下面这个样子

    [莫压枯枯地]:大家晚上好[表情],这是我新穿的衣服[装备].
    在此记录一下我遇到的问题及解决方案

    整个聊天列表是使用StaticText控件完成的,即,所以有聊天信息都是这个StaticText的Text属性值
    用户名,[莫压枯枯地]如果只是要求使用与聊天内容不同的字体、不同颜色的话,那就可以直接设置这段内容属性值,像这样,插入一段新的聊天内容:s

    local infoWin = CEGUI.WindowManager:getSingleton():getWindow("ChatWindow/Infolist");
    local priTxtFont = infoWin:getFont(); -- 保留原来的字体
    local priTxtColour = infoWin:getProperty("TextColours"); -- 保留原来的颜色
    local newInfo = "[font='字体'][colour='FFFF0000'][莫压枯枯地]" ..
    "[font='" .. priTxtFont .. "'][colour='" .. priTxtColour .. "']:hallow.";
    infoWin:setProperty(
    "Text", infoWin:getText() .. newInfo)
    如果是要求,鼠标放在上面有相关的事件,或者双击这个用户,编辑框中就出现这个用户的名称(表示要对这个用户说话时候),再或者要求用户的名称要有背景颜色,且不同类型的用户有不同的背景,如管理员与普通玩家的背景要求不同,还要文字的颜色可以设置不同,这个做起来有些麻烦,首先把我发现的CEGUI的问题描述一下:首先是事件,这个要插入一个控件,控件有相关的事件绑定,如鼠标放在上面,触发事件,然后出现一个消息框,描述这个玩家的一些信息,鼠标拿开,这个信息框就消失;双击这个控件,就将用户的名称追加到编辑框中;要有背景颜色,CEGUI中我还没有发现StaticText可以直接设置背景色,通过DEMO我发现它是在looknfeel文件中设置相关的图片来作为背景图片,背景的颜色也是可以在looknfeel中设置,可是如果不同背景颜色的控件都在looknfeel中使用一个单独的WidgetLook的话,那有些麻烦(突然想起来,可以将looknfeel改一下,就像StaticText的Text颜色可以设置一样,背景也可以改成通过控件的属性值来设置,待会儿试一下,明天把结果贴出来),刚才说到StaticText设置背景色,不可以直接通过属性来设置,且设置背景图片亦不可通过属性来直接设置,不过StaticImage可以通过设置背景图片来设置它的背景,而且StaticText亦可以将背景设置为透明,这样就好办了,设置一个控件,StaticImage中包含一个StaticText就OK了(StaticImage不可以设置文本所以在StaticImage中包含一个StaticText窗口,并把StaticText窗口设置为背景透明)StaticImage换背景图片很方便,只要美工给力,想怎么换都行,这样背景就有了,而StaticText可以设置文字的类型和颜色,且可以绑定事件到StaticText窗口(不是StaticImage窗口,因为StaticImage窗口已经被StaticText完整的覆盖了,所以StaticImage窗口不能直接的收到鼠标点击的消息) ,OK,背景有了,文字的类型与颜色也都有了,问题解决了,装备也是这样放置一个控件窗口来完成的,效果做的好的话,完全看不出来与其它文字有什么不同,唯一不同的是,这段文字(装备名称),可以有事件,它弹出一个信息框。还有一个问题,就是这个控件窗口的大小(高度与宽度),我现在叫[莫压枯枯地],五个字,产生的控件窗口大小要正好将这五个字放进去,其它用户的名称肯定有长有短,得动态产生这些个控件,且控件的大小要与字符串内容的宽高相符合,这个要使用Font的PointSize属性,见代码:
    function lua_computeStringWH(win, contentString) -- width && height
    local font = win:getFont();
    local ps = font:getProperty("PointSize");
    local width = string.len(contentString) * ps + 6;
    local height = ps + 6;

    return "{{0,0},{0,0},{0," .. width .. "},{0, " .. height .. "}}"
    end
    使用StaticText有下拉滚动条,发信息到聊天框的时候,滚动条它始终在上面,没有自动的往下面滚动,让玩家看到最新的消息,可以获取StaticText窗口的滚动条,发信息的时候将滚动条的位置到最下面,这样就OK了,在looknfeel文件,滚动条是作为StaticText的子控件,Child属性就是表示它是子控件,以TaharezLook/StaticText为例,有这么一行:<Child  type="TaharezLook/VerticalScrollbar" nameSuffix="__auto_vscrollbar__">这个表示,StaticText有一个子控件,类型是:"TaharezLook/VerticalScrollbar",这个子控件的名称是:"__auto_vscrollbar__",假如此时StaticText的名称为Chat/Infolist,那这个滚动条的名称就是:Chat/Infolist__auto_vscrollbar__(注意这点,它的真正名称是它的父控件的名称加这个后缀名,只有这个名称才是WindowManager可以通过它来获取这个滚动条控件),见代码:
    hscrollbarName = infoWin:getName() .. "__auto_vscrollbar__";
    hscrollbar
    = winMgr:getWindow(hscrollbarName);

    这样就得到了这个滚动条控件,你可以通过ScrollPosition这个属性来设置滚动条的位置,如hscrollbar:setProperty("ScrollPosition", "20");

    我遇到的问题基本上就这些,明天写,在聊天框中显示动态表情

    转载于:https://www.cnblogs.com/emyueguang/archive/2011/07/10/2102604.html

    展开全文
  • 简易聊天对话框

    千次阅读 2017-08-17 09:07:17
    <!DOCTYPE html> 聊天对话框 *{font-size: 14px; padding:0; margin:0;} .main{ position: relative; margin: 20px auto; bo
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>聊天对话框</title>
    <style type="text/css">
    *{font-size: 14px; padding:0; margin:0;}
    .main{
        position: relative;
        margin: 20px auto;
        border: 1px solid steelblue;
        width: 430px;
        height: 400px;
    }
    .msgInput{
        display: block;
        width: 406px;
        height: 60px;
        margin: 10px auto;
    
    }
    .sendbtn{
        position: absolute;
        width: 100px;
        height: 29px;
        bottom: 5px;
        right: 10px;
    }
    .content{
        list-style: none;
        width: 410px;
        height: 280px;
        margin: 5px auto;
        border: 1px dotted #D1D3D6;
        overflow-y: scroll;
    }
    .msgContent{
        width:auto;
        max-width: 250px;
        height: auto;
        word-break: break-all;
        margin: 5px;
        padding: 3px;
        border-radius: 5px;
    }
    
    .content .left{
        float: left;
        text-align: left;
        background-color: lightgrey;
    }
    .content .right{
        float: right;
        text-align: right;
        background-color: yellowgreen;
    }
    
    
    </style>
    <script type="text/javascript">
        window.onload=function(){
    
            var input = document.getElementById('msg_input');//查找缓存
            document.getElementById('sendbtn').onclick=function () {
                //var input1 = document.getElementById('msg_input');//
                //input0
    
                sendMsg();
            }
    
    
    
            //快捷键 发送
            document.onkeypress = function (event) {
                var e = event || window.event;
                var keycode = e.keyCode || e.which;
                console.log(e)
                if( keycode==10){//判断同时按下ctrl 和enter
                    sendMsg()
                }
            }
    
            function sendMsg() {
                var input = document.getElementById('msg_input');//查找缓存
                var ul = document.getElementById('content');
    
                var newLi = document.createElement('li');
                newLi.innerHTML = input.value;
                newLi.className = 'msgContent right';
                ul.appendChild(newLi);
    
                var div = document.createElement('div');
                div.style = 'clear:both';
                ul.appendChild(div);
    
    
    
    
                ajax({
                    url:'http://jisuznwd.market.alicloudapi.com/iqa/query?question='+input.value,
                    success:function (res) {
    //                console.log(res)
                        var obj = JSON.parse(res);
                        console.log(obj)
                        var array =  obj.result.content;
    //                  var zhengzhou = array[0];
                        var tmp = array;
    //                  var tmp = '温度:'+zhengzhou.day_air_temperature+','+zhengzhou.day_weather;
                        console.log(tmp)
    
                        var newLi = document.createElement('li');
                        newLi.innerHTML = tmp;
                        newLi.className = 'msgContent left';
                        ul.appendChild(newLi);
    
                        var div = document.createElement('div');
                        div.style = 'clear:both';
                        ul.appendChild(div);
                        input.value = '';
                        newLi.scrollIntoView();//将元素滚动到可见位置
                    }
                })
    
                input.value = '';
                newLi.scrollIntoView();//将元素滚动到可见位置
            }
    
        }
    
    
    
        function ajax(obj) {
            //?lastCursor=6610&pageSize=10
    //            var url = 'reg.php';
            var xhr = null;
            if(window.ActiveXObject){
                xhr = new ActiveXObject('Microsoft.XMLHTTP')
            }else{
                xhr = new XMLHttpRequest();
            }
    //        $username = $_REQUEST['username'];
    //        $password = $_REQUEST['password'];
    
            //打开与服务器的连接
            if(obj.method){
                xhr.open(obj.method,obj.url,true);
            }else{
                xhr.open('get',obj.url,true);
            }
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.setRequestHeader("Authorization","APPCODE 3e9dfb924f464e9593a95f9d2bbf4348")
    
    
            // {username:'zhangsa',password:123123}
    //        sendData = encodeURIComponent(sendData);
    
    
            // 发送请求
            //console.log(res);
            //回调函数
            xhr.onreadystatechange = function () {
    //                console.log(xhr.readyState)
                if(xhr.readyState == 4){
                    //数据接收完毕
                    if(xhr.status == 200){
    //                        console.log('请求成功',xhr.responseText)
                        if(obj.success){
                            obj.success(xhr.responseText)
                        }
    
                    }else{
    //                        console.log(xhr.status,'请求出错')
                        if(obj.failure){
                            obj.failure('请求失败')
                        }
                    }
                }
            }
    //            var sendData = 'username=zhangsan&password=123456';
            if( obj.method == undefined ||obj.method.toLowerCase() =='get'){
                xhr.send(null);//
            }else{
                xhr.send(obj.params);//
    
            }
        }
    
    
    </script>
    
    </head>
    
    <body>
        <div id="main" class="main">
            <ul id="content" class="content">
                <li class="msgContent left">hello?</li>
                <div style="clear:both"></div>
                <li class="msgContent left">hello</li>
                <div style="clear:both"></div>
                <li class="msgContent right">hi</li>
                <div style="clear:both"></div>
                <li class="msgContent left">hehe</li>
                <div style="clear:both"></div>
                <li class="msgContent left">goodbye</li>
                <div style="clear:both"></div>
                <li class="msgContent right">。。。。</li>
                <div style="clear:both"></div>
                <li class="msgContent right">sdfasdsadfassdfsdfsdfdsfsdfsdfsdfdfasdffasdfasfdasd fasd fasd fasdfasdfasdf</li>
                <div style="clear:both"></div>
                <li class="msgContent right"> 哈哈</li>
                <div style="clear:both"></div>
            </ul>
            <textarea id="msg_input" class="msgInput"></textarea>
            <button id="sendbtn" class="sendbtn">发送</button>
        </div>
    </body>
    </html>
    
    展开全文
  • 今天看了几个JS的视频,老师布置了一个编写一个简易聊天对话框的任务,没有涉及到Ajax.主要实现了切换头像模拟两方的聊天情况,样式比较简单,后期可以进行美化。 需要注意的地方是我是用的ul li列表来实现元素的...
  • [100daysUI系列]简洁的UI聊天对话框UI界面设计 PSD、对话框、聊天、聊天UI、聊天界面
  • 仿微信聊天对话框源码,易语言开发的,可以带给开发的思路
  • 聊天对话框 效果图: 基本代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>聊天对话框</title> <script src=...

    聊天对话框

    效果图:
    在这里插入图片描述

    基本代码如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>聊天对话框</title>
    		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
    *{font-size: 14px; padding:0; margin:0;}
    .main{
    	position: relative;
    	margin: 20px auto;
    	border: 1px solid steelblue;
    	width: 430px;
    	height: 400px;
    }
    .msgInput{
    	display: block;
    	width: 406px;
    	height: 60px;
    	margin: 10px auto;
    	
    }
    .sendbtn{
    	position: absolute;
    	width: 100px;
    	height: 29px;
    	bottom: 5px;
    	right: 10px;
    }
    .content{
    	list-style: none;
    	width: 410px;
    	height: 280px;
    	margin: 5px auto;
    	border: 1px dotted #D1D3D6;
    	overflow-y: scroll;
    }
    .msgContent{
    	width:auto;
    	max-width: 250px;
    	height: auto;
    	word-break: break-all;
    	margin: 5px;
    	padding: 3px;
    	border-radius: 5px;
    }
    
    .content .left{
    	float: left;
    	text-align: left;
    	background-color: lightgrey;
    }
    .content .right{
    	float: right;
    	text-align: right;
    	background-color: yellowgreen;
    }
    
    
    </style>
    		
    		
    	</head>
    	<body>
    		
    		<div id="main" class="main">
    		<ul id="content" class="content">
    			<li class="msgContent left">你在干啥?</li>
    			<div style="clear:both"></div>
    			<li class="msgContent right">在和你聊天</li>
    			<div style="clear:both"></div>
    			<li class="msgContent left"></li>
    			<div style="clear:both"></div>
    			<li class="msgContent right"></li>
    			<div style="clear:both"></div>
    			<li class="msgContent left">是不是可无聊</li>
    			<div style="clear:both"></div>
    			<li class="msgContent right">你也知道啊</li>
    			<div style="clear:both"></div>
    		</ul>
    		<textarea id="msg_input" class="msgInput"></textarea>
    		<button id="sendbtn" class="sendbtn">发送</button>
    		
    
    		
    		
    	<script type="text/javascript">
    		$(function(){
    			$('.sendbtn').click(function(){
    				var content = $('#msg_input').val();
    				$('#content').append('<li class="msgContent right">'+content+'<li>').append
    
    ('<div style="clear:both"></div>');
    				$('#msg_input').val('')
    				
    			});
    			
    			$(window).keydown(function(e){
    				if(e.ctrlKey && e.keyCode==13){
    					var content = $('#msg_input').val();
    						$('#content').append('<li class="msgContent right">'+content
    
    +'<li>').append('<div style="clear:both"></div>');
    				$('#msg_input').val('')
    				}
    			})
    		})
    		
    		
    	</script>
    	</body>
    </html>
    
    
    展开全文
  • 常见的聊天对话框,如微信,都是由一个长方形加一个三角形组合而成,重点就在于三角形的制作
  • 一、css 绘制实现小尖角聊天对话框,带尖角的说话泡泡,先给大家展示下效果图,感觉不错请参考实例代码。 二、效果 三、代码 css;toolbar:false"><style> #talkbubble { width: 160px; height: 80px; ...
  • 聊天对话框(与自己的灵魂对话)

    千次阅读 2019-10-10 10:25:26
    1.1 用vue实现聊天对话框 1.2 效果图
  • 今天看了几个JS的视频,视频中布置了一个编写一个简易聊天对话框的任务,没有涉及到Ajax.主要实现了切换头像模拟两方的聊天情况,样式比较简单,后期可以进行美化。 需要注意的地方是我是用的一个div标签来实现元素...
  • Vue实现简单聊天对话框案例

    千次阅读 2019-09-12 00:37:12
    功能:实现双人简单聊天对话框,见效果图 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
  • 用js做聊天对话框

    2020-12-28 23:05:15
    <!... <... <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...聊天对话框</title> <style> *{margin: 0;padding: 0;} #maxbo
  • <!... <... <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...聊天对话框</title> <style> *{margin: 0;padding: 0;} #maxbox{w
  • 静态H5聊天对话框html源码客服系统代码(3) 此程序 可用作客户与客服聊天使用,也可以作为app程序嵌入的聊天功能或者站内聊天使用的代码。 有需要的可+扣·扣:773179801 索要代码。 静态H5聊天输入对话框html...
  • WPF聊天对话框

    2015-10-13 15:33:05
    WPF 个人聊天窗口,实现消息气泡 对话

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,224
精华内容 489
关键字:

聊天对话框