首页 > 网络编程 > JavaScript > javascript技巧 > 实时柱状图

Javascript实时柱状图实现代码

2008-10-25 01:52:38 作者：

js实现的实时柱状图,非常有创意的想法。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>实时柱状图</title> 
<style type="text/css"> 
span{ background-color:lime;font-size:1px;} 
</style> 
<script type="text/javascript">

var arr = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);

function showimage() 
{ 
var newdata = Math.ceil(Math.random()*200); //得到1-200之间的整数 
arr = arr.slice(1); 
arr[99] = newdata; 
var str = ""; 
for(var i=0;i<arr.length;i++) 
{ 
str += "<span style='width:4px;height:"+ arr[i] +"px'></span>"; 
} 
show.innerHTML = str ; 
span1.innerText = newdata; 
if(newdata>180)newdata=180 
span2.style.height = newdata; 
window.setTimeout("showimage()",300); 
} 
//脚本之家 www.jb51.net 
</script> 
</head>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Javascript实时柱状图实现代码

您可能感兴趣的文章: