前端 时间个性化 插件 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天前
|
前端开发 数据可视化 数据挖掘
前端开发者的福音:这些插件让你轻松应对各种复杂需求!
前端开发领域充满创意与挑战,面对复杂需求,开发者常感力不从心。本文通过三个真实案例,介绍如何利用Chart.js、ESLint和Ant Design等强大插件,解决数据可视化、代码质量和UI组件复用等问题,提高开发效率,创造更出色的前端作品。
14 3
|
11天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
11天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
17 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
15天前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
27 3
|
16天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
22 1
|
19天前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
35 5
|
17天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
16 1
|
20天前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
25 1
|
26天前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
20 3
|
20天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
30 0