JavaScript 日誌工具

來源:互聯網
上載者:User
javascript

   前些天,學了一下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" >
   發送 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" >      發送 Debug 資訊    </button><p>    <button style="color:blue" >      發送 Info 資訊    </button><p>    <button style="color:red" >      發送 Warning 資訊    </button><p>    <button style="color:black" >      發送 Error 資訊    </button><p>    <button style="color:#800000" >      發送 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" >' + 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" 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下它會隨捲軸滾動而消失

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。