• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

JavaScript 网站已运行xx年xx月xx小时xx分钟xx秒的方法

224 0

应狗群友的要求,写一个网站已经运行了多少时间的代码,本来php就完事了,非要js的。

无奈总结了下百度上的一些方法,写了一个稍微花了点心思的方法,使用很简单,new出这个函数,在使用init初始化方法,传入参数即可,完全不需要jq。

事先声明:

  1. 本方法没有考虑到闰年平年
  2. 月份统一30天计算

所以时间上可能不是很准确,但是相对准确,233

有能力完全可以自定义,我都有注释,中文友好满分。

不多说,上代码

function WebsiteElapsedTime() {
    //初始化
    this.init = function({
        id = "",
        time = ""
    }) {
        if (!id || !time) {
            throw new Error("网站已运行时间初始化失败,请传入正确的参数!");
        }
        const dom = document.getElementById(id);
        if (!dom) throw new Error("请传入正确的元素id");
        this.dom = dom;
        this.time = time;

        //首次运行
        this.elapsedModifyDom();
        //定时器
        if (window.$ElapsedTime) clearInterval(window.$ElapsedTime);
        window.$ElapsedTime = setInterval(
            this.elapsedModifyDom.bind(this),
            1000
        );
    };
    //计算时间
    this.elapsedTime = function(time = "") {
        const startTime = new Date(time.replace("-", "/")).getTime();
        const diffTime = Math.floor((Date.now() - startTime) / 1000);

        //总天数
        const days = Math.floor(diffTime / 86400);
        //计算年
        const year = days >= 365 ? Math.floor(days / 365) : 0;
        //计算月
        const month = Math.floor((days % 365) / 30);
        //计算天
        const day = days - year * 365 - month * 30;
        //计算小时
        const hours = Math.floor(diffTime / 3600) - days * 24;
        //计算分钟
        const minutes = Math.floor(diffTime / 60) - days * 1440 - hours * 60;
        //计算秒
        const seconds =
            Math.floor(diffTime) - days * 86400 - hours * 3600 - minutes * 60;

        return {
            year: {
                name: "年",
                value: year,
            },
            month: {
                name: "月",
                value: month,
            },
            day: {
                name: "天",
                value: day,
            },
            hours: {
                name: "小时",
                value: hours,
            },
            minutes: {
                name: "分钟",
                value: minutes,
            },
            seconds: {
                name: "秒",
                value: seconds,
            },
        };
    };
    //补零
    this.prefixInteger = function(num, length) {
        return String(num).padStart(length, "0");
    };
    //时间显示白名单
    this.timeWhitelist = ["seconds"];
    //操作dom
    this.elapsedModifyDom = function() {
        const eTime = this.elapsedTime(this.time);
        let infoText = "";
        Object.keys(eTime).forEach((key) => {
            if (eTime[key].value > 0 || this.timeWhitelist.includes(key)) {
                infoText +=
                    this.prefixInteger(eTime[key].value, 2) + eTime[key].name;
            }
        });
        this.dom.innerHTML = `网站已运行:${infoText}`;
    };
}

//使用
new WebsiteElapsedTime().init({
    id: "main",
    time: "2019-12-06",
});

效果图:

0
  • 本文分类:JavaScript
  • 本文标签:时间javascript网站已运行
  • 流行热度:已超过 224 人围观了本文
  • 最后更新:2021年02月27日 - 21时19分34秒
  • 发布日期:2021年02月27日 - 21时05分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码