一个Javascript的Logger Console(带演示)

最新推荐文章于 2024-08-24 09:39:06 发布

原创最新推荐文章于 2024-08-24 09:39:06 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #filter #null #div #date

JSLogger是一款用于网页的日志记录工具，可在页面中显示半透明的日志窗口，并支持动态开关及视图切换。通过简单的API调用即可实现日志记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个简单的Javascript日志控制台，能动态地在当前页面中添加一个半透明窗口。
初始化代码如下：
JSLogger.enable(true);

而在js代码中使用
JSLogger.debug( "your log message");

就可以将日志记录到该窗口中。
下面是该Logger的演示（注意看最左侧的边栏，鼠标单击可切换）

附上几幅实际应用中的截图：
日志窗口的截图如下

鼠标单击可以缩小到侧边栏（如下图）

完整的JSLogger实现如下：
JSLogger = function()
{
    this.m_bFullShow = false;

    this.m_bEnabled = false;
    this.isEnabled = function() {
        return this.m_bEnabled;
    };

    this.enable = function(bEnabled) {
        if (this.m_bEnabled != bEnabled) {
            this.m_bEnabled = bEnabled;
            this.updateView();
        }
    };

    /*    数组实现的循环队列    */
    this.m_bOverflowed = false;
    this.m_nMaxLine = (document.body.clientHeight / 14).toFixed();
    this.m_nBeginLine = 0;
    this.m_nEndLine = -1;
    this.m_msgLines = new Array();

    this.getMaxLine = function() {
        return this.m_nMaxLine;
    };

    this.setMaxLine = function(nMaxLine) {
        this.m_nMaxLine = nMaxLine;
    };

    this.switchView = function() {
        var obj = this.getObject();
        var contentObj = this.getContentObject();

        this.m_bFullShow = !this.m_bFullShow;

        if (obj && contentObj) {
            if (this.m_bFullShow) {
                obj.style.width = "100%";
                contentObj.style.DISPLAY = "block";
            }
            else {
                obj.style.width = "8px";
                contentObj.style.DISPLAY = "hidden";
            }
        }
    };

    this.updateView = function() {
        var obj = this.getObject();

        if (this.m_bEnabled) {
            if (obj == null) {
                var strInnerHTML = "";

                obj = document.createElement("div");
                obj.id = this.getID();

                if (this.m_bFullShow) {
                    obj.style.cssText = "position:absolute; display:block; " +
                                        "z-index:999; top:0px; left:0px; " +
                                        "width:100%; height:100%; " +
                                        "font-size:12px; overflow:auto; " +
                                        "border-right: 8px solid #333333; " +
                                        "opacity:0.7; filter:alpha(opacity=70); color:white; background:black";
                }
                else {
                    obj.style.cssText = "position:absolute; display:block; " +
                                        "z-index:999; top:0px; left:0px; " +
                                        "width:8px; height:100%; " +
                                        "font-size:12px; overflow:auto; " +
                                        "border-right: 8px solid #333333; " +
                                        "opacity:0.7; filter:alpha(opacity=70); color:white; background:black";
                }

                strInnerHTML += "<div style=/"display:block;/" id=/"" + this.getContentID() + "/" ></div>";

                obj.innerHTML = strInnerHTML;

                obj.onclick = function() { JSLogger.getInstance().switchView(); };

                document.body.appendChild(obj);
            }
        }
        else {
            if (obj) {
                obj.style.display = "none";
            }
        }
    };

    this.update = function() {
        var obj = this.getObject();
        if (obj) {
            var strInnerHTML = "";

            strInnerHTML += "<div style=/"display:block;/" id=/"" + this.getContentID() + "/" ></div>";

            if (this.m_bOverflowed) {
                for (var i = this.m_nBeginLine-1; i>=0; i--) {
                    strInnerHTML += "<a>" + this.m_msgLines[i] + "</a></br>/r/n";
                }

                for (var i = this.m_nMaxLine-1; i>=this.m_nBeginLine; i--) {
                    strInnerHTML += "<a>" + this.m_msgLines[i] + "</a></br>/r/n";
                }
            }
            else {
                for (var i = this.m_nEndLine; i>=this.m_nBeginLine; i--) {
                    strInnerHTML += "<a>" + this.m_msgLines[i] + "</a></br>/r/n";
                }
            }

            obj.innerHTML = strInnerHTML;
        }
    };

    this.getID = function() {
        return "JSLogger_Instance";
    };

    this.getContentID = function() {
        return "JSLogger_Instance_Content";
    };

    this.getObject = function() {
        return document.getElementById(this.getID());
    };

    this.getContentObject = function() {
        return document.getElementById(this.getContentID());
    };

    this.send = function(messages) {
        this.m_nEndLine++;
        if (this.m_nEndLine >= this.m_nMaxLine) {
            this.m_nEndLine = 0;
            this.m_bOverflowed = true;
        }


        if (this.m_bOverflowed) {
            this.m_nBeginLine++;
            if (this.m_nBeginLine >= this.m_nMaxLine) {
                this.m_nBeginLine = 0;
            }
        }

        this.m_msgLines[this.m_nEndLine] = (new Date()).toUTCString() + ": " + messages[0];
    };
};

JSLogger.instance = null;

JSLogger.getInstance = function() {
    if (JSLogger.instance == null) {
        JSLogger.instance = new JSLogger();
        setTimeout("JSLogger.onTimer()", 1000);
    }

    return JSLogger.instance;
};

JSLogger.enable = function() {
    var logger = JSLogger.getInstance();

    if (logger) {
        logger.enable(arguments);
    }
};

JSLogger.debug = function() {
    var logger = JSLogger.getInstance();

    if (logger.isEnabled()) {
        logger.send(arguments);
    }
};

JSLogger.onTimer = function() {

    var logger = JSLogger.getInstance();
    if (logger.isEnabled()) {
        logger.update();
    }

    setTimeout("JSLogger.onTimer()", 1000);
};