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> <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需再刷新一下页面才能执行]

您可能感兴趣的文章:

layui+ssm实现数据表格双击编辑更新数据功能
在使用layui加载后端数据请求时,对数据选项框进行双击即可实现数据的输入编辑更改,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
javascript 读取XML数据，在页面中展现、编辑、保存的实现
最近需要做这样一个需求，数据保存在XML里，在页面上通过表格显示其内容，可以修改内容，再保存到XML。下面把做这个东西的过程记录下来，做个笔记，也给需要的人一些帮助。
2009-10-10
JavaScript实现无缝轮播图的示例代码
这篇文章主要为大家详细介绍了如何利用JavaScript语言实现无缝轮播功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
Echarts读取动态数据完整代码
这篇文章主要给大家介绍了关于Echarts读取动态数据的相关资料,使用Echarts画图时,数据一般不是静态写死的,而是通过后端接口动态获取的,需要的朋友可以参考下
2023-10-10
JavaScript实现返回顶部按钮
这篇文章主要为大家详细介绍了JavaScript实现返回顶部按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
JS解决IOS中拍照图片预览旋转90度BUG的问题
下面小编就为大家带来一篇JS解决IOS中拍照图片预览旋转90度BUG的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
JS常用跨域方法实现原理解析
这篇文章主要介绍了JS常用跨域方法实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-12-12
javascript操作数组详解
这篇文章主要详细介绍了javascript操作数组的方法以及示例,需要的朋友可以参考下
2014-12-12
js控制框架刷新
一句话控制框架的刷新
2008-08-08
js生成1到100的随机数最简单的实现方法
在本篇文章里小编给大家整理了关于js生成1到100的随机数最简单的实现方法，有需要的朋友们可以学习下。
2020-02-02