coderun
/
demo.html


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>自定义console</title>
    <style type="text/css">
        .console_log {
            border: 1px solid #CCC;
            color: #333;
            padding: 0px 5px;
            min-height: 24px;
            line-height: 24px;
            margin-bottom: -1px;
        }

        .console_info {
            border: 1px solid #CCC;
            color: #333;
            padding: 0px 5px;
            min-height: 24px;
            line-height: 24px;
            margin-bottom: -1px;
            background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAEEklEQVQ4jbWUW0wcZRTH/998szO7O8ByWa7WmBVKE1EpjUCt1hZsk1pCqsFL6mufauJDTQypTYHY2KbGmChp+mBsfDBtNFJDArWVWlAJsqxpKYGYsiJpKVso2y3sZXZnZ2aPDyNkl23Vl05ykvnO5Tdn/ufMMCLCo7iER0IFIP5Xgru2LS8ai9cRUQUAMMYCOYrjWvB6T/jf6tjDpHBubKkxnRVH3ZUNLU9W1+Q48koAAPHwXfw1PRUNzoz1czVwTPX3T/0v8MHD3ezL7356L++ZN05sbd5nKylQ4LAxKLIVj2pATCPcW1ExOtirhye+PXzg9Zc/PX3i3QxQhhQ9F37BmfM/Hyva+cGRF7c+hzKXgMqi7G4IDH5ZgbPlLduvhVWfnDn/cf6u7bVH2/a+9OCO5cqWfXL9oe937GxiJXkcjxdY/hc8QO1j1v3A8HX4qRYAsBgB5pdTGBq8TJrvs9e0mf7eVdbaVmxo2C+xsvqT1VuaWNzgcDmASMKyW4srGPV6Mer1YnLiKsIaENYAhwRwLqC6romxsvqTGxr2S1lSLN1b3iY9v3tTocKRNIG7EUAWAS4AE0EXZLHRGl5lI0JhIGEATglgAApzOGye3ZuWfvNuAzCUASZR2eMo3wzOATKBuWWrSOLAO9uBV5+18r745jK+XtllHWJWjkMS4CjfDE1U9mSBmdPtkR1OMALs67Y7lTZvMuJZcUaA7HCCOd2eLClWAZwDEsssFNO+TwbAYcuMm5T58Ewp1OCsFlcBUmCX1iWlgxlgXweOaYAWV0FqcHbVt1bCjNhFbWEcIdUqTDfOMzteHw+pgLYwDmbELmaBi4vyR/TZgRs3QwQi63VXLb1jgWXGiICbIYI+O3CjuCh/JAt8e+xckhZ87cv+KzQxb22DXbQskdAQCNxBIHAH4XB4zS9xYGIeWPZfIVrwtd8eO5fM0hgAzna397596PPjM/aCIyLfgh1VgI0DQ37Chd91qxO5CTk2QDeB4T+BmT+uQr92+qOz3e296Sze1dW1dnhq4xMIBBYHfZe+ioRUNM0aldwp21CUKyI/3wUl1wUm5WImCPw4GcctX4+evHqq/UBb0/H3D76ZMdCH/zar9j5tOis6eEXjK7bimhxHnhsAEA8HoS9NRc2A9weuBj6cGjg16fF4surZyMgIOjs7+fT0tBiJRKRkMimZpimlUikbEdnI5iogu7uOBLEcAFjKWGCJpXGmh0OMMV0QBF0QhKQkSUlFUZIej0fv6OgwRV3XoaoqDMNgpmkKRLRqHIBI2v0EtPs+BvB/ts0kwABjIoAUEaWISDBNUzAMg6mqyqLR6IOl6OvrY8PDw5ibm2OhUIipqopEIsEAwG63kyzLcLvdVFpaSs3NzWhtbc2C/A18nMDdJnOGEAAAAABJRU5ErkJggg==") no-repeat scroll 0 1px #EBF5FF;
            padding-left: 30px;
        }

        .console_warn {
            border: 1px solid #CCC;
            color: #333;
            padding: 0px 5px;
            min-height: 24px;
            line-height: 24px;
            margin-bottom: -1px;
            background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAD/ElEQVQ4jbWUX2gcVRSHv3tndmaTTbJJSJNWaXVNCUVjFbEWlb4U9aEYjRYURHwqKIIvgqX0oZEi+CIqCBYUjVhE8aW0xAfxSQhpSaVqETWpDdhtbWvS/NvZ2dm5c+/xIUmTdlN86oUDw71zvnvu7xx+SkS4HUvfFirg3/Lk/Lcw9tp2l9lBE8ujzrBBaWK/iT+8UI+osPMHXpxKbpWu1pNCjnZtsXH6fm2xddAWd3iqow/d3I5YgyxegpnThHpqMiiq/Xpw/DjFvv8Huy86dtTn7PF6ftem4P7nULkmCAso7YEIklQQEbLyGeT8V66wITmsd75zWPe/IbcE2+HOu+vz2UlT3LMx2PYEKNAB5LY9gy50YzPDX99/wF1dnYgFO3cR+8sRCj3J6/6+hSNrwdebZ0+/rbI4+yjV/RuD3p34YUTYHhG2RmhtlyQCrF4gbI8IWiP89iJ667Mkc7yXfdp597pgd+bDHWkU7An6dhG2V8nlI7SLwEQgdjUjq6GyCE9HhMUq4ebN2KC32Rq7f31wJnspbtX5DQpNFbI1IW4NOAZTBVNFZVVyzTFBaTs2YTD9vDdY+e36uNlUHg96N6OJwdzU4pWKRcAmS5etNAkIu1upTbVsktpsCZi4AYx4PX5b01JFN6/lPZPW0GYeFq+CqYDS0HQH2m9BtxaRuNrdCFYkykVgwkZwMg1AdWGa5sppCL3Vs2oZOh5A6wznqDdIgbMTMjvRT2cJ1HKiOMiqpJdHubLQxJW/f2Nr3uMGJxCBhQmkNmsEf6oBLKK+swvX9nragBcCArYOOLzFYdpqn9EGtBVyDQ9yaYKrmfH8yz/ONFas88eyhdq7fmtzz2o9CvDwtjxNe74bcZbs3FG0tzolApi5CGc5onseXMWtfBTevDpvU4bS6XmcFcBbjd5XYPsB7H1vce4K1/dFPGwlwszXxlTxnm/WvuIGd/P7Bj4xEyceVurffbliEZVvQSnFzO8nuFw/ibMZTRoEjZgUV52nfq1eFpd7oeXVn+1aVoMJVYaf1HJp/HCuRQ4EbdpTuTx4wdJoIeAyxCTY2JAuMm5dsLd4cObizbqva5vTF/5EDz/2kO9lB3PNPOWFtC6bGzbFmhpnTaI+nsmVvgxeOpaWSqUGhhobG2NoaMibnJz0K5VKkKZpYK0NnHM5Eck9cqdqf/5e3d/RpLpqRuo//ePOfX1WLljBKKWM1tpordMgCNJCoZCWSiVz6NAh6xtjiOOYLMuUtVaLyEp4gH+qbOunyvbX5Y4pwAK+UkoAJyJORLS1VmdZpuI4VlEUrS/FyMiIGh0dpVwuq9nZWRXHMUmSKIB8Pi9hGNLV1SU9PT2ye/duBgYGGiD/AVNZApv23zD/AAAAAElFTkSuQmCC") no-repeat scroll 0 1px #FFFFC8;
            padding-left: 30px;
        }

        .console_error {
            border: 1px solid #CCC;
            color: #FF0000;
            padding: 0px 5px;
            min-height: 24px;
            line-height: 24px;
            margin-bottom: -1px;
            background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAACYQAAAmEBwTBV+gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAQHSURBVDiNtZVtbxRVFMd/596ZnS1L210otMB2t62gmKA2gVLtC5UgaGi0Eg2JfgY+AdAWWq0fgKJGE33ZqCQF5EFqCIoJ0RoTXpRATHjY0hYa2i6d7XZ2u7tzfbHttlgKiYn/5M5N7j33N+fMOfeMGGP4P2Q9yyCxSloUxBAioCKIyviW1R9/5N152jlZyeORkOwz6A5VVdWsa2uxamOAonB/hPzoCH4yOahE922acHsxJv9M8L2QbETbp/SmaNOqtv1Yz20BgeJD5ichf+c23oWzFMbHB4IZ82HVw4epFcET66R8Nu9cKdv9diNbnsefm6Ns46YSbCk4OzmF0gpz+xaZ3369ZgK6tfbm8NgCSy2+QixPVp8MNr/WmF+zlqnECNlwFVODg/gpF991i3PKJTV0HXdiisnbCfIVYZztOxoV1qmlHpfAo9Xhg1a8fm+hJorrptnyzbfE2ttRL71C8q9r+KkUJpVi5ubfeNqm4Xgvm7/6GncySWFdNToWbxp5+YV9y8DGtj+26hvw3WnKtr6ICgYBiB1pR2/fwaOh68zcukUmVM7mE58jWqMch+DWrRSmXaxYHB1wOh4DJ+pq6iUcaUIUAccmd+ki944dLYUV6zyKtfNVsmvWsfmLL0HrYqK7jpH/7RecUBkoBRWVzWMtO1tgvo4tJ7BftMafngbbYnWkEvfsGRKFAvGu7iK8qxt8vwgAhjs7mLv0MxWxKH46Db6PaI2xVAy4WrwglhM0+Rz5sVEktAoVClERqcQ908/dQoG6T3vm4ytC7x4+TG7gAhXRDZjZWUw2g8lmAUE5gUjJYyydFKVAFORy+G6qCMnlyD94AIVCKfxiQgwmmynaLZSiZYEojKhFsAScZNFAFY2UYnY6hX5zNw3He0ueLqiup4eEVqR+PEV5TTUoQUQWwJnFqrDVMHYAbBuxbdKpNNa+d2noPbEY/qFD3D18qASPd39CsO0DZianEMsGuziU2P2w5Obdf6Pld5Q0Z9Oz8NY71PV8VoIk2o+QPXcGEJzW94h3dy/udXTA1Ss4kTCIDNZ839/8WB2LY3dh20gwSObGDXzPm89+J9mfzlFRG6UiFiU7cJ7ho50A+J6Hd30IFQwiWiNK9ZV4S3vFg9Y9g4hqyqZm8Naup2zbNuYuXqA8uuGx7z8zeh979x68oSHK0i7BcCVgBqrHk61cvpxfBp5o27uxoALnjEjjnOdh8gWcSBj5V/IAMo+mUZZFYHUIkGvay71edfp0qcMta5sTbW3lBUefRMneZbQn608t+fer+k6PLV18cqPftcsar15zEOEjDDtXAP5hjHTVfHfy/JM2V/yDLGj8wIF6Uf5+IyYoRpIGPymih9f3/XD1aeeeCf6v+gfLYZXwkd5f2QAAAABJRU5ErkJggg==") no-repeat scroll 0 1px #FFEBEB;
            padding-left: 30px;
        }

        .console_group {
            margin-top: 20px;
            font-size: 16px;
            font-weight: bolder;
        }

        .console_log_function {
            color: green;
        }
    </style>
    <script type="text/javascript">
      var console = {
        assert: function () {
        },
        clear: function () {
        },
        count: function () {
        },
        debug: function () {
        },
        dir: function () {
        },
        dirxml: function () {
        },
        error: function () {
          var args = Array.prototype.slice.call(arguments);
          consoleHelper.showerror(args.join(" "));
        },
        exception: function () {
        },
        group: function (name) {
          consoleHelper.showgroup(name);
        },
        groupCollapsed: function () {
        },
        groupEnd: function () {
        },
        info: function () {
          var args = Array.prototype.slice.call(arguments);
          if (args.length == 1) {
            if (arguments[0] instanceof Array) {
              consoleHelper.showinfo("[" + args[0] + "]");
            } else if (arguments[0] instanceof Function) {
              consoleHelper.showinfo(args[0], "console_log_function");
            } else {
              consoleHelper.showinfo(args[0]);
            }
          } else {
            consoleHelper.showinfo(args.join(" "));
          }
        },
        log: function () {
          var args = Array.prototype.slice.call(arguments);
          if (args.length > 1) {
            var i = 1, hasstyle = false;
            if (args[0].indexOf("%c") == 0) {
              args[0] = args[0].replace(/%c/, "");
              i = 2;
              hasstyle = true;
            }
            for (; i < args.length; i++) {
              if (/%s|%d|%i|%o/.test(args[0])) {
                args[0] = args[0].replace(/%s|%d|%i|%o/, args[i]);
              } else {
                break;
              }
            }
            if (i < args.length) {
              args[0] = args[0] + " " + args.slice(i).join(" ");
            }
            if (hasstyle) {
              consoleHelper.showlog(args[0], args[1]);
            } else {
              consoleHelper.showlog(args[0]);
            }
          } else if (args.length == 1) {
            if (arguments[0] instanceof Array) {
              consoleHelper.showlog("[" + args[0] + "]");
            } else if (arguments[0] instanceof Function) {
              consoleHelper.showlog(args[0], null, "console_log_function");
            } else {
              consoleHelper.showlog(args[0]);
            }
          } else {
            consoleHelper.showlog("");
          }
        },
        memoryProfile: function () {
        },
        memoryProfileEnd: function () {
        },
        profile: function () {
        },
        profileEnd: function () {
        },
        table: function () {
        },
        time: function () {
        },
        timeEnd: function () {
        },
        timeStamp: function () {
        },
        trace: function () {
        },
        warn: function () {
          var args = Array.prototype.slice.call(arguments);
          if (args.length == 1) {
            if (arguments[0] instanceof Array) {
              consoleHelper.showwarn("[" + args[0] + "]");
            } else if (arguments[0] instanceof Function) {
              consoleHelper.showwarn(args[0], "console_log_function");
            } else {
              consoleHelper.showwarn(args[0]);
            }
          } else {
            consoleHelper.showwarn(args.join(" "));
          }
        }
      };
      var consoleHelper = {
        showlog: function (val, style, cla) {
          if (cla) {
            cla = "console_log " + cla;
          } else {
            cla = "console_log";
          }
          this.show(val, style, cla);
        },
        showinfo: function (val, cla) {
          if (cla) {
            cla = "console_info " + cla;
          } else {
            cla = "console_info";
          }
          this.show(val, null, cla);
        },
        showwarn: function (val, cla) {
          if (cla) {
            cla = "console_warn " + cla;
          } else {
            cla = "console_warn";
          }
          this.show(val, null, cla);
        },
        showerror: function (val) {
          this.show(val, null, "console_error");
        },
        showgroup: function (val) {
          if (!val) {
            val = "";
          }
          this.show(val + ":", null, "console_group");
        },
        show: function (val, style, cla) {
          if (document.getElementById("showconsole")) {
            var div = document.createElement("div");
            if (div.setAttribute) {
              if (style) {
                div.setAttribute("style", style);
              }
            } else {
              if (style) {
                div = document.createElement("<div style=" + style + ">");
              }
            }
            if (cla) {
              div.className = cla;
            }
            var oText = document.createTextNode(val);
            div.appendChild(oText);
            document.getElementById("showconsole").appendChild(div);
          }
        }
      };
      window.onload = function () {
        console.group("log");
        console.log('%c a %s This is red text on a green background', 'color:red; background-color:#EEE');
        console.log("The %%s jumped over %d tall buildings", 1, "abc", 1);
        console.log("I am %s and I have:", "abc", "bcd", "cde");
        console.log("abc", 1);
        console.log([1, 2, 3, 4, 5]);
        console.log();
        console.log(test);
        console.group("info");
        console.info('%c a %s This is red text on a green background', 'color:red; background-color:#EEE');
        console.info("The %%s jumped over %d tall buildings", 1, "abc", 1);
        console.info("I am %s and I have:", "abc", "bcd", "cde");
        console.info("abc", 1);
        console.info([1, 2, 3, 4, 5]);
        console.info();
        console.info(test);
        console.group("warn");
        console.warn('%c a %s This is red text on a green background', 'color:red; background-color:#EEE');
        console.warn("The %%s jumped over %d tall buildings", 1, "abc", 1);
        console.warn("I am %s and I have:", "abc", "bcd", "cde");
        console.warn("abc", 1);
        console.warn([1, 2, 3, 4, 5]);
        console.warn();
        console.warn(test);
        console.group("error");
        console.error('%c a %s This is red text on a green background', 'color:red; background-color:#EEE');
        console.error("The %%s jumped over %d tall buildings", 1, "abc", 1);
        console.error("I am %s and I have:", "abc", "bcd", "cde");
        console.error("abc", 1);
        console.error([1, 2, 3, 4, 5]);
        console.error(test);
      }

      function test() {
        alert("abc");
        alert("abc");
        alert("abc");
        alert("abc");
        alert("abc");
        alert("abc");
        alert("abc");
        alert("abc");
        alert("abc");
      }
    </script>
</head>
<body>
<h1>自定义console(Artwl.cnblogs.com)</h1>
<div id="showconsole"></div>
</body>
</html>