Javascript实时柱状图实现代码

时间:2020-05-12 人气:0

<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.qb5200.com 
</script> 
</head>

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

加载全部内容