木灵鱼儿

木灵鱼儿

阅读:768

最后更新:2021/02/27/ 21:19:34

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

应狗群友的要求,写一个网站已经运行了多少时间的代码,本来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
文章被阅读 768

相关文章

目录树