Javascript實時柱狀圖實現代碼

2019-11-21 01:35:08

字體：大中小

來源：轉載

供稿：網友

<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); } //武林網 m.survivalescaperooms.com </script> </head> <body bgcolor="black" style="color:white" onload="showimage()"> <table height="200" border="0px;" cellspacing="0" cellpadding="0"> <tr> <td width="20" valign="bottom" align="right"> <div style="height:90px;width:100%">200</div><div style="height:90px;width:100%">100</div><div style="height:20px;width:100%">0</div> </td> <td width="400" valign="bottom" id="show"></td> <td width="35" valign="bottom" align="center"> <span id="span1" style="width:100%;background-color:black;font-size:12px;">50</span> <span id="span2" style="width:10px;height:50px"></span> </td> </tr> </table> </body></html>

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

上一篇：javascript完整操作Table的增加行，刪除行的列子大全

下一篇：JS對URL字符串進行編碼/解碼分析