js操作提示小工具


/*
打印一些操作提示信息
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新手,谢谢~~
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值