学过过程中打的 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Log</title> <mce:script type="text/javascript"><!-- function log(category, message, object){ // If this category is explicitly disabled, do nothing if (log.options[category + "Disabled"]) return; // Find the container var id = category + "_log"; var c = document.getElementById(id); // If there is no container, but logging in this category is enabled, // create the container. if (!c && log.options[category + "Enabled"]) { c = document.createElement("div"); c.id = id; c.className = "log"; document.body.appendChild(c); } // If still no container, we ignore the message if (!c) return; // If timestamping is enabled, add the timestamp if (log.options.timestamp) message = new Date() + ":" + (message ? message : ""); // Create a element to hold the log entry var entry = document.createElement("div"); entry.className = category + "_message"; if (message) { // Add the message to it entry.appendChild(document.createTextNode(message)); } if (object && typeof object == "object") { entry.appendChild(log.makeTable(object, 0)); } // Finally, add the entry to the logging container c.appendChild(entry); } log.makeTable = function(object, level){ if (level > log.options.maxRecursion) { return document.createTextNode(object.toString()); } var table = document.createElement("table"); table.border = 1; var header = document.createElement("tr"); var headerName = document.createElement("th"); var headerType = document.createElement("th"); var headerValue = document.createElement("th"); headerName.appendChild(document.createTextNode("Name")); headerType.appendChild(document.createTextNode("Type")); headerValue.appendChild(document.createTextNode("Value")); header.appendChild(headerName); header.appendChild(headerType); header.appendChild(headerValue); table.appendChild(header); var names = []; for (var name in object) names.push(name); names.sort(); for (var i = 0; i < names.length; i++) { var name, value, type; name = names[i]; try { value = object[name]; type = typeof value; } catch (e) { value = "<unknown value>"; type = typeof value; } if (log.options.filter && !log.options.filter(name, value)) continue; if (type == "function") value = "{/*source code suppressed*/}"; var row = document.createElement("tr"); row.vAlign = "top"; var rowName = document.createElement("td"); var rowType = document.createElement("td"); var rowValue = document.createElement("td"); rowName.appendChild(document.createTextNode(name)); rowType.appendChild(document.createTextNode(type)); if (type == "object") rowValue.appendChild(log.makeTable(value, level + 1)); else rowValue.appendChild(document.createTextNode(value)); row.appendChild(rowName); row.appendChild(rowType); row.appendChild(rowValue); table.appendChild(row); } return table; } log.options = {}; log.debug = function(message, object){ log("debug", message, object); }; log.warn = function(message, object){ log("warning", message, object); }; // --></mce:script> <mce:style type="text/css"><!-- #debug_log { /* Styles for our debug message container */ background-color: #aaa; /* gray background */ border: solid black 2px; /* black border */ overflow: auto; /* scrollbars */ width: 75%; /* not as wide as full window */ height: 300px; /* don't take up too much vertical space */ } #debug_log:before { content: "Debugging Message"; display: block; text-align: center; font: bold 18pt sans-serif; } .debug_message { /*下划线*/ border-bottom: solid black 1px; } --></mce:style><style type="text/css" mce_bogus="1"> #debug_log { /* Styles for our debug message container */ background-color: #aaa; /* gray background */ border: solid black 2px; /* black border */ overflow: auto; /* scrollbars */ width: 75%; /* not as wide as full window */ height: 300px; /* don't take up too much vertical space */ } #debug_log:before { content: "Debugging Message"; display: block; text-align: center; font: bold 18pt sans-serif; } .debug_message { /*下划线*/ border-bottom: solid black 1px; } </style> </head> <body> <mce:script type="text/javascript"><!-- function makeRectangle(x, y, w, h){ // This is the function we want to debug log.debug("entering makeRectangle"); // Log a message var r = { x: x, y: y, size: { w: w, h: h } }; log.debug("New rectangle", r); // Log an object log.debug("exiting makeRectangle"); // Log another message return r; } // --></mce:script> <button οnclick="makeRectangle(1,2,3,4);"> Make Rectangle </button> <div id="debug_log" class="log"> </div> </body> </html>