前端 时间个性化 插件 jquery.timeago.js

简介:

关键词 :

时间格式化 刚刚 N分钟前 N小时前 N天前 N月前 N年前 

MM-dd hh:mm  或者  yyyy-MM-dd

 

前端: 

< span  class="time" title="2016-07-23 12:02:32"></ span >

  

 

用法:

 $(".time").timeago();

 

插件: jquery.timeago.js

 

复制代码
!function (t) {
    function e(e) {
        var n = t.extend(o.settings, e)
          , s = t.proxy(r, this);
        s(),
        n.refreshMillis > 0 && setInterval(s, n.refreshMillis)
    }
    function r() {
        var e = n(this)
          , r = e.datetime;
        return isNaN(r) || t(this).text(o.inWords(r)),
        this
    }
    function n(e) {
        return e = t(e),
        e.data("timeago") || e.data("timeago", {
            datetime: o.datetime(e)
        }),
        e.data("timeago")
    }
    function s(t) {
        return (new Date).getTime() - t.getTime()
    }
    function i(t) {
        var e = new Date;
        return e.getMonth() > t.getMonth() || e.getDate() > t.getDate()
    }
    function a(t) {
        return (new Date).getFullYear() > t.getFullYear()
    }
    Date.prototype.format = function (t) {
        var e = {
            "M+": this.getMonth() + 1,
            "d+": this.getDate(),
            "h+": this.getHours(),
            "m+": this.getMinutes(),
            "s+": this.getSeconds(),
            "q+": Math.floor((this.getMonth() + 3) / 3),
            S: this.getMilliseconds()
        };
        /(y+)/.test(t) && (t = t.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)));
        for (var r in e)
            new RegExp("(" + r + ")").test(t) && (t = t.replace(RegExp.$1, 1 == RegExp.$1.length ? e[r] : ("00" + e[r]).substr(("" + e[r]).length)));
        return t
    }
    ;
    var o = {
        settings: {
            refreshMillis: 6e4,
            relative: !0,
            strings: {
                suffixAgo: "前",
                seconds: "刚刚",
                minute: "1分钟",
                minutes: "%d分钟",
                hour: "1小时",
                hours: "%d小时",
                days: "%d天",
                months: "%d月",
                years: "%d年",
                numbers: []
            },
            yearsAgoFormat: "yyyy-MM-dd",
            daysAgoFormat: "MM-dd hh:mm"
        },
        inWords: function (e) {
            function r(e, r) {
                var n = t.isFunction(e) ? e(r, u) : e
                  , s = g.numbers && g.numbers[r] || r;
                return n.replace(/%d/i, s)
            }
            var n = o.settings.relative;
            if (!n && a(e))
                return e.format(this.settings.yearsAgoFormat);
            if (!n && i(e))
                return e.format(this.settings.daysAgoFormat);
            var u = s(e)
              , g = this.settings.strings
              , h = g.suffixAgo
              , d = Math.abs(u) / 1e3
              , l = d / 60
              , f = l / 60
              , m = f / 24
              , c = m / 30
              , M = m / 365;
            return words = 60 > d ? r(g.seconds, Math.floor(d)) : 60 > l ? r(g.minutes, Math.floor(l)) : 24 > f ? r(g.hours, Math.floor(f)) : 30 > m ? r(g.days, Math.floor(m)) : 365 > m ? r(g.months, Math.floor(c)) : r(g.years, Math.floor(M)),
            "刚刚" == words ? words : words + h
        },
        parse: function (e) {
            var r = t.trim(e);
            return r = r.replace(/\.\d+/, ""),
            r = r.replace(/-/, "/").replace(/-/, "/"),
            r = r.replace(/T/, " ").replace(/Z/, " UTC"),
            r = r.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2"),
            new Date(r)
        },
        datetime: function (e) {
            var r = t(e).attr(o.isTime(e) ? "datetime" : "title");
            return o.parse(r)
        },
        isTime: function (e) {
            return "time" === t(e).get(0).tagName.toLowerCase()
        }
    };
    t.fn.timeago = function (t) {
        return this.each(function () {
            e.call(this, t)
        }),
        this
    }
}(window.jQuery)
复制代码


相关文章
|
6天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
29 3
|
14天前
|
前端开发 JavaScript
前端ES5 | js —添加元素方法
前端ES5 | js —添加元素方法
|
15天前
|
JavaScript 前端开发
前端JS函数
【9月更文挑战第4天】前端JS函数
21 6
|
18天前
|
开发者 图形学 开发工具
Unity编辑器神级扩展攻略:从批量操作到定制Inspector界面,手把手教你编写高效开发工具,解锁编辑器隐藏潜能
【8月更文挑战第31天】Unity是一款强大的游戏开发引擎,支持多平台发布与高度可定制的编辑器环境。通过自定义编辑器工具,开发者能显著提升工作效率。本文介绍如何使用C#脚本扩展Unity编辑器功能,包括批量调整游戏对象位置、创建自定义Inspector界面及项目统计窗口等实用工具,并提供具体示例代码。理解并应用这些技巧,可大幅优化开发流程,提高生产力。
64 1
|
19天前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
27 1
|
18天前
|
开发者 图形学 C#
深度解密:Unity游戏开发中的动画艺术——Mecanim状态机如何让游戏角色栩栩如生:从基础设置到高级状态切换的全面指南,助你打造流畅自然的游戏动画体验
【8月更文挑战第31天】Unity动画系统是游戏开发的关键部分,尤其适用于复杂角色动画。本文通过具体案例讲解Mecanim动画状态机的使用方法及原理。我们创建一个游戏角色并设计行走、奔跑和攻击动画,详细介绍动画状态机设置及脚本控制。首先导入动画资源并添加Animator组件,然后创建Animator Controller并设置状态间的转换条件。通过编写C#脚本(如PlayerMovement)控制动画状态切换,实现基于玩家输入的动画过渡。此方法不仅适用于游戏角色,还可用于任何需动态动画响应的对象,增强游戏的真实感与互动性。
43 0
|
18天前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
42 0
|
18天前
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
58 0
|
18天前
|
开发者 Android开发 iOS开发
Xamarin开发者的神器!揭秘你绝不能错过的插件和工具,让你的开发效率飞跃式提升
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程,保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用介绍 Xamarin.Forms 的基本功能和工作原理。首先配置 Visual Studio 开发环境,然后创建并运行一个包含标题、按钮和消息标签的示例应用,展示如何定义界面布局及处理按钮点击事件。这帮助开发者快速入门 Xamarin.Forms,提高跨平台应用开发效率。
30 0
|
18天前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
31 0