您的位置：首页 > Web前端 > JavaScript

JavaScript 日志工具

2006-08-11 10:16 399 查看
前些天，学了一下AJAX，感觉对于JavaScript的控制有些麻烦，尤其是经常使用Alert（）语句来输出一些记录，真是很不方便。于是到网上搜索了一些JavaScript的Logging工具，感觉都有些小缺点，不适合自己。于是，自己干脆也写了一个Logging工具，使用起来觉得还不错。这里就介绍给大家看看。

这个工具仅仅是一个js脚本文件。使用起来很方便，只要把这个脚本文件和Html文件放在同一目录下，然后使用在<Head>和</Head>中间加入如下一条语句即可：
<script src="mxjLogger.js" type="text/javascript"></script>

这是一个简单的JavaScript的Logger工具，与Java的Log4j有些相似。 分成5个级别，由低到高分别是：debug info warn error fatal 。默认是显示并且处于debug级别记录激活状态。 快捷键是 Alt + D ,可以调出或隐藏这个工具。滚动时，它不会随滚动条而滚动。

一旦引入这个js脚本，那么一共有5个方法可以在JavaScript中调用，分别是debug() info() warn() error() fatal().

在<script></script>中调用，如下：
部分语句
<script src="mxjLogger.js" type="text/javascript"></script>

<script type="text/javascript">
debug("欢迎使用 Javamxj 开发的 JavaScript Logger");
debug("我的blog：http://blog.csdn.net/javamxj/")
info("当前时间是：" + new Date());
</script>
也可以直接在方法中调用，如下：
部分语句
<button style="color:green" onclick="debug('发送 Debug 信息')" >
发送 Debug 信息
</button>
完整的测试文件testLogger.html和脚本文件mxjLogger.js如下：

testLogger.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <title>测试Javascript Logger</title>
  
  <script src="mxjLogger.js" type="text/javascript"></script>
  
  <script type="text/javascript">
    debug("欢迎使用 Javamxj 开发的 JavaScript Logger"); 
    debug("我的blog：http://blog.csdn.net/javamxj/")    
    info("当前时间是：" + new Date());    
  </script>
  
  
  <style type="text/css">
    <!--
      button {height:25px;width:150px}
    -->
  </style>
</head>

<body>
  <h1>欢迎使用 Javamxj 开发的 JavaScript Logger</h1>
    
    <p>分为5个级别，点击每个按钮都会显示相应的信息</p>    
    
    <button style="color:green" onclick="debug('发送 Debug 信息')" >
      发送 Debug 信息
    </button><p>
    <button style="color:blue" onclick="info('发送 Info 信息')">
      发送 Info 信息
    </button><p>
    <button style="color:red" onclick="warn('发送 Warning 信息')">
      发送 Warning 信息
    </button><p>
    <button style="color:black" onclick="error('发送 Error 信息')">
      发送 Error 信息
    </button><p>
    <button style="color:#800000" onclick="fatal('发送 Fatal 信息')">
      发送 Fatal 信息
    </button><p>
  
</body>

<script> 
  document.write(new Array(100).join("<br>")) 
</script>

</html>





mxjLogger.js

/*
  这是一个简单的JavaScript的Logger工具，与Java的Log4j有些相似。
  分成5个级别，由低到高分别是：debug info warn error fatal 
  默认是显示并且处于debug级别记录激活状态
  快捷键是 Alt + D ,调出这个工具
  作者：javamxj
  日期：2006年8月8日
  版本：1.0
  
  我的blog：http://blog.csdn.net/javamxj/
  我的email：javamxj@gmail.com
*/

var _logger = true;              // 是否激活输出
var log_area;                    // 记录区域
var n=0;

// ------------------------------
// 级别设置及其所对应输出的颜色
// ------------------------------
var levelArray = ["DEBUG","INFO","WARN","ERROR","FATAL"];    
var colorArray = ["green","blue","red","black","#800000"];

var arr = new Array();
for (var i=0; i<levelArray.length; i++){
　arr[i] = "<OPTION>" + levelArray[i] + "</OPTION>";
}

