注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

你自己的调试日志  

2010-04-17 01:08:17|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 1.建立myLogger()对象
function myLogger(id){
//公有属性生成窗口的id
id=id||'HZLogWindow';
//私有的属性 logWindow
var logWindow =null;
//私有方法 createWindow  用于创建日志窗口
var createWindow=function(){};
//特权方法 writeRaw  向日志窗口添加一条新的记录
this.writeRaw =function(message){ };
}
//公有方法
myLogger.property={
write: function (message){},   //写日志
header:function (message){}  //写标题
};

if(!window.HZ){window['HZ']={};}

window['HZ']['log']=new myLogger();

2.具体每个方法的实现
实现myLogger.createWindow(){
//取得日志窗口在浏览器中的位置
var  browserWindowSize=HZ.getBrowserWindowSize();
var top=((browserWindowSize.height-200)/2)||0;
var left=((browserWindowSize.width-200)/2)||0;

//创建日志窗口的DOM节点
//使用私有的属性维护引用
logWindow=document.createElement('UL');
//指定ID
logWindow.setAttribute('id',id);

//在浏览器中放置日志窗口的位置
logWindow.style.position='absolute';
logWindow.style.top=top+'px';
logWindow.style.left=left+'px';
//设定大小 并允许内容滚动
logWindow.style.width='200px';
logWindow.style.height='200px';
logWindow.style.overflow='scroll';

//添加一些样式
logWindow.style.padding='0';
logWindow.style.margin='0';
logWindow.style.border='1px soild black';
logWindow.style.backgroundColor='white';
logWindow.style.listStyle='none';
logWindow.style.font='10px Verdana,Tahoma,Sans';

//将窗口添加到浏览器页面中
document.body.appendChild(logWindow);

}



必须在HZ的库中添加一个计算浏览器的大小的方法
function getBrowserWindowSize(){
var de=document.documentElement;
return {
'width':(window.innerWidth||(de&&de.clientWidth)||document.body.clientWidth),
'height':(window.innerHeight||(de&&de.clientHeight)||document.body.clientHeight)
}
}

myLogger.writeRaw()方法

this.writeRaw = function(message){
//如果初始的敞口不存在,则创建它 
if(!logWindow)  createWindow();
//创建列表项并添加样式
var li =document.createElement('LI');
li.style.padding='2px';
li.style.border='0';
li.style.borderBottom='1px dotted black';
li.style.margin='0';
li.style.color='#000';
li.style.font='9px';

//为日志节点添加信息
if(typeof message == 'undefined'){
li.appendchild(document.createTextNode('message was not defined'));
}else if(typeof li.innerHTML!=undefined){
li.innerHTML=message;
}else {
li.appendchild(document.createTextNode(message))
}

logWindow.appendChild(li)

return true;      
};

myLogger.write() 和myLogger.header() 方法

myLogger.prototype={
write : function(messsage){   
if(typeof message =='string' && message.length==0){
return this.writeRaw('log: null message');
}

if(typeof message !='string' ){
if(message.toString) return this.writeRaw(message.toString());
else return  this.writeRaw(typeof message);
}

message =message.replace(/</g."&lt;").replace(/>/g,"&gt;");
return this.writeRaw(message);
},

header:function(message){
message = '<span style="color:white;background-color:black;font-weight:bold;padding:0px 5px;">' + message + '</span>';
return this.writeRaw(message);
}

}



最后试一下效果
测试代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>myLogger Test Page</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="../../ADS-final-verbose.js" type="text/javascript"></script>
<script type="text/javascript" src="myLogger.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>myLogger Test Page</h1>

<div id="where-from">
From <a href="http://advanceddomscripting.com" title="AdvancED DOM Scripting">AdvancED DOM Scripting</a>
| <a href="http://www.amazon.com/exec/obidos/ASIN/1590598563/jeffreysamb05-20" title="Buy it on Amazon">Paperback</a>
</div>

<script>
ADS.log.write(document.getElementsByTagName('a')[0].href);
</script>
</body>

</html>

结果图
  你自己的调试日志 - zhenghaoju700 - zhenghaoju700 的博客

代码下载地址  http://advanceddomscripting.com


  评论这张
 
阅读(182)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017