木灵鱼儿

木灵鱼儿

阅读：1103

最后更新：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",
});

效果图：

文章分类 JavaScript
文章标签 时间javascript网站已运行
木灵鱼儿

木灵鱼儿

发布了 615 篇文章获得点赞 0获得阅读 1103

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 1103

相关文章

vue-i18n 的使用方式vue-i18n 的使用方式
设计模式的7个设计原则设计模式的7个设计原则
第六章 设计模式第六章 设计模式
第五章 代码复用模式第五章 代码复用模式
第四章 对象的创建第四章 对象的创建

目录树