// ------------------------------
// 用document.write写出相关的HTML语句
// ------------------------------
document.write('<div ID = "javamxj_log" style="position:fixed !important;position:absolute; top:310px;width:90%; z-index:2000;display:block;border-style:groove;border-width:thin;">' +
               '<div style="background-color:#EFE8E0">' + 
               '<input type = "button" name = "clear" value = "清除"  onclick = "$(/'status_area/').innerHTML=/'/'" />    '+
               '<input type = "button" id="javamxj_run" name = "javamxj_run" value = "停止|隐藏 记录"  onclick = "toggleLog()"/>        '+
               '级别: <select id="levelSelect" onchange="changeLevel()" >' + arr.join() + "</select></div>" + 
               '<div id = "status_area" name = "status_area" style="height:250px;overflow:auto;opacity:0.8; filter:alpha(opacity=80);"></div>' +
               '</div>'
);

// ------------------------------
// 滚动时固定在原位置
// ------------------------------
document.body.onscroll=function(){ 
  javamxj_log.style.posTop=document.body.scrollTop+document.body.clientHeight-280
}

// ------------------------------
// 增加快捷健 "Alt+D"
// ------------------------------
document.onkeydown = function(){         
    var accessElement = document.createElement('span')
    accessElement.innerHTML = '<button style="position:absolute;top:-100px" onclick="javascript:toggleDiv()" accesskey="d"></button>'
    document.body.appendChild(accessElement);
}

// ------------------------------
// 借鉴 protype，将 document.getElementById() 包装成 $() ,方便使用
// ------------------------------
function $(){ 
  var elements=new Array();   
  for(var i=0;i<arguments.length;i++){    
    var element=arguments[i];       
    if(typeof element=='string')
    element=document.getElementById(element);   
    
    if(arguments.length==1)
    return element;   
    
    elements.push(element);     
  }
  return elements;  
}

// ------------------------------
// 获得当前时间
// ------------------------------
function getCurrentTime(){
  
  var now=new Date(); 
  var hours=now.getHours(); 
  var minutes=now.getMinutes(); 
  var seconds=now.getSeconds()
  var timeValue=""+((hours>12)?hours-12:hours); 
  if(timeValue=="0")timeValue=12; 
  timeValue+=((minutes<10)?":0":":")+minutes; 
  timeValue+=((seconds<10)?":0":":")+seconds; 
  timeValue+=(hours>=12)?" (下午)":" (上午)"; 
  
  return timeValue;   
}
  
// ------------------------------
// 包装5个不同级别的输出方式
// ------------------------------
function debug(message) { logger(message, 0); }
function info(message)  { logger(message, 1); }
function warn(message)  { logger(message, 2); }
function error(message) { logger(message, 3); }
function fatal(message) { logger(message, 4); }

// ------------------------------
// 输出记录
// ------------------------------
function logger( message,num_level) {
  var color;
  var level;    
    
  if (_logger) {      
    color = colorArray[num_level];
    level = levelArray[num_level];
    display = (num_level >= $("levelSelect").selectedIndex ) ? "block" : "none" ;
        
    if(display == "block"){
      n=n+1;          
    }
    bg_Color = ((n % 2) ==0)? "#FFF" : "#F6F6F6";
      $("status_area").innerHTML = '<div id=' + num_level + ' style="background-color:' + bg_Color + ';display:' + display +  '"><strong style="COLOR: ' + color + '">' + level + ': ' + '</strong>' + getCurrentTime()   + ": " + message + '</div>' + $("status_area").innerHTML;
  }    
}

// ------------------------------
// 改变记录级别
// ------------------------------
function changeLevel(){
  selectedLevel = $('levelSelect').selectedIndex;
  
  var m=0;
  var divs = $("status_area").getElementsByTagName("div");
  for(i=0;i<divs.length;i++){          
      divs[i].style.display =(divs[i].id >= selectedLevel)? "block" : "none";      
      if(divs[i].style.display == "block"){
        m=m+1;      
        divs[i].style.backgroundColor =((m % 2) ==0) ? "#FFF" : "#F6F6F6";
      }      
  }
}

// ------------------------------
// 改变记录状态
// ------------------------------
function toggleLog() {
  var disp=$('status_area').style.display;
  if ( disp == 'none' ) {
    $('status_area').style.display = 'block';
    $('javamxj_run').value = '停止 | 隐藏 记录';
    _logger = true;
  } else {
    $('status_area').style.display = 'none';
    $('javamxj_run').value= '显示记录';
    _logger = false;
  }
}

function toggleDiv() {
  var e = $("javamxj_log");
    if (e) {
      e.style.display = ((e.style.display != 'block') ? 'block' : 'none');
    }
}



效果如下：





存在的问题：
在IE中使用时，要注意母体Html文件引用的DOCTYPE声明如果是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
则在IE下它会随滚动条滚动而消失。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航