log.js

如果您不想在开发js时用alert或者想把log记录下来您可以在页面上引入文件后写var log =new Log() log.info() log.error() log.warn() 来输出您关心

Log=function(height,top,left){
	var debugWin;
	var moveable=false;
	var leftOff=0;
	var topOff=0;
	var debugEnable=true;
	var winHeight;
	if(height==undefined)winHeight="400px";
	var winTop;
	if(top==undefined)winTop="30px";
	var winLeft;
	if(left==undefined)winLeft="700px";
	
	var init=function(){
		var logHtml=new Array();
		logHtml[logHtml.length]=buildWin.createHead();
		logHtml[logHtml.length]=buildWin.createBody();
		logHtml[logHtml.length]=buildWin.createCtrLevel();
		logHtml[logHtml.length]=buildWin.createCtrDisable();
		logHtml=logHtml.join("");
		
		debugWin=document.createElement("DIV");
		debugWin.id="debug";
		debugWin.innerHTML=logHtml;
		debugWin.style.top=winTop;
		debugWin.style.left=winLeft;
		
		document.getElementsByTagName("BODY")[0].appendChild(debugWin);

		initEvent();
	}
	
	

	var buildWin={
		createHead:function(){
			var headHtml=new Array();
			headHtml[headHtml.length]='<div id="head">';
			headHtml[headHtml.length]='<span class="title">Debug</span>';
			headHtml[headHtml.length]='<span class="minMout">0</span>';
			headHtml[headHtml.length]='<span class="maxMout">r</span>';
			headHtml[headHtml.length]='</div>';
			headHtml=headHtml.join("");
			return headHtml;
		},
		createBody:function(){
			var bodyHtml=new Array();
			bodyHtml[bodyHtml.length]='<div>';
			bodyHtml[bodyHtml.length]='<div class="body" style="height:'+winHeight+';overflow:auto" >';
			bodyHtml[bodyHtml.length]='</div>';
			bodyHtml=bodyHtml.join("");
			return bodyHtml;
		},
		createCtrLevel:function(){
			var ctrLevelHtml=new Array();
			ctrLevelHtml[ctrLevelHtml.length]='<div class="ctrLevel">';
			ctrLevelHtml[ctrLevelHtml.length]='<span class="level">';
			ctrLevelHtml[ctrLevelHtml.length]='<span><input id="info" type="checkbox" checked="true"></input><label style="color:green;" for="info">info</label></span>';
			ctrLevelHtml[ctrLevelHtml.length]='<span><input id="warn" type="checkbox" checked="true"></input><label style="color:orange" for="warn">warn</label></span>';
			ctrLevelHtml[ctrLevelHtml.length]='<span><input id="error" type="checkbox" checked="true"></input><label style="color:red" for="error">error</label></span>';
			ctrLevelHtml[ctrLevelHtml.length]='<span  id="debugClear"><button>clear</button></span>';
			ctrLevelHtml[ctrLevelHtml.length]='</span>';
			ctrLevelHtml[ctrLevelHtml.length]='</div>';
			ctrLevelHtml[ctrLevelHtml.length]='<div class="divider"><hr></div>';
			ctrLevelHtml=ctrLevelHtml.join("");
			return ctrLevelHtml;
		},
		createCtrDisable:function(){
			var ctrDisableHtml=new Array();
			ctrDisableHtml[ctrDisableHtml.length]='<div class="ctrDisable">';
			ctrDisableHtml[ctrDisableHtml.length]='<span class="page">';
			ctrDisableHtml[ctrDisableHtml.length]='<span><img id="firstPage" src="./first-page.gif"></img></span>';
			ctrDisableHtml[ctrDisableHtml.length]='<span><img id="previousPage" src="./previous-page.gif"></img></span>';
			ctrDisableHtml[ctrDisableHtml.length]='<span style="margin-top:10px">';
			ctrDisableHtml[ctrDisableHtml.length]='<input type="text" size=1 style="height:13px;width:15px;font-size:8px" value="1"/>';
			ctrDisableHtml[ctrDisableHtml.length]='</span>';
			ctrDisableHtml[ctrDisableHtml.length]='<span ><img id="nextPage" src="./next-page.gif"></img></span>';
			ctrDisableHtml[ctrDisableHtml.length]='<span><img id="lastPage" src="./last-page.gif"></img></span>';
			ctrDisableHtml[ctrDisableHtml.length]='</span>';
			ctrDisableHtml[ctrDisableHtml.length]='<span class="button">';
			ctrDisableHtml[ctrDisableHtml.length]='<img src="./pause.png"></img>';
			ctrDisableHtml[ctrDisableHtml.length]='</span>';
			ctrDisableHtml[ctrDisableHtml.length]='</div>';
			ctrDisableHtml[ctrDisableHtml.length]='</div>';
			ctrDisableHtml=ctrDisableHtml.join("");
			return ctrDisableHtml;
		}
	}

	var initEvent=function(){
		initDrag();
		initCtrWin();
		initEnableBtn();
		initCheckBoxes();
	}

	function initDrag(){
		var header=document.getElementById("head");

		header.onmousedown=startDrag;
		header.onmousemove=drag;
		header.onmouseup=endDrag;

		debugWin=header.parentNode;
	}

	function initCtrWin(){
		var header=document.getElementById("head");
		var minBtn=header.children[1];
		var closeBtn=header.children[2];
		
		minBtn.onclick=min;
		closeBtn.onclick=close;
	}

	function initEnableBtn(){
		var enableBtn=document.getElementById("debug").children[1].children[3].children[1];
		enableBtn.onclick=pause;
	}

	function initCheckBoxes(){
		var checkBoxes=document.getElementById("debug").getElementsByTagName("INPUT");
		var clear =document.getElementById("debugClear");

		checkBoxes[0].onclick=shInfo;
		checkBoxes[1].onclick=shWarn;
		checkBoxes[2].onclick=shError;
		clear.onclick=clearMessage;
	}

	function clearMessage(){
		var content=debugWin.children[1].children[0];
		content.innerHTML="";
	}

	function startDrag(){
		window.event.cancelBubble=true;
		if(window.event.button==1){
			this.setCapture();
			leftOff=window.event.clientX-parseInt(debugWin.style.left);
			topOff=window.event.clientY-parseInt(debugWin.style.top);
			moveable=true;
		}
	}

	function drag(){
		window.event.cancelBubble=true;
		if(moveable){
			debugWin.style.left=window.event.clientX-leftOff;
			debugWin.style.top=window.event.clientY-topOff;
		}
	}

	function endDrag(){
		window.event.cancelBubble=true;
		if(window.event.button==1){
			moveable=false;
			this.releaseCapture();
		}
	}

	function min(){
		var body=this.parentNode.parentNode.children[1];
		
		if(this.innerHTML==0){
			this.innerHTML=2;
			body.style.display='none';
		}
		else{
			this.innerHTML=0;
			body.style.display='block';
		}
	}

	function close(){
		var debug=this.parentNode.parentNode;
		document.getElementsByTagName("body")[0].removeChild(debug);
	}

	this.info=function(info){
		if(debugEnable){
			var content=debugWin.children[1].children[0];
			var infoSpan=document.createElement("span");
			var date=new Date();
			var hour=date.getHours();
			var minute=date.getMinutes();
			var sec=date.getSeconds();
			infoSpan.type="info";
			infoSpan.onclick=function(){
				if(this.style.background=="black")
					this.style.background="white";
				else
					this.style.background="black";
				};
			infoSpan.ondblclick=function(){
				content.removeChild(this);
			}
			infoSpan.style.color="green";
			infoSpan.style.width="240px";
			infoSpan.style.overflow="auto";
			infoSpan.style.fontFamily="Arial";
			infoSpan.innerHTML='<B>INFO:&nbsp</B>'+info+'&nbsp^--^ '+hour+':'+minute+':'+sec+'\n';

			content.appendChild(infoSpan);
		}
	}

	this.warn=function(warn){
		if(debugEnable){
			var content=debugWin.children[1].children[0];
			var infoSpan=document.createElement("span");
			var date=new Date();
			var hour=date.getHours();
			var minute=date.getMinutes();
			var sec=date.getSeconds();
			infoSpan.type="warn";
			infoSpan.onclick=function(){
				if(this.style.background=="black")
					this.style.background="white";
				else
					this.style.background="black";
				};
			infoSpan.ondblclick=function(){
				content.removeChild(this);
			}
			infoSpan.style.color="orange";
			infoSpan.style.width="200px";
			infoSpan.style.overflow="auto";
			infoSpan.style.fontFamily="Arial";
			infoSpan.innerHTML='<B>WARN:&nbsp</B>'+warn+'&nbsp~,~ '+hour+':'+minute+':'+sec;

			content.appendChild(infoSpan);
		}
	}

	this.error=function(error){
		if(debugEnable){
			var content=debugWin.children[1].children[0];
			var infoSpan=document.createElement("span");
			var date=new Date();
			var hour=date.getHours();
			var minute=date.getMinutes();
			var sec=date.getSeconds();
			infoSpan.onclick=function(){
				if(this.style.background=="black")
					this.style.background="white";
				else
					this.style.background="black";
				};
			infoSpan.ondblclick=function(){
				content.removeChild(this);
			}
			infoSpan.type="error";
			infoSpan.style.color="red";
			infoSpan.style.width="200px";
			infoSpan.style.overflow="auto";
			infoSpan.style.fontFamily="Arial";
			infoSpan.innerHTML='<B>ERROR:&nbsp</B>'+error+'&nbsp*--* '+hour+':'+minute+':'+sec;

			content.appendChild(infoSpan);
		}
	}

	function pause(){
		if(debugEnable){
			this.children[0].src='./resume.png';
			debugEnable=false;
		}
		else{
			this.children[0].src='./pause.png';
			debugEnable=true;
		}
	}

	function shInfo(){
		var content=debugWin.children[1].children[0];
		var allSpan=content.children;
		if(this.checked){
			for(var i=0;i<allSpan.length;i++){
				if(allSpan[i].type=="info")
					allSpan[i].style.display='block';
			}
		}
		else{
			for(var i=0;i<allSpan.length;i++){
					if(allSpan[i].type=="info")
						allSpan[i].style.display='none';
				}
		}
	}

	function shWarn(){
		var content=debugWin.children[1].children[0];
		var allSpan=content.children;
		if(this.checked){
			for(var i=0;i<allSpan.length;i++){
				if(allSpan[i].type=="warn")
					allSpan[i].style.display='block';
			}
		}
		else{
			for(var i=0;i<allSpan.length;i++){
				if(allSpan[i].type=="warn")
					allSpan[i].style.display='none';
			}
		}
	}

	function shError(){
		var content=debugWin.children[1].children[0];
		var allSpan=content.children;
		if(this.checked){
			for(var i=0;i<allSpan.length;i++){
				if(allSpan[i].type=="error")
					allSpan[i].style.display='block';
			}
		}
		else{
			for(var i=0;i<allSpan.length;i++){
				if(allSpan[i].type=="error")
					allSpan[i].style.display='none';
			}
		}
	}


	init();
}