JavaScript利用DOM给页面添加内容

自定义一个log函数,输出传入函数的对象或者信息.Log.js// JScript source codefunctionlog(category, message, object) {// If this category is explicitly disabled, do nothingif(log.options[category ...

diaojianli4622

206人浏览 · 2010-05-14 14:16:00

diaojianli4622 · 2010-05-14 14:16:00 发布

自定义一个log函数,输出传入函数的对象或者信息.

Log.js
// JScript source code

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); } // Create a table to display the properties of the specified object log.makeTable = function (object, level) { // If we've reached maximum recursion, return a Text node instead. if (level > log.options.maxRecursion) return document .createTextNode(object. toString ()); // Create the table we'll be returning var table = document .createElement(" table "); table.border = 1; // Add a Name|Type|Value header to the table 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); // Get property names of the object and sort them alphabetically var names = []; for ( var name in object) names.push( name ); names.sort(); // Now loop through those properties for ( var i = 0; i < names. length ; i++) { var name , value, type; name = names[i]; try { value = object[ name ]; type = typeof value; } catch (e) { // This should not happen, but it can in Firefox value = " "; type = " unknown "; }; // Skip this property if it is rejected by a filter if (log.options.filter && !log.options.filter( name , value)) continue ; // Never display function source code: it takes up too much room if (type == " function ") value = " {/*source code suppressed*/} "; // Create a table row to display property name, type and value 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)); // For objects, recurse to display them as tables if (type == " object ") rowValue.appendChild(log.makeTable(value, level + 1)); else rowValue.appendChild( document .createTextNode(value)); // Add the cells to the row, and add the row to the table row.appendChild(rowName); row.appendChild(rowType); row.appendChild(rowValue); table.appendChild(row); } // Finally, return the table. return table; } // Create an empty options object log.options = {timestamp: true }; // Utility versions of the function with hardcoded categories log.debug = function (message, object) { log(" debug ", message, object); }; log.warn = function (message, object) { log(" warning ", message, object); }; // Uncomment the following line to convert alert() dialogs to log messages // function alert(msg) { log("alert", msg); }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Log</title> <mce:script type="text/javascript" src="Log.js" mce_src="Log.js"></mce:script>  <link rel="stylesheet" type="text/css" href="log.css" mce_href="log.css" />  </head> <body> <mce:script type="text/javascript"></mce:script>  <button οnclick="makeRectangle(1,2,3,4);">Make Rectangle</button>   <div id="debug_log"></div> </body> </html>

log.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 { /* Give our logging area a title */
    content: "Debugging Messages";
    display: block;
    text-align: center;
    font: bold 18pt sans-serif ;
}

.debug_message { /* Place a thin black line between debug messages */
    border-bottom: solid black 1px;
}

运行结果: