Web App 聊天样式

意见反馈：

@using CommonDB.EF
@model IEnumerable<Pub_ChatLog>
@{
    ViewBag.Title = "意见反馈";
    bool hasData =Model!=null&&Model.Count() > 0;
}
@section css
{
    <style>
        .A-bg-body { background-color: #f0f0f0; }
        .more { display: block; width: 50%; padding: .5rem 0; margin: .3rem auto 0 auto; cursor:pointer; }
        .more[disabled] { color:#999; }
        .jtalk1[data-has=False] { margin-top: 1.2rem; }

        .footer div { overflow: hidden; width: 100%; padding: 0 1rem; }
        .footer input { float: left; width: 75%; padding: 0 3%; height: 2rem; margin: .5rem 0; border-radius: .3rem; border: #ddd 1px solid; }
        .footer button { float: left; width: 22%; height: 2.2rem; margin: .4rem 0 .4rem 3%; padding: 0; font-size: 1rem; letter-spacing: .1rem; color: white; border-radius: .3rem; }

    </style>
}
<div class="header A-bg">
    <a class="back-btn A-icon-arrow-left A-active"></a>
    <h1>@ViewBag.Title</h1>
</div>

@if (hasData){<button class="more A-color">查看更多消息</button>}
<dl data-has="@hasData" class="jtalk1">
    <dd class="@(null==ViewBag.userID? "" : Model != null && Model.Count() < 6 ? "" : "hide")">
        <div class="avatar bounceIn">
            <img src="~/Image/Ico/ic_launcher.png">
        </div>
        <div class="content bounceIn">
            <span></span>
            <p>您好！欢迎给有心得提供宝贵的意见，我们将根据您的意见不断改进产品。</p>
        </div>
    </dd>
    @if (Model != null && Model.Count() > 0)
    {
        foreach (Pub_ChatLog item in Model)
        {
            if (item.fromID.Equals(ViewBag.userID))
            {
                <dt data-time="@item.sendTime"></dt>
                <dd class="reset">
                    <div class="content bounceIn">
                        <span></span>
                        <p>@item.content</p>
                    </div>
                    <div class="avatar bounceIn">
                        <img src="@ViewBag.avatar">
                    </div>
                </dd>
            }
            else
            {
                <dt data-time="@item.sendTime"></dt>
                <dd>
                    <div class="avatar bounceIn">
                        <img src="~/Image/Ico/ic_launcher.png">
                    </div>
                    <div class="content bounceIn">
                        <span></span>
                        <p>@item.content</p>
                    </div>
                </dd>
            }
        }
    }
</dl>
<div class="footer">
    <div>
        <input placeholder="我也想说两句">
        <button class="A-btn">发送</button>
    </div>
</div>
@*<div class="jtextarea-talk">
    <input placeholder="我想说两句" />
    <button>发送</button>
</div>*@

@section js{
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script>
    var totalPage = parseInt(‘@ViewBag.page‘);
    var curPage = totalPage;
    var fromId = ‘@ViewBag.userID‘;
    var toId = ‘@ViewBag.adminID‘;

    var smartTime = (function(){
        var parse = function(timeStr) {
            var diffTime = new Date().getTime()-new Date(timeStr).getTime();
            var diffYear = Math.floor(diffTime/(1000*60*60*24*30.4*12));
            var diffMonth = Math.floor(diffTime/(1000*60*60*24*30.4));
            var diffDay = Math.floor(diffTime/(1000*60*60*24));
            var diffHour = Math.floor(diffTime/(1000*60*60));
            var diffMinute = Math.floor(diffTime/(1000*60));
            if (diffMinute<0)timeStr="未来时间";
            else if (diffMinute<=5)timeStr="刚刚";
            else if (diffMinute<=15)timeStr="5分钟前";
            else if (diffMinute<=30)timeStr="15分钟前";
            else if (diffMinute<60)timeStr="半个小时前";
            else if (diffHour<24)timeStr=diffHour+"小时前";
            else if (diffDay<30)timeStr=diffDay+"天前";
            else if (diffMonth<12)timeStr=diffMonth+"个月前";
            else timeStr=diffYear+"年前";
            return timeStr;
        }
        var calc = function(){
            $(‘.jtalk1 dt‘).each(function(i,o){
                var $o = $(o);
                var attrName =‘data-time‘;
                if($o.text(parse($o.attr(attrName))).text()!=$o.nextAll(‘dt:first‘).text(parse($o.nextAll(‘dt:first‘).attr(attrName))).text())
                    $o.nextAll(‘dt:first‘).show();
                else $o.nextAll(‘dt:first‘).hide();
            })
            if (arguments[0])setTimeout(calc,1*60*1000);
        }
        return {parse:parse,calc:calc};
    })();
    smartTime.calc(true);

    window.scrollTo(0, $(document.body).height());
    $(‘button.more‘).click(function () {
        var $this = $(this);
        $this.prop(‘disabled‘,true);
        $.post(‘@Url.Action("FeedbackPaging")‘,{‘fromId‘:fromId,‘toId‘:toId,‘page‘:totalPage-(--curPage)}, function (json) {
            $this.prop(‘disabled‘,false);
            if (json.status) {
                var $jtalk = $(‘.jtalk1‘);
                var isYou = $jtalk.find(‘dd.reset:eq(0)‘).prop(‘outerHTML‘);
                var system = $($jtalk.find(‘dd:eq(0)‘).prop(‘outerHTML‘)).removeAttr(‘class‘).prop(‘outerHTML‘);
                console.log(json.list)
                $.each(json.list,function(i,item){
                    var nodeStr = item.isYou?isYou:system;
                    nodeStr=‘<dt data-time="‘+item.time+‘"></dt>‘+nodeStr;
                    $(‘.jtalk1 dd:first‘).after($(nodeStr).find(‘p‘).text(item.content).end());
                });
                if(curPage==1){//显示第一句问候语
                    $(‘.jtalk1 dd:first‘).removeAttr(‘class‘);
                    $(‘button.more‘).removeAttr(‘class‘).text(‘‘).css(‘padding‘,‘.6rem 0‘);
                }
                smartTime.calc();
            } else alert(json.content);
        },‘json‘);
    });

        $(‘.footer button‘).click(function () {
        var $this = $(this);
        var content = $(this).prev().val();
        if (!content) { alert("发送的内容不能为空！"); return; }
        if (‘@ViewBag.userID‘ == ‘‘) { alert("当前未登录，请先登录！"); return; }
        $this.text(‘发送中...‘).prop(‘disabled‘,true);
        $.post(location.href,{‘fromId‘:fromId,‘toId‘:toId,‘content‘:content}, function (json) {
            $this.text(‘发送‘).prop(‘disabled‘,false);
            if (json.status) {
                $(‘.footer input‘).val(‘‘);
                $(‘.jtalk1‘).append($(‘<dt data-time="‘+json.content+‘"></dt>‘+$(‘.jtalk1‘).find(‘dd.reset:eq(0)‘).prop(‘outerHTML‘)).find(‘p‘).text(content).end());
                smartTime.calc();
                window.scrollTo(0,$(document).height());
            } else alert(json.content);
        });
    });
    </script>
}

asp.net

好友聊天：

@using CommonDB.EF
@model IEnumerable<Pub_ChatLog>
@{
    ViewBag.Title = ViewBag.toName;
    bool hasData = Model != null && Model.Count() > 0;
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section css
{
    <style>
        .A-bg-body { background-color: #f0f0f0; }
        .more { display: block; width: 50%; padding: .5rem 0; margin: .3rem auto 0 auto; cursor: pointer; }
        .more[disabled] { color: #999; }
        .jtalk1[data-has=False] { margin-top: 1.2rem; }
        .jtalk1 b { display: block; margin-top: .3rem; font-weight: normal; color: #bbb; text-align: right; }
    </style>
}
<div class="header A-bg">
    <a class="back-btn A-icon-arrow-left A-active"></a>
    <h1>@ViewBag.Title</h1>
</div>

@if (hasData)
{<button class="more A-color">查看更多消息</button>}
<dl data-has="@hasData" class="jtalk1">
    <dd class="@(Model!=null&&Model.Count()<6?"":"hide")">
        <div class="avatar bounceIn">
            <img src="@ViewBag.toAvatar">
        </div>
        <div class="content bounceIn">
            <span></span>
            <p>你好，初次见面，很高兴认识你！<b>[自动回复]</b></p>
        </div>
    </dd>
    @foreach (Pub_ChatLog item in Model)
    {
        if (item.fromID.Equals(ViewBag.userID))
        {
            <dt data-time="@item.sendTime"></dt>
            <dd class="reset">
                <div class="content bounceIn">
                    <span></span>
                    <p>@item.content</p>
                </div>
                <div class="avatar bounceIn">
                    <img src="@ViewBag.avatar">
                </div>
            </dd>
        }
        else
        {
            <dt data-time="@item.sendTime"></dt>
            <dd>
                <div class="avatar bounceIn">
                    <img src="@ViewBag.toAvatar">
                </div>
                <div class="content bounceIn">
                    <span></span>
                    <p>@item.content</p>
                </div>
            </dd>
        }
    }
</dl>

<div class="jtextarea-talk">
    <input placeholder="我想说两句" />
    <button>发送</button>
</div>

@section js{
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script>
        var totalPage = @ViewBag.page;
        var curPage = totalPage;
        var fromId = ‘@ViewBag.userID‘;
        var toId = ‘@ViewBag.toID‘;

        var smartTime = (function(){
            var parse = function(timeStr) {
                var diffTime = new Date().getTime()-new Date(timeStr).getTime();
                var diffYear = Math.floor(diffTime/(1000*60*60*24*30.4*12));
                var diffMonth = Math.floor(diffTime/(1000*60*60*24*30.4));
                var diffDay = Math.floor(diffTime/(1000*60*60*24));
                var diffHour = Math.floor(diffTime/(1000*60*60));
                var diffMinute = Math.floor(diffTime/(1000*60));
                if (diffMinute<0)timeStr="未来时间";
                else if (diffMinute<=5)timeStr="刚刚";
                else if (diffMinute<=15)timeStr="5分钟前";
                else if (diffMinute<=30)timeStr="15分钟前";
                else if (diffMinute<60)timeStr="半个小时前";
                else if (diffHour<24)timeStr=diffHour+"小时前";
                else if (diffDay<30)timeStr=diffDay+"天前";
                else if (diffMonth<12)timeStr=diffMonth+"个月前";
                else timeStr=diffYear+"年前";
                return timeStr;
            }
            var calc = function(){
                $(‘.jtalk1 dt‘).each(function(i,o){
                    var $o = $(o);
                    var attrName =‘data-time‘;
                    if($o.text(parse($o.attr(attrName))).text()!=$o.nextAll(‘dt:first‘).text(parse($o.nextAll(‘dt:first‘).attr(attrName))).text())
                        $o.nextAll(‘dt:first‘).show();
                    else $o.nextAll(‘dt:first‘).hide();
                })
                if (arguments[0])setTimeout(calc,1*60*1000);
            }
            return {parse:parse,calc:calc};
        })();
        smartTime.calc(true);

        window.scrollTo(0, $(document.body).height());
        $(‘button.more‘).click(function () {
            var $this = $(this);
            $this.prop(‘disabled‘,true);
            $.post(‘@Url.Action("TalkPaging")‘,{‘fromId‘:fromId,‘toId‘:toId,‘page‘:totalPage-(--curPage)}, function (json) {
                $this.prop(‘disabled‘,false);
                if (json.status) {
                    var $jtalk = $(‘.jtalk1‘);
                    var isYou = $jtalk.find(‘dd.reset:eq(0)‘).prop(‘outerHTML‘);
                    var system = $($jtalk.find(‘dd:eq(0)‘).prop(‘outerHTML‘)).removeAttr(‘class‘).prop(‘outerHTML‘);
                    console.log(json.list)
                    $.each(json.list,function(i,item){
                        var nodeStr = item.isYou?isYou:system;
                        nodeStr=‘<dt data-time="‘+item.time+‘"></dt>‘+nodeStr;
                        $(‘.jtalk1 dd:first‘).after($(nodeStr).find(‘p‘).text(item.content).end());
                    });
                    if(curPage==1){//显示第一句问候语
                        $(‘.jtalk1 dd:first‘).removeAttr(‘class‘);
                        $(‘button.more‘).removeAttr(‘class‘).text(‘‘).css(‘padding‘,‘.6rem 0‘);
                    }
                    smartTime.calc();
                } else alert(json.content);
            },‘json‘);
        });

        $(‘.jtextarea-talk button‘).click(function () {
            var content = $(this).prev().val();
            var $this=$(this);
            if (!content) { alert("发送的内容不能为空！"); return; }
            if (‘@ViewBag.userID‘ == ‘‘) { alert("当前未登录，请先登录！"); return; }
            $this.text(‘发送中...‘).prop(‘disabled‘,true);
            $.post(location.href,{‘fromId‘:fromId,‘toId‘:toId,‘content‘:content}, function (json) {
                $this.text(‘发送‘).prop(‘disabled‘,false);
                if (json.status) {
                    $(‘.jtextarea-talk input‘).val(‘‘);
                    $(‘.jtalk1‘).append($(‘<dt data-time="‘+json.content+‘"></dt>‘+$(‘.jtalk1‘).find(‘dd.reset:eq(0)‘).prop(‘outerHTML‘)).find(‘p‘).text(content).end());
                    smartTime.calc();
                    window.scrollTo(0,$(document).height());
                } else alert(json.content);
            });
        });
    </script>
}

asp.net

公共样式：

.jtalk1 { overflow: hidden; padding-bottom: 3rem; }
.jtalk1 dt { display: none; float: right; width: 100%; margin-top: 3rem; text-align: center; font-size: .8rem; color: #888; }
.jtalk1 dt:first-of-type { display: block; }
.jtalk1 dd { clear: both; float: left; display: table; border-spacing: .8rem 0; margin: .5rem 0 1rem 0; }
.jtalk1 dd div { display: table-cell; vertical-align: top; }
.jtalk1 img { width: 100%; border-radius: 50%; box-shadow: 0 0 0 .4rem rgba(255, 255, 255, 0.50); }
.jtalk1 .avatar { width: 3rem; }
.jtalk1 .content { position: relative; }
.jtalk1 .content p { padding: .9rem 1rem; background-color: white; min-height: 3rem; box-shadow: 1px 1px 1px 0 #ddd; border-radius: .2rem;}
.jtalk1 div span { position: absolute; left: -.5rem; top: .9rem; border-top: .5rem solid transparent; border-bottom: .5rem solid transparent; border-right: .5rem solid white; }
.jtalk1 .reset { float: right; }
.jtalk1 .reset div span { border-right: none; border-left: .5rem solid #FFEFC5; left: auto; right: -.5rem; }
.jtalk1 .reset div p { background-color: #FFEFC5; }

talk

效果图：

时间： 2024-11-05 16:06:37

Web App 聊天样式的相关文章

vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室——vueWebChat,实现了发送消息.表情(动图),图片.视频预览,右键菜单.截屏.截图可直接粘贴至文本框进行发送. 二.技术框架 MVVM框架:Vue2.5.6 状态管理:Vuex 页面路由:Vue-router iconfont图标:阿里巴巴字体图标库 自定义滚动条:vue-gemini-sc

慕课网实战—《用组件方式开发 Web App全站 》笔记五-折线图组件开发

运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! <用组件方式开发 Web App全站 > 折现图绘制大致步骤 折线图画布 JavaScript CSS 折线图绘制网格线 // 水平网格线 100份 -> 10份 var step = 10; ctx.beginPath(); ctx.lineWidth = 1; ctx.strokeStyle = '#AAAAAA'; window.ctx = c

web app变革之rem(转载)

rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一

Web App、Hybrid App与Native App的设计差异

目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web App.Hybrid App. Native App. 1. Web APP Web App 指采用Html5语言写出的App,不需要下载安装.类似于现在所说的轻应用.生存在浏览器中的应用,基本上可以说是触屏版的网页应用. 优点 (1)开发成本低, (2)更新快, (3)更新无需通知用户,不需要手动

慕课网实战—《用组件方式开发 Web App全站 》笔记七-饼图和环图组件开发

运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! <用组件方式开发 Web App全站 > 饼图开发(绘制饼图准备) 饼图实现原理 饼图开发(绘制饼图) 代码 /* 饼图组件对象 */ var H5ComponentPie =function ( name, cfg ) { var component = new H5ComponentBase( name ,cfg ); // 绘制网格线 - 背景层 v

慕课网实战—《用组件方式开发 Web App全站 》笔记四-柱状图组件开发

运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! <用组件方式开发 Web App全站 > 柱图开发思路 水平柱图开发(HTML的DOM搭建) ???? ???? 水平柱图开发(CSS样式编写) /* 柱状组件样式 */ .h5_component_bar{ } .h5_component_bar .line{ height: 15px; font-size: 12px; line-height: 15p

web app变革之rem

rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一

Web APP 随笔

自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备). 开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP:一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者. WebApp与Native App有何区别呢? Native App: 1.开发成本非常大. 一般使用的开发语言为JAVA.C++.Objective-C. 2.更新体验较

你的首个 Progressive Web App

什么是 Progressive Web App? Progressive Web Apps 是: 渐进增强 - 能够让每一位用户使用,无论用户使用什么浏览器,因为它是始终以渐进增强为原则. 响应式用户界面 - 适应任何环境:桌面电脑,智能手机,笔记本电脑,或者其他设备. 不依赖网络连接 - 通过 service workers 可以在离线或者网速极差的环境下工作. 类原生应用 - 有像原生应用般的交互和导航给用户原生应用般的体验,因为它是建立在 app shell model 上的. 持续更新