/*
打印一些操作提示信息
weiqiang.yang@2010-02-28
需要
1. logger.css(或者自行将以下内容添加到css文件中)
.logz{position: absolute; top: 43px; left:50%; height: 18px; margin-left: -120px; text-align:left; opacity:0.7; z-index:2048;}
.logi{display:block; background-color:#ffffae; width:240px; padding:2px; margin:5px;}
2. images目录下的图片文件
var __images = {'ok':'/images/icon_ok.gif', 'info':'/images/ico_info.gif', 'error':'/images/ico_error.gif', 'debug':'/images/ico_info.gif', 'warn':'/images/ico_info.gif'};
*/
( function() {
var NAMESPACE = 'logger';
var __options = {timeout:3000, width:200, delay:500};
var __msgZone;
var __index = 0;
var __idPfrefix = "$LOGGER-";
var __images = {'ok':'/images/icon_ok.gif', 'info':'/images/ico_info.gif', 'error':'/images/ico_error.gif', 'debug':'/images/ico_info.gif', 'warn':'/images/ico_info.gif'};
var debug = function(_msg){
__appendMsg(_msg, 'debug');
}
var ok = function(_msg){
__appendMsg(_msg, 'ok');
}
var info = function(_msg){
__appendMsg(_msg, 'info');
}
var warn = function(_msg){
__appendMsg(_msg, 'warn');
}
var error = function(_msg){
__appendMsg(_msg, 'error');
}
var __init = function(){
if(!__msgZone){
__msgZone = document.createElement('div');
__msgZone.className = 'logz';// setAttribute('className', xxx), setAttribute('class', xxx)... 还是className通用
//__msgZone.style.left = (document.body.clientWidth-__options.width)/2 +'px';
__msgZone.style.top = document.documentElement.scrollTop + 25 + 'px';
document.body.appendChild(__msgZone);
}
}
var __appendMsg = function(_msg, _type){
__init();
var _id = __idPfrefix+__index;
var _span = document.createElement('span');
_span.setAttribute('id', _id);
_span.className = 'logi';
_span.innerHTML = '<img src="'+__images[_type]+'" alt="'+_type+'"/> '+_msg;
__msgZone.insertBefore(_span, __msgZone.firstChild);
__index++;
var _f = function(){__remove(_id);}
var _timeout = __options.timeout + (__index * __options.delay);/*加个delay是如果瞬间出现了多个log,那么控制删除的速度*/
setTimeout(_f, _timeout);
}
var __remove = function(_id){
var _node = document.getElementById(_id);
__msgZone.removeChild(_node);
}
/*注册全局的对象*/
window[NAMESPACE] = {};
window[NAMESPACE].ok = ok;
window[NAMESPACE].debug = debug;
window[NAMESPACE].info = info;
window[NAMESPACE].warn = warn;
window[NAMESPACE].error = error;
})();
仿log4j的风格,引入logger.js
然后在代码里面调
logger.ok("操作成功");
logger.info("提示信息");
...
就成了
js新手,谢谢~~