viel spass damit =)
test: http://jsfiddle.net/zvc3ta5o/
code:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Console</title>
<script type="text/javascript">
var Console =
{
list_title:"Console",
btn_start_name:"startScroll",
btn_stop_name:"stopScroll",
list_style:{
"backgroundColor" : "#000",
"color" : "#ccc",
"width" : "100%",
"height" : "400px",
"border" : "1px solid black",
"overflow" : "scroll",
},
max_list_size_len:10000,
list_line_element:"div",
wrap:null,
title:null,
list:null,
btn_start:null,
btn_stop:null,
scroll_interval:null,
_:null,
init:function(wrap_element_id)
{
if(this._ === true){return;}
this.wrap = document.getElementById(wrap_element_id);
this.list = document.createElement("div"),
this.title = document.createElement("h3"),
this.btn_start = document.createElement("button"),
this.btn_stop = document.createElement("button");
for(var attr in this.list_style){
this.list.style[attr] = this.list_style[attr];
}
this.btn_start.appendChild(document.createTextNode(this.btn_start_name)),
this.btn_start.addEventListener(
'click', function(){ Console.startScroll(); }, false
),
this.btn_stop.appendChild(document.createTextNode(this.btn_stop_name)),
this.btn_stop.addEventListener(
'click', function(){ Console.stopScroll(); }, false
),
this.title.appendChild(document.createTextNode(this.list_title)),
this.wrap.appendChild(this.title),
this.wrap.appendChild(this.btn_start),
this.wrap.appendChild(this.btn_stop),
this.wrap.appendChild(this.list);
this._ = true;
return;
},
startScroll:function()
{
this.scroll_interval === null && (this.scroll_interval=setInterval(function(){
Console.list.scrollTop = Console.list.scrollHeight;
}, 200
));
return;
},
stopScroll:function()
{
this.scroll_interval !== null && clearInterval(this.scroll_interval);
this.scroll_interval = null;
return;
},
log:function(str)
{
var row = document.createElement(this.list_line_element);
row.appendChild(document.createTextNode(str));
this.list.appendChild(row);
while(this.list.innerHTML.length > this.max_list_size_len){
var list = this.list.getElementsByTagName(this.list_line_element);
(list.length > 0) && list[0].parentNode.removeChild(list[0]);
}
return;
}
}
</script>
</head>
<body>
<pre id="console"></pre>
<script type="text/javascript">
Console.init("console");
Console.startScroll();
var nr = 0;
for(var i = 0; i < 1000; i++){
setTimeout(
function(){
var lines = Console.list.getElementsByTagName(Console.list_line_element).length;
var max_len = Console.max_list_size_len;
Console.log("writing line nr " + (nr++) + " (lines in list: " + lines + ")");
}, i*10
);
}
</script>
</body>
</html>