木灵鱼儿

木灵鱼儿

阅读：1429

最后更新：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网站已运行
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 0获得阅读 1429

版权申明

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

one
two
three

关于作者

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

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译

目录树